@bitforgehq/ui 0.3.0

package/ai/components/tab-bar.md

@@ -0,0 +1,427 @@
+# bf-tab-bar
+
+Floating pill tab bar for mobile apps with arrow-key selection and count badges
+
+`BfTabBarComponent` from `@bitforgehq/ui` · Navigation · since 0.1.0
+
+## Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { BfTabBarComponent, BfTabComponent } from '@bitforgehq/ui';
+import { BfIconComponent } from '@bitforgehq/ui/icons';
+import { Folder, Inbox, Sun, User } from 'lucide';
+
+/**
+ * The bf-tab-bar overview.
+ *
+ * Live demo of `bf-tab-bar`: four destinations with a badge on Projects.
+ */
+@Component({
+  selector: 'app-example-tab-bar-overview',
+  imports: [BfTabBarComponent, BfTabComponent, BfIconComponent],
+  template: `
+    <bf-tab-bar [(active)]="active" [floating]="false">
+      <bf-tab id="today" label="Today"><bf-icon [icon]="sun" /></bf-tab>
+      <bf-tab id="projects" label="Projects" [badge]="3"><bf-icon [icon]="folder" /></bf-tab>
+      <bf-tab id="inbox" label="Inbox"><bf-icon [icon]="inbox" /></bf-tab>
+      <bf-tab id="me" label="Me"><bf-icon [icon]="user" /></bf-tab>
+    </bf-tab-bar>
+    <p data-status aria-live="polite" class="text-caption text-text-muted mt-3">{{ status() }}</p>
+  `,
+})
+export class TabBarOverviewExampleComponent {
+  readonly active = signal('today');
+  readonly sun = Sun;
+  readonly folder = Folder;
+  readonly inbox = Inbox;
+  readonly user = User;
+
+  readonly status = computed(() => `Active tab: ${this.active()}`);
+}
+```
+
+## Overview
+
+Floating pill tab bar for mobile apps (Meadow Sage): at least 64 px tall (it grows with a label
+wrapped to two lines at large text sizes; at least 48 px, with icon and label side by side, at
+compact heights such as phone landscape), inset 14 px from the sides and
+8 px above the bottom safe area (at least 12 px, so 20 px from the edge without an inset), one
+`bf-tab` per destination. On its own it is a pure control with an `active` model and a `hidden`
+input: a `tablist` whose selection follows focus with the arrow keys. Inside `bf-tabs`, which
+provides `BF_TAB_LINKS` and `BF_TAB_BAR_CONTROLLER`, it is a `nav` of links with `aria-current`
+on the active tab (`page` on its root page, `true` on a child page of it) whose selection and
+hiding derive from the router and the keyboard; `active` is not written there.
+
+The floating pill tab bar (Meadow Sage) for a mobile app's three-to-five top-level destinations —
+Today, Projects, Inbox, Me. It is a mobile pattern only: use it for the phone shell, not a desktop
+web layout. `bf-tab-bar` is the container; each destination inside it is a
+[`bf-tab`](https://bitforge-ui.web.app/components/tab), icon in the default slot with a `label`
+underneath.
+
+## When to use
+
+Use `bf-tab-bar` for the three to five top-level destinations of a phone app, at the bottom of the screen; inside [bf-tabs](https://bitforge-ui.web.app/components/tabs) it switches routes. Use [bf-segmented](https://bitforge-ui.web.app/components/segmented) instead to switch a view in place, and a sidebar or a top `nav` of links for a desktop web layout.
+
+## Basic usage
+
+```ts
+import { Component, signal } from '@angular/core';
+import { BfTabBarComponent, BfTabComponent } from '@bitforgehq/ui';
+import { BfIconComponent } from '@bitforgehq/ui/icons';
+import { Folder, Inbox, Sun, User } from 'lucide';
+
+/**
+ * The floating tab bar of a phone app.
+ *
+ * Four destinations; `active` is two-way bound and `changed` reports each switch. The bar is
+ * fixed above the bottom safe area, so the docs show its code only (the inline bar is live below).
+ *
+ * @preview none
+ */
+@Component({
+  selector: 'app-example-tab-bar-basic',
+  imports: [BfTabBarComponent, BfTabComponent, BfIconComponent],
+  template: `
+    <bf-tab-bar [(active)]="tab" (changed)="go($event)">
+      <bf-tab id="today" label="Today"><bf-icon [icon]="sun" /></bf-tab>
+      <bf-tab id="projects" label="Projects"><bf-icon [icon]="folder" /></bf-tab>
+      <bf-tab id="inbox" label="Inbox"><bf-icon [icon]="inbox" /></bf-tab>
+      <bf-tab id="me" label="Me"><bf-icon [icon]="user" /></bf-tab>
+    </bf-tab-bar>
+  `,
+})
+export class TabBarBasicExampleComponent {
+  protected readonly sun = Sun;
+  protected readonly folder = Folder;
+  protected readonly inbox = Inbox;
+  protected readonly user = User;
+  protected readonly tab = signal('today');
+  readonly visited = signal<string[]>([]);
+
+  protected go(id: string): void {
+    this.visited.update((ids) => [...ids, id]);
+  }
+}
+```
+
+## Tabs
+
+Each destination is a `bf-tab`: an icon in its default slot, a `label` under it, an `id` as the selection key, and optionally a `badge` or `disabled`. Tabs have [their own page](https://bitforge-ui.web.app/components/tab), with badges and disabled tabs.
+
+## Inline in a layout
+
+`floating=false` drops the fixed positioning and floating shadow so the bar sits inline, e.g. in a
+docs demo or a layout that already reserves the space itself.
+
+```ts
+import { Component, signal } from '@angular/core';
+import { BfTabBarComponent, BfTabComponent } from '@bitforgehq/ui';
+import { BfIconComponent } from '@bitforgehq/ui/icons';
+import { Home, Search } from 'lucide';
+
+/**
+ * A tab bar placed inline in the layout instead of floating.
+ *
+ * A page with more than one tab bar names each (`label`), so their landmarks stay apart.
+ */
+@Component({
+  selector: 'app-example-tab-bar-inline',
+  imports: [BfTabBarComponent, BfTabComponent, BfIconComponent],
+  template: `
+    <bf-tab-bar label="Sections" [(active)]="tab" [floating]="false">
+      <bf-tab id="home" label="Home"><bf-icon [icon]="home" /></bf-tab>
+      <bf-tab id="search" label="Search"><bf-icon [icon]="search" /></bf-tab>
+    </bf-tab-bar>
+  `,
+})
+export class TabBarInlineExampleComponent {
+  protected readonly home = Home;
+  protected readonly search = Search;
+  protected readonly tab = signal('home');
+}
+```
+
+## Hiding
+
+`hidden` slides the bar down out of view (`translate-y` plus `opacity-0`, no pointer events) and
+makes it `aria-hidden` and `inert`; `hideTransition` (default `true`) animates that over 200 ms,
+`false` switches instantly. `setHidden(hidden, transition?)` is the imperative counterpart for a
+parent that projects the bar and so cannot bind the input. The bar is hidden while either is true,
+or while the `hidden()` of a `BF_TAB_BAR_CONTROLLER` is (below).
+
+Both inputs take boolean attributes, so a static `<bf-tab-bar hidden hideTransition="false">` works
+too. `hidden` deliberately shadows the global HTML attribute: on `bf-tab-bar` it is this input, and
+the attribute itself is removed from the host, so the bar slides out instead of becoming
+`display: none`.
+
+```ts
+import { Component, signal } from '@angular/core';
+import { BfButtonComponent, BfTabBarComponent, BfTabComponent } from '@bitforgehq/ui';
+import { BfIconComponent } from '@bitforgehq/ui/icons';
+import { Newspaper, User } from 'lucide';
+
+/**
+ * A tab bar that slides out of view.
+ *
+ * `hidden` stands in for "the keyboard is open" here; the hidden bar is `inert` and
+ * `aria-hidden`.
+ */
+@Component({
+  selector: 'app-example-tab-bar-hiding',
+  imports: [BfButtonComponent, BfTabBarComponent, BfTabComponent, BfIconComponent],
+  template: `
+    <div class="flex flex-col items-center gap-4 overflow-hidden pb-2">
+      <bf-button variant="outline" size="sm" (clicked)="keyboardOpen.set(!keyboardOpen())">
+        {{ keyboardOpen() ? 'Close the keyboard' : 'Open the keyboard' }}
+      </bf-button>
+      <bf-tab-bar label="Feed" [(active)]="tab" [floating]="false" [hidden]="keyboardOpen()">
+        <bf-tab id="feed" label="Feed"><bf-icon [icon]="newspaper" /></bf-tab>
+        <bf-tab id="profile" label="Profile"><bf-icon [icon]="user" /></bf-tab>
+      </bf-tab-bar>
+    </div>
+  `,
+})
+export class TabBarHidingExampleComponent {
+  protected readonly newspaper = Newspaper;
+  protected readonly user = User;
+  protected readonly tab = signal('feed');
+  protected readonly keyboardOpen = signal(false);
+}
+```
+
+## Re-selecting a tab
+
+Clicking the tab that is already active emits `reselected` with its id instead of `changed`,
+e.g. to scroll the tab's page back to the top. The 0.2 names `tabChange` and `tabReselect` still
+emit alongside them until 0.4.0.
+
+## Driven by a parent
+
+A parent that projects the bar and drives it provides `BF_TAB_BAR_CONTROLLER`, a
+[BfTabBarController](https://bitforge-ui.web.app/api/bf-tab-bar-controller) (`bf-tabs` does): the bar then shows the
+controller's `current()` as its selection (none while it is `null`), hides while its `hidden()` is
+true with the transition `hideTransition()` gives, and hands a user selection to its `select(id)`
+or `reselect(id)` while still emitting `changed` or `reselected`. It never writes `active` then, so
+nothing has to put the bar back after a navigation a guard refuses: the controller's `current()`
+drops back by itself. Only a bar declared directly inside the provider's template is driven.
+
+## Desktop
+
+`bf-tab-bar` is a phone pattern. On a desktop web layout, put the top-level destinations in a sidebar or a top `nav` of links, and switch views in place with a [bf-segmented](https://bitforge-ui.web.app/components/segmented). Under a mouse (a tablet with a trackpad, the docs preview) an inactive tab takes a `surface-muted` fill and the active capsule `primary-soft-hover` on hover, with the pointer cursor, and the focus ring shows on keyboard focus only.
+
+## Theming
+
+- Bar: `surface` background, `shadow-floating` when floating (`shadow-raised` inline); it floats
+  8 px above the bottom safe area, with a 12 px floor where there is none:
+  `bottom: calc(max(var(--spacing-safe-bottom), 12px) + 8px)` (42 px on an iPhone with a home
+  indicator, 32 px with Android gesture navigation, 20 px without an inset), 14 px from the sides.
+  Hidden, it slides down by its own height plus 64 px, clear of the screen edge and its shadow.
+- Height: at least 64 px (`min-h-[64px]`, in px, so iOS Dynamic Type, which scales the root and
+  every rem, does not grow the bar itself, as UITabBar does not). It grows instead of clipping
+  when a label wraps to two lines at a large text size (the label is capped at 22 px), so it tops
+  out near 98 px. At compact heights (`(max-height: 500px)`, phone landscape) it is at least
+  48 px (`min-h-[48px]`) with each
+  tab's icon and label side by side; the bottom offset stays. `bf-tabs` measures the bar, so the
+  page's bottom inset follows either way.
+- Shape: `rounded-control` (`--radius-control`, `9999px` by default).
+- The tabs' capsule, badge and disabled tokens are on the [`bf-tab` page](https://bitforge-ui.web.app/components/tab#theming).
+
+## Accessibility
+
+The bar is a `<nav>` named by `label`, else `provideBfLabels()`'s `tabBar` (`"Main"`). What it
+holds depends on where it is used.
+
+**Standalone (in-page selection): a tablist.** The `nav` contains a `role="tablist"`; each `bf-tab`
+is a native `<button role="tab">` with `aria-selected` mirroring selection, following the
+[WAI-ARIA APG tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) with automatic
+activation. One tab sits in the tab order (roving `tabindex`): the active tab when it is enabled,
+otherwise the first enabled tab — so the bar is never removed from the tab order, even with an
+empty `active`, before a binding resolves, or when the active tab is disabled. ArrowLeft/ArrowRight
+move the selection and focus together between enabled tabs, wrapping at the ends, and Home/End jump
+to the first/last enabled tab. `disabled` tabs are native-disabled, skipped by keyboard navigation
+and cannot be clicked.
+
+**Inside `bf-tabs` (router-bound): a `nav` of links.** `bf-tabs` provides `BF_TAB_LINKS`, and the bar
+switches pages rather than in-page panels, so it follows the
+[APG link pattern](https://www.w3.org/WAI/ARIA/apg/patterns/link/) instead of the tabs pattern
+(there are no tab panels to control): the `nav` holds a plain group (no role) of `<a href>` links,
+one per tab, each pointing at the tab's root URL, and the active one carries `aria-current`
+(`page` on the tab's root page, `true` on a child page of it). There is no `tablist`, `tab` role,
+`aria-selected` or roving tab stop: Tab and Shift+Tab move between the tabs like any links, Enter
+follows one, arrow keys do nothing, and Ctrl/Cmd-click or a middle click opens the tab's URL in a
+new browser tab. A plain click is routed through the bar, so `bf-tabs` still restores the tab's
+last page and pops to its root on reselect. A `disabled` tab is `<a role="link"
+aria-disabled="true">` without an `href`, so it is skipped by Tab and inert. In Safari and iOS
+WKWebView (the Capacitor iOS app) Tab reaches links only when the user turns on "Press Tab to
+highlight each item" (Option+Tab otherwise); VoiceOver and Full Keyboard Access are unaffected (see
+`bf-tabs`). Only a bar placed directly inside `<bf-tabs>` in the same template becomes links; a bar
+inside a routed page under `bf-tabs` stays a standalone `tablist`.
+
+In both forms `bf-tab`'s `id` is a selection key, not a host DOM id: the host suppresses its own
+`id` attribute, so the id lands once, on the inner `<button>` or `<a>`. While `hidden`, the `nav` is
+`aria-hidden="true"` and `inert`, so a hidden bar can be neither focused nor read. The active
+capsule stays visible under `forced-colors` (`Highlight`/`HighlightText`). The `badge` count/text is
+`aria-hidden`; a badged tab is named by `aria-label` = its label, a comma and the announcement —
+`provideBfLabels()`'s `tabBadge(n)` (`"{n} new"`) for a numeric badge, the string as-is for a text
+badge — so the name carries meaning ("Inbox, 3 new", one string, with no pause before the comma)
+instead of the bare number, and still starts with the visible label. Without a badge the visible
+label is the name.
+
+### Keyboard
+
+| Key                                              | Where            | Action                                                                                                                                   |
+| ------------------------------------------------ | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| <kbd>Tab</kbd>                                   | Standalone       | Moves focus into the bar, to the active tab (else the first enabled one), and out again                                                  |
+| <kbd>ArrowRight</kbd> / <kbd>ArrowLeft</kbd>     | Standalone       | Selects and focuses the next / previous enabled tab in DOM order, wrapping at the ends; not mirrored under `dir="rtl"` yet (a known gap) |
+| <kbd>Home</kbd> / <kbd>End</kbd>                 | Standalone       | Selects and focuses the first / last enabled tab                                                                                         |
+| <kbd>Enter</kbd> / <kbd>Space</kbd>              | Standalone       | On the active tab: emits `reselected`                                                                                                    |
+| <kbd>Tab</kbd> / <kbd>Shift</kbd>+<kbd>Tab</kbd> | Inside `bf-tabs` | Moves between the tab links; a disabled tab is skipped                                                                                   |
+| <kbd>Enter</kbd>                                 | Inside `bf-tabs` | Follows the tab's link; the arrow keys do nothing                                                                                        |
+
+## Inputs
+
+| Name             | Type      | Default | Description                                                                                                                                                                                                                                                                                                        |
+| ---------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `label`          | `string`  | `''`    | Accessible name of the navigation; empty falls back to `provideBfLabels()`'s `tabBar` ("Main").                                                                                                                                                                                                                    |
+| `floating`       | `boolean` | `true`  | Floats fixed above the safe area with a shadow; false renders it inline in the layout flow.                                                                                                                                                                                                                        |
+| `hidden`         | `boolean` | `false` | Slides the bar down out of view (e.g. while the soft keyboard is open); `aria-hidden` and inert while hidden. Shadows the global `hidden` attribute on purpose: a static `<bf-tab-bar hidden>` sets this input (the slide) and the attribute itself is removed from the host, so it never becomes `display: none`. |
+| `hideTransition` | `boolean` | `true`  | Animates hiding and showing (200 ms `translate-y`/`opacity`); false switches instantly.                                                                                                                                                                                                                            |
+| `active`         | `string`  | `''`    | The active tab's id; two-way bindable. Two-way: `[(active)]`.                                                                                                                                                                                                                                                      |
+
+## Outputs
+
+| Name          | Payload  | Description                                                                                                                                 |
+| ------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| `changed`     | `string` | Emitted with the newly selected tab's id after a user change.                                                                               |
+| `reselected`  | `string` | Emitted with the active tab's id when the user selects the tab that is already active.                                                      |
+| `tabChange`   | `string` | Emitted with the newly selected tab's id after a user change, together with `changed`. **Deprecated** (0.3.0 use changed; removed in 0.4.0) |
+| `tabReselect` | `string` | Emitted with the active tab's id on a reselect, together with `reselected`. **Deprecated** (0.3.0 use reselected; removed in 0.4.0)         |
+
+## Slots
+
+- `default`: The tabs, each a `bf-tab`.
+
+## Methods
+
+### `setHidden(hidden: boolean, transition?: boolean): void`
+
+The imperative counterpart of the `hidden` input, for a parent that projects the bar and so
+cannot bind it (`bf-tabs` provides `BF_TAB_BAR_CONTROLLER` instead). The bar is hidden while
+the input, this or the controller's `hidden()` is true; `transition` overrides
+`hideTransition` when given.
+
+| Parameter     | Type      | Description                                              |
+| ------------- | --------- | -------------------------------------------------------- |
+| `hidden`      | `boolean` | Whether to hide the bar.                                 |
+| `transition?` | `boolean` | Whether the change animates (default: `hideTransition`). |
+
+### `select(id: string): void`
+
+Selects `id` and emits `changed`, or `reselected` when `id` is already selected; ignores
+disabled or unknown tab ids. Inside `bf-tabs` it hands the selection to the controller
+(`select`/`reselect`) instead of writing `active`.
+
+| Parameter | Type     | Description                    |
+| --------- | -------- | ------------------------------ |
+| `id`      | `string` | The `id` of the tab to select. |
+
+### `linkHref(id: string): string | null`
+
+The URL of tab `id` in link mode (`BF_TAB_LINKS`); `null` for a standalone bar.
+
+| Parameter | Type     | Description          |
+| --------- | -------- | -------------------- |
+| `id`      | `string` | The `id` of the tab. |
+
+### `linkIsRoot(id: string): boolean`
+
+Whether the current page is tab `id`'s root page (link mode); `true` for a standalone bar.
+
+| Parameter | Type     | Description          |
+| --------- | -------- | -------------------- |
+| `id`      | `string` | The `id` of the tab. |
+
+## Notes
+
+### Do
+
+- Keep it to three to five destinations; give each a short, one-word label ("Benachrichtigungen" wraps in a quarter-width tab).
+- Bind `active` to the current route so the bar always reflects where the user is.
+
+### Don't
+
+- Don't put more than five tabs in the bar; move overflow destinations into a "More" screen.
+- Don't use `bf-tab-bar` on desktop web; it's a mobile shell pattern.
+- Don't query `role="tab"` for the bar inside `bf-tabs` in tests or scripts; its tabs are links
+  (`getByRole('link', { name: 'Projects' })`).
+
+## Migration notes
+
+### 0.3.0
+
+**Deprecated:** `tabChange` → `changed` and `tabReselect` → `reselected`. The new outputs emit the
+tab id at the same moments; the old names still emit the same id right after them until 0.4.0 (see
+Migration 23). `bf-tabs` listens to the new names.
+
+**Breaking:** (ARIA contract) with the new `BF_TAB_LINKS` token provided by a router-aware parent
+(`bf-tabs`) in the same template, the bar renders a `nav` holding a plain group of links instead
+of a `tablist`: no roving tab stop and no arrow-key, Home or End handling. The token is looked up
+with `host: true`, so a bar inside a routed page under `bf-tabs` stays a standalone `tablist`.
+`BfTabBarHost` gains `linkMode`, `linkHref(id)` and `linkIsRoot(id)`. See Migration 11 and 14.
+
+**Behaviour:** `label` defaults to `''` and falls back to `provideBfLabels()`'s `tabBar` ("Main");
+the rendered English default is unchanged.
+
+**Behaviour:** shaped with the new `rounded-control` (`--radius-control`, `9999px` by default, so it renders as before); override the token to move off the pill.
+
+JSDoc of `tab-bar.component.ts` for the API reference: `@slot` docs for `default`; `@param` docs;
+template handlers and framework hooks marked `@internal`, so the reference leaves them out. No
+behaviour change.
+
+JSDoc of `tab-bar.token.ts` for the API reference: `@summary`/`@since` on the exported symbols;
+`@param` docs. No behaviour change.
+
+**Behaviour:** new `BF_TAB_BAR_CONTROLLER` token and `BfTabBarController` interface (additive,
+extends `BfTabLinks`): a parent that projects the bar and drives it provides `current()`,
+`hidden()`, `hideTransition()`, `select(id)` and `reselect(id)`. With a controller (looked up with
+`host: true`, like `BF_TAB_LINKS`) the bar shows `current()` as its selection (`''` while it is
+`null`), hides while `hidden()` is true with the transition `hideTransition()` gives, and hands a
+user selection to `select(id)`/`reselect(id)`, still emitting `changed` or `reselected` (and the
+deprecated `tabChange`/`tabReselect` right after them); it never writes `active` then. New
+`selected` on the bar: the id shown as selected, `active` without a controller; `BfTabBarHost`
+gains it as an optional member (`bf-tab` falls back to `active`), so a custom `BF_TAB_BAR`
+provider keeps working. Inside `bf-tabs` `activeChange` no longer emits. Without a controller
+nothing changes; `setHidden()` stays for other parents. See Migration 24.
+
+**Behaviour:** large text and compact heights (F-051, F-054): the tabs' row has a minimum height
+in px (`min-h-[64px]`, was the rem `h-16`) and grows with a label wrapped to two lines, which
+Android's font scale (a text zoom that does not scale the bar) needs at 2.0. Being px, the bar no
+longer grows with iOS Dynamic Type itself, as UITabBar does not: at AX5 it was 154.7 px (the rem
+`h-16` at a 235 % root) and is now 98 px (a capsule and two capped label lines). At compact
+heights (`(max-height: 500px)`, phone landscape) it is at least 48 px (`min-h-[48px]`). The bottom
+offset stays.
+
+### 0.2.0
+
+New inputs `hidden` (default `false`) and `hideTransition` (default `true`), both with
+`booleanAttribute` (`hidden` intentionally shadows the global attribute, which is removed from the
+host so a static `<bf-tab-bar hidden>` slides out instead of becoming `display: none`): a hidden bar gets
+`translate-y-[calc(100%+40px)] opacity-0 pointer-events-none` and `aria-hidden="true"` plus
+`inert` on its `nav`, with `transition-[translate,opacity] duration-200` only while
+`hideTransition` (and never under `prefers-reduced-motion`: `motion-reduce:transition-none`). The
+floating bar sits on `z-(--bf-z-tabbar)`, `bottom-[calc(var(--spacing)*6+var(--spacing-safe-bottom))]`. New method `setHidden(hidden, transition?)`, the imperative counterpart for a
+parent that projects the bar (`bf-tabs`); the bar is hidden while the input or it is true, and
+`isHidden` exposes the result. New output `tabReselect`, emitted with the id when the already
+active tab is clicked (`tabChange` still fires only on a change; arrow keys never reselect).
+
+Changed: the floating bar sits 8 px above the bottom safe area, with a 12 px floor where there is
+none, like other apps' floating bars: `bottom-[calc(max(var(--spacing-safe-bottom),12px)+8px)]`
+(42 px from the screen edge on an iPhone, 32 px with Android gesture navigation, 20 px without an
+inset), replacing `bottom-[calc(var(--spacing)*6+var(--spacing-safe-bottom))]` (58 px on an
+iPhone). Hidden, it slides down by `translate-y-[calc(100%+64px)]` (was `100% + 40px`), so it still
+leaves the screen with its shadow.
+
+### 0.1.0
+
+New `bf-tab-bar`: the Meadow Sage floating pill tab bar for mobile navigation, 64 px tall, holding a `role="tablist"` of `bf-tab` children. `active` (model) tracks the selected tab id; `label` (default `Main`) names the tablist; `floating` (default `true`) fixes the bar above the safe area with `shadow-floating`, or renders it inline with `shadow-raised` when false. ArrowLeft/ArrowRight/Home/End navigation moves both selection and focus together across the enabled tabs, wrapping at the ends and skipping disabled ones; selecting a tab emits `tabChange`. The bar and `bf-tab` communicate through the `BF_TAB_BAR` injection token so neither file imports the other. Added a `tabStop` computed, exposed through `BF_TAB_BAR`: the roving tab stop now falls back to the first enabled tab when `active` matches no enabled tab (empty, unresolved, or the active tab is disabled), instead of leaving every tab at `tabIndex -1` and removing the bar from the tab order.