@boost33/ui 0.8.0-next.2 → 0.8.0-next.4

package/CHANGELOG.md

@@ -219,6 +219,80 @@ Repo-only: the specimen's "Shell redesign — B33-1710" route grows the top bar,
 the open token popover, board 22's nothing-purchased chip, and the unknown,
 past-zero and total-only chips.
 
+### Fixed — the top bar fits at 1024px; the token popover stays on screen (0.8.0-next.4)
+
+- **Below 80rem of bar, the centre group's two labels leave the screen.**
+  next.3 stopped the regions overlapping, but the centre does not shrink, so at
+  1024px Content's bar still needed 1067px and clipped the avatar. Now
+  "Switch Tools →" and "Check Your Tokens →" are hidden visually wherever the
+  bar's content box is under 80rem (1280px; a full-width bar in a window under
+  1344px) and the centre gives back about 280px. They stay in the
+  accessibility tree, before the control each introduces, so a screen reader
+  hears the same thing at every width. A container query on the bar
+  (`container: boost33-top-bar / inline-size`), so a bar narrower than the
+  window is measured by its own width. Measured in Chromium at 1024px with a
+  256px start group and either a 70px or a 220px actions group: no overflow and
+  no overlap. If you write container queries in the bar's slots, name your own
+  container: the bar is now a container.
+- **The token popover stays on screen.** It hangs from the pill's left edge and
+  is 340px wide. At 390px its right edge was at 535px, cutting the threshold
+  line and the reset note, and at 1024px it overshot by 8px. It now slides left
+  by exactly its overshoot to keep 16px from the right edge (never past 16px
+  from the left), and is never wider than the viewport less 32px. Both the
+  split chip and `totalOnly` do this. It is measured before paint and again on
+  resize.
+- **Below `chromeFrom` the shell fills the screen**: `min-height: 100dvh`
+  instead of next.3's `100%`, which resolved against app wrappers with no
+  height and left short pages ending grey (Content).
+- **No approved screenshot moves**: all 40 gated states measure the same with
+  and without these changes, each on a fresh specimen build.
+
+### Fixed — the top-bar token chip warns again past 80% of the grant; the top bar holds its layout (0.8.0-next.3)
+
+- **The 80% threshold is back in the top bar.** 0.8.0-next.0 moved the chip to
+  the top bar without its threshold state, so a seller who had burned 87% of the
+  month's grant saw the same chip as one at 10%, and nothing here said so
+  (found by Score). `placement="topbar"` now reads `grantCycle` and
+  `burnedFraction` exactly as the sidebar card does (the consumer's
+  `burnedFraction` wins, otherwise it is derived from `grantCycle`, and with
+  neither nothing is claimed). Past 80%:
+  - with `grantCycle`, the bar in the chip and in the popover measures against
+    what the cycle started with, so it shortens and the burned share shows as
+    the warning-tinted track: the sidebar card's drawing (Jamal, 4 Nov 2026).
+    With `burnedFraction` alone there is no honest denominator, so the bar
+    stays full;
+  - the popover shows a line above the runway note, and the chip's accessible
+    name ends with it, so the warning is never colour alone. **New label
+    `thresholdNote`**, a template with `%percent%`, formatted for `locale`
+    ("87%", "87 %"). Default `You've used %percent% of this month's grant.`
+    A catalogue typed as a full `WalletChipLabels` must add it; that is the
+    typecheck catching a missing translation;
+  - the root carries `data-threshold="true"`. Buy tokens is unchanged: the
+    accent primary.
+  Keep passing `grantCycle` (or `burnedFraction`) to the top-bar chip.
+- **The top bar keeps its regions apart at any width.** At 1024px the start
+  group (mark and organisation pill) was given less than it held and painted
+  across "Switch Tools →" (Content, Wallet, Activity, Outbound). The bar is now
+  a three-column grid whose sides are never narrower than their contents: where
+  everything fits, the centre group sits in the middle as before; where it does
+  not, the centre moves off the middle instead of under the pill. Below that,
+  on a phone with no `chromeFrom`, the bar runs off the right edge in order
+  rather than piling up (Score). **No approved screenshot moves**: every gated
+  state measures the same pixel count with and without the change.
+- **The top bar is a `<header>`**, the page's banner landmark, so assistive tech
+  can jump to it and a test can scope to it (Score). `getByRole('banner')`
+  finds it. The census in `scripts/border-proof.ts` records the bar's hairline on
+  a `header` now; the pixels did not move.
+- **The popover's reset note ends on the date.** `grantedNote` defaults to
+  `Included each month · resets %date%`, without the `Resets %date%.`
+  full stop that printed "30 sept.." for a French date (Score). If you
+  translate it, keep punctuation off the end of `%date%`. `grantExpires` is one
+  date in both placements, the day this month's grant runs out and the next
+  lands. The sidebar says it as an expiry, the popover as a reset.
+- **Below `chromeFrom` the shell still fills its root** (`min-height: 100%`),
+  so a short page keeps the white ground to the bottom of the screen (Content).
+  Replaced by `100dvh` in next.4.
+
 ### Added — `AppShell` gets out of the way on a phone: `chromeFrom` and `phoneChrome`
 
 AppShell has no phone layout, and the 0.8 top bar runs off a 390px screen.

package/dist/components/AppShell/AppShell.module.css.js

@@ -1,28 +1,28 @@
-const o = "_shell_1rvaz_13", n = "_body_1rvaz_24", t = "_appName_1rvaz_39", _ = "_foot_1rvaz_65", a = "_actionSlot_1rvaz_79", c = "_action_1rvaz_79", s = "_srOnly_1rvaz_103", e = "_nav_1rvaz_116", r = "_main_1rvaz_125", l = "_content_1rvaz_146", v = "_phoneChrome_1rvaz_201", z = {
+const o = "_shell_l6zer_13", n = "_body_l6zer_24", t = "_appName_l6zer_39", _ = "_foot_l6zer_65", e = "_actionSlot_l6zer_79", l = "_action_l6zer_79", c = "_srOnly_l6zer_103", s = "_nav_l6zer_116", a = "_main_l6zer_125", r = "_content_l6zer_146", z = "_phoneChrome_l6zer_207", p = {
   shell: o,
   body: n,
   appName: t,
   foot: _,
-  actionSlot: a,
-  action: c,
-  srOnly: s,
-  nav: e,
-  main: r,
-  content: l,
-  phoneChrome: v
+  actionSlot: e,
+  action: l,
+  srOnly: c,
+  nav: s,
+  main: a,
+  content: r,
+  phoneChrome: z
 };
 export {
-  c as action,
-  a as actionSlot,
+  l as action,
+  e as actionSlot,
   t as appName,
   n as body,
-  l as content,
-  z as default,
+  r as content,
+  p as default,
   _ as foot,
-  r as main,
-  e as nav,
-  v as phoneChrome,
+  a as main,
+  s as nav,
+  z as phoneChrome,
   o as shell,
-  s as srOnly
+  c as srOnly
 };
 //# sourceMappingURL=AppShell.module.css.js.map

package/dist/components/TopBar/TopBar.js

@@ -1,26 +1,26 @@
-import { jsxs as r, Fragment as c, jsx as n } from "react/jsx-runtime";
-import { warnDeprecatedProp as u } from "../../deprecated-prop-warning.js";
-import { resolveTopBarLabels as h } from "./labels.js";
-import l from "./TopBar.module.css.js";
-function T({ sidebarToggle: o, start: i, switcher: e, tokens: a, actions: d, labels: t, breadcrumb: m }) {
-  m != null && u("TopBar.breadcrumb");
-  const s = h(t), p = e != null || a != null;
-  return /* @__PURE__ */ r("div", { className: l.bar, children: [
-    /* @__PURE__ */ r("div", { className: l.start, children: [
+import { jsxs as l, Fragment as c, jsx as n } from "react/jsx-runtime";
+import { warnDeprecatedProp as h } from "../../deprecated-prop-warning.js";
+import { resolveTopBarLabels as u } from "./labels.js";
+import e from "./TopBar.module.css.js";
+function T({ sidebarToggle: o, start: d, switcher: r, tokens: a, actions: i, labels: t, breadcrumb: m }) {
+  m != null && h("TopBar.breadcrumb");
+  const s = u(t), p = r != null || a != null;
+  return /* @__PURE__ */ l("header", { className: e.bar, children: [
+    /* @__PURE__ */ l("div", { className: e.start, children: [
       o,
-      i
+      d
     ] }),
-    p && /* @__PURE__ */ r("div", { className: l.centre, children: [
-      e != null && /* @__PURE__ */ r(c, { children: [
-        /* @__PURE__ */ n("span", { className: l.label, children: s.switchTools }),
-        e
+    p && /* @__PURE__ */ l("div", { className: e.centre, children: [
+      r != null && /* @__PURE__ */ l(c, { children: [
+        /* @__PURE__ */ n("span", { className: e.label, children: s.switchTools }),
+        r
       ] }),
-      a != null && /* @__PURE__ */ r(c, { children: [
-        /* @__PURE__ */ n("span", { className: l.label, "data-after-switcher": e != null ? "true" : void 0, children: s.checkTokens }),
+      a != null && /* @__PURE__ */ l(c, { children: [
+        /* @__PURE__ */ n("span", { className: e.label, "data-after-switcher": r != null ? "true" : void 0, children: s.checkTokens }),
         a
       ] })
     ] }),
-    /* @__PURE__ */ n("div", { className: l.end, children: d })
+    /* @__PURE__ */ n("div", { className: e.end, children: i })
   ] });
 }
 export {

package/dist/components/TopBar/TopBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopBar.js","sources":["../../../src/components/TopBar/TopBar.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { warnDeprecatedProp } from '../../deprecated-prop-warning'\nimport { resolveTopBarLabels, type TopBarLabels } from './labels'\nimport styles from './TopBar.module.css'\n\nexport interface TopBarProps {\n  /**\n   * The control that collapses the sidebar to its 56px rail and back, at the\n   * far left of the bar, before the mark (B33-1712). A slot: the product's own\n   * button, which owns the collapsed state.\n   *\n   * It has a slot of its own because the bar stopped drawing `breadcrumb` in\n   * 0.8.0, and a consumer that kept its toggle inside the breadcrumb -- the\n   * Wallet did -- would otherwise lose its only way into and out of the rail on\n   * upgrade, silently: the pixel diff passed the bar at 0.19% with the toggle\n   * gone. No board draws it; the rail keeps working with no new design.\n   */\n  sidebarToggle?: ReactNode\n  /**\n   * The left of the bar: the Boost33 mark and the organisation's pill, as the 3\n   * Nov 2026 redesign draws it (B33-1712, board 20). A slot. Inside `AppShell`\n   * the shell fills it from its own `mark`, `hubHref` and `org` props, so a\n   * consumer of the shell does not set this.\n   */\n  start?: ReactNode\n  /**\n   * The app switcher, at the centre of the bar after its \"Switch Tools →\"\n   * label. A slot: pass `AppSwitcher`. Omit it and neither it nor its label is\n   * drawn. Inside `AppShell`, the shell's `switcher` prop lands here.\n   */\n  switcher?: ReactNode\n  /**\n   * The token chip, after the switcher and its \"Check Your Tokens →\" label. A\n   * slot: pass `WalletChip` with `placement=\"topbar\"`. Omit it and neither it\n   * nor its label is drawn. Inside `AppShell`, the shell's `wallet` prop lands\n   * here.\n   */\n  tokens?: ReactNode\n  /**\n   * The right of the bar: the notification button and the account avatar\n   * (board 20). A slot -- the product's own, or the package's\n   * `NotificationButton` beside the consumer's avatar.\n   *\n   * Search is not here and nothing replaces it: Jamal removed it on 3 Nov 2026\n   * until the feature is built (B33-1710), and the CommandPalette that would\n   * open from it is left out of 0.8.0 with no trigger and no shortcut.\n   */\n  actions?: ReactNode\n  /** The centre group's two labels. Each field defaults to English. */\n  labels?: Partial<TopBarLabels>\n  /**\n   * Was the breadcrumb on the left of the bar. **Not drawn since 0.8.0**: the\n   * redesign puts the mark and the organisation there, and the page's own\n   * `PageHeader` names where you are. Optional so an existing call site still\n   * compiles.\n   *\n   * @deprecated Rendered nowhere since 0.8.0 (B33-1712). Stop passing it; in\n   * development, passing it logs a console warning once.\n   */\n  breadcrumb?: ReactNode\n}\n\n// The bar across the top of every screen (B33-1712). Three regions: the mark\n// and organisation on the left, the switcher and token chip in a centred group,\n// and the product's actions on the right. Left and right take equal shares of\n// what the centre leaves, which is what holds the centre group in the middle of\n// the bar whatever either side holds.\n//\n// A Server Component: no state, no handlers. The two controls in the centre are\n// client components passed in as slots.\nexport function TopBar({ sidebarToggle, start, switcher, tokens, actions, labels, breadcrumb }: TopBarProps) {\n  if (breadcrumb != null) warnDeprecatedProp('TopBar.breadcrumb')\n  const t = resolveTopBarLabels(labels)\n  const hasCentre = switcher != null || tokens != null\n\n  return (\n    <div className={styles.bar}>\n      <div className={styles.start}>\n        {sidebarToggle}\n        {start}\n      </div>\n      {hasCentre && (\n        <div className={styles.centre}>\n          {switcher != null && (\n            <>\n              <span className={styles.label}>{t.switchTools}</span>\n              {switcher}\n            </>\n          )}\n          {tokens != null && (\n            <>\n              {/* The second label keeps 32px clear of the switcher, so each\n                  label reads as belonging to the control after it, not the one\n                  before it (board 20). With no switcher there is nothing to\n                  keep clear of, and the padding goes. */}\n              <span className={styles.label} data-after-switcher={switcher != null ? 'true' : undefined}>\n                {t.checkTokens}\n              </span>\n              {tokens}\n            </>\n          )}\n        </div>\n      )}\n      <div className={styles.end}>{actions}</div>\n    </div>\n  )\n}\n"],"names":["TopBar","sidebarToggle","start","switcher","tokens","actions","labels","breadcrumb","warnDeprecatedProp","t","resolveTopBarLabels","hasCentre","jsxs","styles","Fragment","jsx"],"mappings":";;;;AAsEO,SAASA,EAAO,EAAE,eAAAC,GAAe,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,GAAQ,YAAAC,KAA2B;AAC3G,EAAIA,KAAc,QAAMC,EAAmB,mBAAmB;AAC9D,QAAMC,IAAIC,EAAoBJ,CAAM,GAC9BK,IAAYR,KAAY,QAAQC,KAAU;AAEhD,SACE,gBAAAQ,EAAC,OAAA,EAAI,WAAWC,EAAO,KACrB,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,OACpB,UAAA;AAAA,MAAAZ;AAAA,MACAC;AAAA,IAAA,GACH;AAAA,IACCS,KACC,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,QACpB,UAAA;AAAA,MAAAV,KAAY,QACX,gBAAAS,EAAAE,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWF,EAAO,OAAQ,YAAE,aAAY;AAAA,QAC7CV;AAAA,MAAA,GACH;AAAA,MAEDC,KAAU,QACT,gBAAAQ,EAAAE,GAAA,EAKE,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWF,EAAO,OAAO,uBAAqBV,KAAY,OAAO,SAAS,QAC7E,UAAAM,EAAE,YAAA,CACL;AAAA,QACCL;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IAEF,gBAAAW,EAAC,OAAA,EAAI,WAAWF,EAAO,KAAM,UAAAR,EAAA,CAAQ;AAAA,EAAA,GACvC;AAEJ;"}
+{"version":3,"file":"TopBar.js","sources":["../../../src/components/TopBar/TopBar.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { warnDeprecatedProp } from '../../deprecated-prop-warning'\nimport { resolveTopBarLabels, type TopBarLabels } from './labels'\nimport styles from './TopBar.module.css'\n\nexport interface TopBarProps {\n  /**\n   * The control that collapses the sidebar to its 56px rail and back, at the\n   * far left of the bar, before the mark (B33-1712). A slot: the product's own\n   * button, which owns the collapsed state.\n   *\n   * It has a slot of its own because the bar stopped drawing `breadcrumb` in\n   * 0.8.0, and a consumer that kept its toggle inside the breadcrumb -- the\n   * Wallet did -- would otherwise lose its only way into and out of the rail on\n   * upgrade, silently: the pixel diff passed the bar at 0.19% with the toggle\n   * gone. No board draws it; the rail keeps working with no new design.\n   */\n  sidebarToggle?: ReactNode\n  /**\n   * The left of the bar: the Boost33 mark and the organisation's pill, as the 3\n   * Nov 2026 redesign draws it (B33-1712, board 20). A slot. Inside `AppShell`\n   * the shell fills it from its own `mark`, `hubHref` and `org` props, so a\n   * consumer of the shell does not set this.\n   */\n  start?: ReactNode\n  /**\n   * The app switcher, at the centre of the bar after its \"Switch Tools →\"\n   * label. A slot: pass `AppSwitcher`. Omit it and neither it nor its label is\n   * drawn. Inside `AppShell`, the shell's `switcher` prop lands here.\n   */\n  switcher?: ReactNode\n  /**\n   * The token chip, after the switcher and its \"Check Your Tokens →\" label. A\n   * slot: pass `WalletChip` with `placement=\"topbar\"`. Omit it and neither it\n   * nor its label is drawn. Inside `AppShell`, the shell's `wallet` prop lands\n   * here.\n   */\n  tokens?: ReactNode\n  /**\n   * The right of the bar: the notification button and the account avatar\n   * (board 20). A slot -- the product's own, or the package's\n   * `NotificationButton` beside the consumer's avatar.\n   *\n   * Search is not here and nothing replaces it: Jamal removed it on 3 Nov 2026\n   * until the feature is built (B33-1710), and the CommandPalette that would\n   * open from it is left out of 0.8.0 with no trigger and no shortcut.\n   */\n  actions?: ReactNode\n  /** The centre group's two labels. Each field defaults to English. */\n  labels?: Partial<TopBarLabels>\n  /**\n   * Was the breadcrumb on the left of the bar. **Not drawn since 0.8.0**: the\n   * redesign puts the mark and the organisation there, and the page's own\n   * `PageHeader` names where you are. Optional so an existing call site still\n   * compiles.\n   *\n   * @deprecated Rendered nowhere since 0.8.0 (B33-1712). Stop passing it; in\n   * development, passing it logs a console warning once.\n   */\n  breadcrumb?: ReactNode\n}\n\n// The bar across the top of every screen (B33-1712). Three regions: the mark\n// and organisation on the left, the switcher and token chip in a centred group,\n// and the product's actions on the right. Left and right take equal shares of\n// what the centre leaves, which is what holds the centre group in the middle of\n// the bar whatever either side holds.\n//\n// A Server Component: no state, no handlers. The two controls in the centre are\n// client components passed in as slots.\nexport function TopBar({ sidebarToggle, start, switcher, tokens, actions, labels, breadcrumb }: TopBarProps) {\n  if (breadcrumb != null) warnDeprecatedProp('TopBar.breadcrumb')\n  const t = resolveTopBarLabels(labels)\n  const hasCentre = switcher != null || tokens != null\n\n  // A <header>, so the bar is the page's banner landmark and a screen-reader\n  // user can jump to it, and an end-to-end test can scope to it (score-main,\n  // 0.8.0-next.2). Inside AppShell it is never within <main> or an <article>,\n  // which is what makes a <header> a banner. `display: grid` is set on the\n  // class, so the element swap changes no box.\n  return (\n    <header className={styles.bar}>\n      <div className={styles.start}>\n        {sidebarToggle}\n        {start}\n      </div>\n      {hasCentre && (\n        <div className={styles.centre}>\n          {switcher != null && (\n            <>\n              <span className={styles.label}>{t.switchTools}</span>\n              {switcher}\n            </>\n          )}\n          {tokens != null && (\n            <>\n              {/* The second label keeps 32px clear of the switcher, so each\n                  label reads as belonging to the control after it, not the one\n                  before it (board 20). With no switcher there is nothing to\n                  keep clear of, and the padding goes. */}\n              <span className={styles.label} data-after-switcher={switcher != null ? 'true' : undefined}>\n                {t.checkTokens}\n              </span>\n              {tokens}\n            </>\n          )}\n        </div>\n      )}\n      <div className={styles.end}>{actions}</div>\n    </header>\n  )\n}\n"],"names":["TopBar","sidebarToggle","start","switcher","tokens","actions","labels","breadcrumb","warnDeprecatedProp","t","resolveTopBarLabels","hasCentre","jsxs","styles","Fragment","jsx"],"mappings":";;;;AAsEO,SAASA,EAAO,EAAE,eAAAC,GAAe,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,GAAQ,YAAAC,KAA2B;AAC3G,EAAIA,KAAc,QAAMC,EAAmB,mBAAmB;AAC9D,QAAMC,IAAIC,EAAoBJ,CAAM,GAC9BK,IAAYR,KAAY,QAAQC,KAAU;AAOhD,SACE,gBAAAQ,EAAC,UAAA,EAAO,WAAWC,EAAO,KACxB,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,OACpB,UAAA;AAAA,MAAAZ;AAAA,MACAC;AAAA,IAAA,GACH;AAAA,IACCS,KACC,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,QACpB,UAAA;AAAA,MAAAV,KAAY,QACX,gBAAAS,EAAAE,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWF,EAAO,OAAQ,YAAE,aAAY;AAAA,QAC7CV;AAAA,MAAA,GACH;AAAA,MAEDC,KAAU,QACT,gBAAAQ,EAAAE,GAAA,EAKE,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWF,EAAO,OAAO,uBAAqBV,KAAY,OAAO,SAAS,QAC7E,UAAAM,EAAE,YAAA,CACL;AAAA,QACCL;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IAEF,gBAAAW,EAAC,OAAA,EAAI,WAAWF,EAAO,KAAM,UAAAR,EAAA,CAAQ;AAAA,EAAA,GACvC;AAEJ;"}

package/dist/components/TopBar/TopBar.module.css.js

@@ -1,15 +1,15 @@
-const t = "_bar_1lxv8_9", e = "_start_1lxv8_25", _ = "_end_1lxv8_26", l = "_centre_1lxv8_45", n = "_label_1lxv8_54", s = {
+const t = "_bar_1fqrh_9", e = "_start_1fqrh_40", r = "_end_1fqrh_41", _ = "_centre_1fqrh_60", n = "_label_1fqrh_69", s = {
   bar: t,
   start: e,
-  end: _,
-  centre: l,
+  end: r,
+  centre: _,
   label: n
 };
 export {
   t as bar,
-  l as centre,
+  _ as centre,
   s as default,
-  _ as end,
+  r as end,
   n as label,
   e as start
 };

package/dist/components/WalletChip/WalletChip.d.ts

@@ -155,7 +155,12 @@ export interface WalletChipKnownProps extends WalletChipChromeProps {
      * wrong figure that looks wrong is the one that gets fixed.
      */
     burnedFraction?: number;
-    /** When the current grant expires, preformatted for display, e.g. "30 Sep". */
+    /**
+     * When the current grant expires, preformatted for display, e.g. "30 Sep":
+     * the day this month's grant runs out and the next one lands. The sidebar
+     * card says it as an expiry (`labels.grantExpiry`), the top-bar popover as a
+     * reset (`labels.grantedNote`); both are this one date.
+     */
     grantExpires?: string;
     /**
      * The threshold state's runway line, preformatted, e.g. "About four days left

package/dist/components/WalletChip/WalletChip.js

@@ -1,150 +1,172 @@
 "use client";
-import { jsx as a, jsxs as n, Fragment as P } from "react/jsx-runtime";
-import { useAnchoredOverlay as U } from "../../anchored-overlay.js";
-import { Chevron as $ } from "../AppSwitcher/icons.js";
+import { jsx as a, jsxs as t, Fragment as Z } from "react/jsx-runtime";
+import { useRef as W, useLayoutEffect as z } from "react";
+import { useAnchoredOverlay as G } from "../../anchored-overlay.js";
+import { Chevron as M } from "../AppSwitcher/icons.js";
 import y from "../../buttons.module.css.js";
 import e from "./WalletChip.module.css.js";
-import { formatTokens as o, DEFAULT_WALLET_LOCALE as k, thousandsFigure as w } from "./format.js";
-import { WalletMark as x, RetryMark as O } from "./icons.js";
-import { resolveWalletChipLabels as A } from "./labels.js";
-const E = 0.8, G = "var(--spacing-wallet-segment-min)";
-function L(i, l) {
-  const t = l > 0 ? i / l * 100 : 0;
-  return i <= 0 ? `${t}%` : `max(${t}%, ${G})`;
+import { formatTokens as v, DEFAULT_WALLET_LOCALE as $, formatPercent as j, thousandsFigure as D } from "./format.js";
+import { WalletMark as H, RetryMark as V } from "./icons.js";
+import { resolveWalletChipLabels as w } from "./labels.js";
+const _ = 0.8, X = "var(--spacing-wallet-segment-min)";
+function P(s, i) {
+  const n = i > 0 ? s / i * 100 : 0;
+  return s <= 0 ? `${n}%` : `max(${n}%, ${X})`;
 }
-function R({ granted: i, purchased: l, cycleTotal: t, tone: p, label: r }) {
-  return /* @__PURE__ */ n("div", { className: e.bar, "data-tone": p, role: "img", "aria-label": r, children: [
-    /* @__PURE__ */ a("span", { className: e.segmentGranted, "data-testid": "segment-granted", style: { width: L(i, t) } }),
-    /* @__PURE__ */ a("span", { className: e.segmentPurchased, "data-testid": "segment-purchased", style: { width: L(l, t) } })
+function U({ granted: s, purchased: i, cycleTotal: n, tone: h, label: p }) {
+  return /* @__PURE__ */ t("div", { className: e.bar, "data-tone": h, role: "img", "aria-label": p, children: [
+    /* @__PURE__ */ a("span", { className: e.segmentGranted, "data-testid": "segment-granted", style: { width: P(s, n) } }),
+    /* @__PURE__ */ a("span", { className: e.segmentPurchased, "data-testid": "segment-purchased", style: { width: P(i, n) } })
   ] });
 }
-function J(i) {
-  return i.totalOnly === !0 ? /* @__PURE__ */ a(W, { ...i }) : i.placement === "topbar" ? /* @__PURE__ */ a(M, { ...i }) : /* @__PURE__ */ a(I, { ...i });
+function oe(s) {
+  return s.totalOnly === !0 ? /* @__PURE__ */ a(K, { ...s }) : s.placement === "topbar" ? /* @__PURE__ */ a(J, { ...s }) : /* @__PURE__ */ a(Q, { ...s });
 }
-function M({ granted: i = 0, purchased: l = 0, grantExpires: t, burnNote: p, unknown: r = !1, onTopUp: v, labels: m, locale: u = k, walletHref: c, linkComponent: g, defaultOpen: h }) {
-  const s = A(m), d = U({ defaultOpen: h }), B = g ?? "a", b = i + l, F = b, f = r ? "—" : o(b, u), N = () => s.bar(o(i, u), o(l, u), o(b, u));
-  return /* @__PURE__ */ n("div", { className: e.topRoot, children: [
-    /* @__PURE__ */ n("button", { type: "button", className: e.topTrigger, "aria-label": r ? s.railBalanceUnknown : s.railBalance(f), onClick: d.toggle, ...d.triggerProps, children: [
-      /* @__PURE__ */ n("span", { className: e.topFigure, "aria-hidden": "true", children: [
-        /* @__PURE__ */ a("span", { className: e.topAmount, children: f }),
-        /* @__PURE__ */ a("span", { className: e.topUnit, children: s.unit })
+const x = 16;
+function q(s, i) {
+  z(() => {
+    if (!i) return;
+    const n = s.current, h = n == null ? void 0 : n.querySelector("[data-token-popover]");
+    if (!n || !h) return;
+    const p = () => {
+      h.style.left = "";
+      const m = n.getBoundingClientRect().left, l = h.getBoundingClientRect(), g = l.right - (document.documentElement.clientWidth - x);
+      if (g <= 0) return;
+      const c = Math.max(l.left - g, x);
+      h.style.left = `${c - m}px`;
+    };
+    return p(), window.addEventListener("resize", p), () => window.removeEventListener("resize", p);
+  }, [s, i]);
+}
+function J({ granted: s = 0, purchased: i = 0, grantCycle: n, burnedFraction: h, grantExpires: p, burnNote: m, unknown: l = !1, onTopUp: g, labels: c, locale: d = $, walletHref: u, linkComponent: o, defaultOpen: f }) {
+  const r = w(c), b = G({ defaultOpen: f }), F = W(null);
+  q(F, b.open);
+  const R = o ?? "a", N = s + i, B = n !== void 0 && n > 0 ? (n - s) / n : 0, E = h ?? B, k = !l && E >= _, A = k && n !== void 0 ? n + i : N, C = k ? "threshold" : void 0, T = l ? "—" : v(N, d), I = () => r.bar(v(s, d), v(i, d), v(N, d)), L = k ? r.thresholdNote(j(E, d)) : void 0, S = l ? r.railBalanceUnknown : L ? `${r.railBalance(T)}. ${L}` : r.railBalance(T);
+  return /* @__PURE__ */ t("div", { ref: F, className: e.topRoot, "data-threshold": k ? "true" : void 0, children: [
+    /* @__PURE__ */ t("button", { type: "button", className: e.topTrigger, "aria-label": S, onClick: b.toggle, ...b.triggerProps, children: [
+      /* @__PURE__ */ t("span", { className: e.topFigure, "aria-hidden": "true", children: [
+        /* @__PURE__ */ a("span", { className: e.topAmount, children: T }),
+        /* @__PURE__ */ a("span", { className: e.topUnit, children: r.unit })
       ] }),
-      !r && /* @__PURE__ */ a(T, { granted: i, purchased: l, total: F, className: e.topBar }),
-      /* @__PURE__ */ a($, { className: e.topChevron })
+      !l && /* @__PURE__ */ a(O, { granted: s, purchased: i, total: A, tone: C, className: e.topBar }),
+      /* @__PURE__ */ a(M, { className: e.topChevron })
     ] }),
-    d.open && /* @__PURE__ */ n("div", { ...d.panelProps, className: e.popover, "aria-label": s.popover, children: [
-      /* @__PURE__ */ n("div", { className: e.popHead, children: [
-        /* @__PURE__ */ n("span", { className: e.popFigure, children: [
-          /* @__PURE__ */ a("span", { className: e.popAmount, children: f }),
-          /* @__PURE__ */ a("span", { className: e.popUnit, children: s.unit })
+    b.open && /* @__PURE__ */ t("div", { ...b.panelProps, className: e.popover, "data-token-popover": "", "aria-label": r.popover, children: [
+      /* @__PURE__ */ t("div", { className: e.popHead, children: [
+        /* @__PURE__ */ t("span", { className: e.popFigure, children: [
+          /* @__PURE__ */ a("span", { className: e.popAmount, children: T }),
+          /* @__PURE__ */ a("span", { className: e.popUnit, children: r.unit })
         ] }),
-        c !== void 0 && /* @__PURE__ */ a(B, { className: y.quiet, href: c, onClick: d.close, children: s.open })
+        u !== void 0 && /* @__PURE__ */ a(R, { className: y.quiet, href: u, onClick: b.close, children: r.open })
       ] }),
-      r ? /* @__PURE__ */ a("p", { className: e.popNote, children: s.balanceUnknown }) : /* @__PURE__ */ n(P, { children: [
-        /* @__PURE__ */ a(T, { granted: i, purchased: l, total: F, className: e.popBar, label: N() }),
-        /* @__PURE__ */ n("ul", { className: e.legend, children: [
-          /* @__PURE__ */ n("li", { className: e.legendRow, children: [
+      l ? /* @__PURE__ */ a("p", { className: e.popNote, children: r.balanceUnknown }) : /* @__PURE__ */ t(Z, { children: [
+        /* @__PURE__ */ a(O, { granted: s, purchased: i, total: A, tone: C, className: e.popBar, label: I() }),
+        /* @__PURE__ */ t("ul", { className: e.legend, children: [
+          /* @__PURE__ */ t("li", { className: e.legendRow, children: [
             /* @__PURE__ */ a("span", { className: e.swatchGranted, "aria-hidden": "true" }),
-            /* @__PURE__ */ n("span", { className: e.legendText, children: [
-              /* @__PURE__ */ a("span", { className: e.legendFigure, children: s.grantedFigure(o(i, u)) }),
-              /* @__PURE__ */ a("span", { className: e.legendNote, children: t ? s.grantedNote(t) : s.grantedNoteUndated })
+            /* @__PURE__ */ t("span", { className: e.legendText, children: [
+              /* @__PURE__ */ a("span", { className: e.legendFigure, children: r.grantedFigure(v(s, d)) }),
+              /* @__PURE__ */ a("span", { className: e.legendNote, children: p ? r.grantedNote(p) : r.grantedNoteUndated })
             ] })
           ] }),
-          /* @__PURE__ */ n("li", { className: e.legendRow, children: [
+          /* @__PURE__ */ t("li", { className: e.legendRow, children: [
             /* @__PURE__ */ a("span", { className: e.swatchPurchased, "aria-hidden": "true" }),
-            /* @__PURE__ */ n("span", { className: e.legendText, children: [
-              /* @__PURE__ */ a("span", { className: e.legendFigure, children: s.purchasedFigure(o(l, u)) }),
-              /* @__PURE__ */ a("span", { className: e.legendNote, children: s.purchasedNote })
+            /* @__PURE__ */ t("span", { className: e.legendText, children: [
+              /* @__PURE__ */ a("span", { className: e.legendFigure, children: r.purchasedFigure(v(i, d)) }),
+              /* @__PURE__ */ a("span", { className: e.legendNote, children: r.purchasedNote })
             ] })
           ] })
         ] }),
-        (p || v !== void 0) && /* @__PURE__ */ n("div", { className: e.popFoot, children: [
-          p && /* @__PURE__ */ a("p", { className: e.popNote, children: p }),
-          v !== void 0 && /* @__PURE__ */ a("button", { type: "button", className: `${y.primary} ${e.buy}`, "data-tone": "accent", onClick: v, children: s.buyTokens })
+        (L || m || g !== void 0) && /* @__PURE__ */ t("div", { className: e.popFoot, children: [
+          L && /* @__PURE__ */ a("p", { className: e.popWarning, children: L }),
+          m && /* @__PURE__ */ a("p", { className: e.popNote, children: m }),
+          g !== void 0 && /* @__PURE__ */ a("button", { type: "button", className: `${y.primary} ${e.buy}`, "data-tone": "accent", onClick: g, children: r.buyTokens })
         ] })
       ] })
     ] })
   ] });
 }
-function W({ balance: i, burnNote: l, onTopUp: t, labels: p, locale: r = k, walletHref: v, linkComponent: m, defaultOpen: u }) {
-  const c = A(p), g = U({ defaultOpen: u }), h = m ?? "a", s = i < 0, d = o(s ? -i : i, r);
-  return /* @__PURE__ */ n("div", { className: e.topRoot, "data-past-zero": s ? "true" : void 0, children: [
-    /* @__PURE__ */ n("button", { type: "button", className: e.topTrigger, "aria-label": s ? c.pastZeroBalance(d) : c.railBalance(d), onClick: g.toggle, ...g.triggerProps, children: [
-      /* @__PURE__ */ n("span", { className: e.topFigure, "aria-hidden": "true", children: [
-        /* @__PURE__ */ a("span", { className: e.topAmount, children: d }),
-        /* @__PURE__ */ a("span", { className: e.topUnit, children: s ? c.pastZero : c.unit })
+function K({ balance: s, burnNote: i, onTopUp: n, labels: h, locale: p = $, walletHref: m, linkComponent: l, defaultOpen: g }) {
+  const c = w(h), d = G({ defaultOpen: g }), u = W(null);
+  q(u, d.open);
+  const o = l ?? "a", f = s < 0, r = v(f ? -s : s, p);
+  return /* @__PURE__ */ t("div", { ref: u, className: e.topRoot, "data-past-zero": f ? "true" : void 0, children: [
+    /* @__PURE__ */ t("button", { type: "button", className: e.topTrigger, "aria-label": f ? c.pastZeroBalance(r) : c.railBalance(r), onClick: d.toggle, ...d.triggerProps, children: [
+      /* @__PURE__ */ t("span", { className: e.topFigure, "aria-hidden": "true", children: [
+        /* @__PURE__ */ a("span", { className: e.topAmount, children: r }),
+        /* @__PURE__ */ a("span", { className: e.topUnit, children: f ? c.pastZero : c.unit })
       ] }),
-      /* @__PURE__ */ a($, { className: e.topChevron })
+      /* @__PURE__ */ a(M, { className: e.topChevron })
     ] }),
-    g.open && /* @__PURE__ */ n("div", { ...g.panelProps, className: e.popover, "aria-label": c.popover, children: [
-      /* @__PURE__ */ n("div", { className: e.popHead, children: [
-        /* @__PURE__ */ n("span", { className: e.popFigure, children: [
-          /* @__PURE__ */ a("span", { className: e.popAmount, children: d }),
-          /* @__PURE__ */ a("span", { className: e.popUnit, children: s ? c.pastZeroLong : c.unit })
+    d.open && /* @__PURE__ */ t("div", { ...d.panelProps, className: e.popover, "data-token-popover": "", "aria-label": c.popover, children: [
+      /* @__PURE__ */ t("div", { className: e.popHead, children: [
+        /* @__PURE__ */ t("span", { className: e.popFigure, children: [
+          /* @__PURE__ */ a("span", { className: e.popAmount, children: r }),
+          /* @__PURE__ */ a("span", { className: e.popUnit, children: f ? c.pastZeroLong : c.unit })
         ] }),
-        v !== void 0 && /* @__PURE__ */ a(h, { className: y.quiet, href: v, onClick: g.close, children: c.open })
+        m !== void 0 && /* @__PURE__ */ a(o, { className: y.quiet, href: m, onClick: d.close, children: c.open })
       ] }),
-      (l || t !== void 0) && /* @__PURE__ */ n("div", { className: e.popFoot, children: [
-        l && /* @__PURE__ */ a("p", { className: e.popNote, children: l }),
-        t !== void 0 && /* @__PURE__ */ a("button", { type: "button", className: `${y.primary} ${e.buy}`, "data-tone": "accent", onClick: t, children: c.buyTokens })
+      (i || n !== void 0) && /* @__PURE__ */ t("div", { className: e.popFoot, children: [
+        i && /* @__PURE__ */ a("p", { className: e.popNote, children: i }),
+        n !== void 0 && /* @__PURE__ */ a("button", { type: "button", className: `${y.primary} ${e.buy}`, "data-tone": "accent", onClick: n, children: c.buyTokens })
       ] })
     ] })
   ] });
 }
-function T({ granted: i, purchased: l, total: t, className: p, label: r }) {
-  return /* @__PURE__ */ n("span", { className: p, role: r ? "img" : void 0, "aria-label": r, "aria-hidden": r ? void 0 : "true", children: [
-    /* @__PURE__ */ a("span", { className: e.segmentGranted, "data-segment": "granted", style: { width: L(i, t) } }),
-    /* @__PURE__ */ a("span", { className: e.segmentPurchased, "data-segment": "purchased", style: { width: L(l, t) } })
+function O({ granted: s, purchased: i, total: n, tone: h, className: p, label: m }) {
+  return /* @__PURE__ */ t("span", { className: p, "data-tone": h, role: m ? "img" : void 0, "aria-label": m, "aria-hidden": m ? void 0 : "true", children: [
+    /* @__PURE__ */ a("span", { className: e.segmentGranted, "data-segment": "granted", style: { width: P(s, n) } }),
+    /* @__PURE__ */ a("span", { className: e.segmentPurchased, "data-segment": "purchased", style: { width: P(i, n) } })
   ] });
 }
-function I({ granted: i = 0, purchased: l = 0, grantCycle: t, burnedFraction: p, grantExpires: r, burnNote: v, unknown: m = !1, collapsed: u = !1, onTopUp: c, labels: g, locale: h = k }) {
-  const s = A(g), d = () => s.bar(o(i, h), o(l, h), o(i + l, h)), B = i + l, b = (t ?? i) + l, F = t !== void 0 && t > 0 ? (t - i) / t : 0, f = p ?? F, N = !m && f >= E;
-  if (u) {
-    const C = m ? void 0 : s.railFigure(w(B, h));
-    return /* @__PURE__ */ n("div", { className: e.rail, role: "group", "aria-label": C === void 0 ? s.railBalanceUnknown : s.railBalance(C), tabIndex: 0, children: [
-      /* @__PURE__ */ a(x, { className: e.railIcon }),
-      /* @__PURE__ */ a("span", { className: e.railFigure, children: C ?? "—" }),
-      m ? /* @__PURE__ */ a("span", { className: e.srOnly, children: s.railUnknown }) : /* @__PURE__ */ a(R, { granted: i, purchased: l, cycleTotal: b, tone: N ? "threshold" : "rest", label: d() })
+function Q({ granted: s = 0, purchased: i = 0, grantCycle: n, burnedFraction: h, grantExpires: p, burnNote: m, unknown: l = !1, collapsed: g = !1, onTopUp: c, labels: d, locale: u = $ }) {
+  const o = w(d), f = () => o.bar(v(s, u), v(i, u), v(s + i, u)), r = s + i, b = (n ?? s) + i, F = n !== void 0 && n > 0 ? (n - s) / n : 0, R = h ?? F, N = !l && R >= _;
+  if (g) {
+    const B = l ? void 0 : o.railFigure(D(r, u));
+    return /* @__PURE__ */ t("div", { className: e.rail, role: "group", "aria-label": B === void 0 ? o.railBalanceUnknown : o.railBalance(B), tabIndex: 0, children: [
+      /* @__PURE__ */ a(H, { className: e.railIcon }),
+      /* @__PURE__ */ a("span", { className: e.railFigure, children: B ?? "—" }),
+      l ? /* @__PURE__ */ a("span", { className: e.srOnly, children: o.railUnknown }) : /* @__PURE__ */ a(U, { granted: s, purchased: i, cycleTotal: b, tone: N ? "threshold" : "rest", label: f() })
     ] });
   }
-  return /* @__PURE__ */ n("div", { className: e.chip, role: "group", "aria-label": s.region, tabIndex: 0, "data-threshold": N ? "true" : void 0, "data-unknown": m ? "true" : void 0, children: [
-    /* @__PURE__ */ n("div", { className: e.header, children: [
-      /* @__PURE__ */ a("span", { className: e.name, children: s.name }),
-      N && /* @__PURE__ */ n("span", { className: e.pill, children: [
-        Math.round(f * 100),
+  return /* @__PURE__ */ t("div", { className: e.chip, role: "group", "aria-label": o.region, tabIndex: 0, "data-threshold": N ? "true" : void 0, "data-unknown": l ? "true" : void 0, children: [
+    /* @__PURE__ */ t("div", { className: e.header, children: [
+      /* @__PURE__ */ a("span", { className: e.name, children: o.name }),
+      N && /* @__PURE__ */ t("span", { className: e.pill, children: [
+        Math.round(R * 100),
         "%"
       ] })
     ] }),
-    m ? /* @__PURE__ */ n("div", { className: e.figure, children: [
+    l ? /* @__PURE__ */ t("div", { className: e.figure, children: [
       /* @__PURE__ */ a("span", { className: e.amount, "aria-hidden": "true", children: "—" }),
-      /* @__PURE__ */ a(O, { className: e.retry }),
-      /* @__PURE__ */ a("span", { className: e.srOnly, children: s.balanceUnknown })
-    ] }) : /* @__PURE__ */ n("div", { className: e.figure, children: [
-      /* @__PURE__ */ a("span", { className: e.amount, children: o(B, h) }),
-      /* @__PURE__ */ a("span", { className: e.unit, children: s.unit })
+      /* @__PURE__ */ a(V, { className: e.retry }),
+      /* @__PURE__ */ a("span", { className: e.srOnly, children: o.balanceUnknown })
+    ] }) : /* @__PURE__ */ t("div", { className: e.figure, children: [
+      /* @__PURE__ */ a("span", { className: e.amount, children: v(r, u) }),
+      /* @__PURE__ */ a("span", { className: e.unit, children: o.unit })
     ] }),
-    m ? /* @__PURE__ */ a("div", { className: e.bar, "data-tone": "unknown", "aria-hidden": "true" }) : /* @__PURE__ */ a(R, { granted: i, purchased: l, cycleTotal: b, tone: N ? "threshold" : "rest", label: d() }),
-    !m && !N && /* @__PURE__ */ n("div", { className: e.details, children: [
-      /* @__PURE__ */ n("dl", { className: e.split, children: [
-        /* @__PURE__ */ n("div", { className: e.splitRow, children: [
-          /* @__PURE__ */ n("dt", { className: e.splitLabel, children: [
+    l ? /* @__PURE__ */ a("div", { className: e.bar, "data-tone": "unknown", "aria-hidden": "true" }) : /* @__PURE__ */ a(U, { granted: s, purchased: i, cycleTotal: b, tone: N ? "threshold" : "rest", label: f() }),
+    !l && !N && /* @__PURE__ */ t("div", { className: e.details, children: [
+      /* @__PURE__ */ t("dl", { className: e.split, children: [
+        /* @__PURE__ */ t("div", { className: e.splitRow, children: [
+          /* @__PURE__ */ t("dt", { className: e.splitLabel, children: [
             /* @__PURE__ */ a("span", { className: e.dotGranted, "aria-hidden": "true" }),
-            s.granted
+            o.granted
           ] }),
-          /* @__PURE__ */ a("dd", { className: e.splitAmount, children: o(i, h) })
+          /* @__PURE__ */ a("dd", { className: e.splitAmount, children: v(s, u) })
         ] }),
-        /* @__PURE__ */ n("div", { className: e.splitRow, children: [
-          /* @__PURE__ */ n("dt", { className: e.splitLabel, children: [
+        /* @__PURE__ */ t("div", { className: e.splitRow, children: [
+          /* @__PURE__ */ t("dt", { className: e.splitLabel, children: [
             /* @__PURE__ */ a("span", { className: e.dotPurchased, "aria-hidden": "true" }),
-            s.purchased
+            o.purchased
           ] }),
-          /* @__PURE__ */ a("dd", { className: e.splitAmount, children: o(l, h) })
+          /* @__PURE__ */ a("dd", { className: e.splitAmount, children: v(i, u) })
         ] })
       ] }),
-      r && /* @__PURE__ */ a("p", { className: e.footer, children: s.grantExpiry(r) })
+      p && /* @__PURE__ */ a("p", { className: e.footer, children: o.grantExpiry(p) })
     ] }),
-    N && v && /* @__PURE__ */ a("p", { className: e.burnNote, children: v }),
-    !m && c !== void 0 && /* @__PURE__ */ a(
+    N && m && /* @__PURE__ */ a("p", { className: e.burnNote, children: m }),
+    !l && c !== void 0 && /* @__PURE__ */ a(
       "button",
       {
         type: "button",
@@ -152,12 +174,12 @@ function I({ granted: i = 0, purchased: l = 0, grantCycle: t, burnedFraction: p,
         "data-tone": N ? "accent" : void 0,
         "data-grown": N ? "true" : void 0,
         onClick: c,
-        children: s.topUp
+        children: o.topUp
       }
     )
   ] });
 }
 export {
-  J as WalletChip
+  oe as WalletChip
 };
 //# sourceMappingURL=WalletChip.js.map