@beehexa/design-rules 0.0.0-stage → 2611.3.3

package/dist/docs/src/components/ShapeDemo.astro

@@ -0,0 +1,239 @@
+---
+// Illustrations for the Radius and Border pages. Every corner and line uses its token
+// (tokens/radius.json, tokens/border.json), so each figure shows the real value.
+import '../styles/layout.css';
+import '../styles/shapes.css';
+import { tokensByPrefix } from '../lib/tokens';
+import { tokenDescriptionsVi } from '../lib/token-descriptions-vi';
+import { langOf } from '../lib/i18n';
+import Pin from './ShapePin.astro';
+
+interface Props {
+  kind: 'radius-scale' | 'radius-use' | 'nesting' | 'focus-radius' | 'border-scale' | 'border-use' | 'dodont';
+  /** radius-use: '0' | '050' | '100' | '150' | '200' | 'full'. border-use: 'default' | 'selected' | 'focused' | 'accent'. dodont: see below. */
+  item?: string;
+}
+const { kind, item } = Astro.props;
+const vi = langOf(Astro.url.pathname) === 'vi';
+const L = (en: string, viText: string) => (vi ? viText : en);
+
+const toPx = (value: string) => (value.endsWith('rem') ? parseFloat(value) * 16 : parseFloat(value) || 0);
+const use = (t: { name: string; description: string }) => (vi ? tokenDescriptionsVi[t.name] ?? t.description : t.description).replace(/^\d+( px)?\. /, '');
+const radii = tokensByPrefix('radius').map((t) => ({ ...t, px: toPx(t.resolved), use: use(t) })).sort((a, b) => a.px - b.px);
+const widths = tokensByPrefix('border.width').map((t) => ({ ...t, px: toPx(t.resolved), use: use(t) })).sort((a, b) => a.px - b.px);
+
+const tick = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7"/></svg>';
+---
+
+{kind === 'radius-scale' && (
+  <ul class="sh-scale sh-root" aria-label={L('Radius scale', 'Thang bo góc')}>
+    {radii.map((t) => (
+      <li>
+        <span class="sh-name"><code>{t.name}</code><small>{t.cssVar}</small></span>
+        <span class="sh-px">{t.px >= 999 ? L('Pill', 'Viên thuốc') : `${t.px} px`}</span>
+        <span class="sh-prev" aria-hidden="true"><span class="sh-swatch" style={`border-radius: var(${t.cssVar})`}></span></span>
+        <span class="sh-use">{t.use}</span>
+      </li>
+    ))}
+  </ul>
+)}
+
+{kind === 'border-scale' && (
+  <ul class="sh-scale sh-root" aria-label={L('Border widths', 'Độ dày viền')}>
+    {widths.map((t) => (
+      <li>
+        <span class="sh-name"><code>{t.name}</code><small>{t.cssVar}</small></span>
+        <span class="sh-px">{t.px} px</span>
+        <span class="sh-prev" aria-hidden="true">
+          {t.name === 'border.width.accent'
+            ? <span class="sh-line sh-accent-prev"></span>
+            : t.name === 'border.width.focused'
+              ? <span class="sh-line sh-ring" style="border-width: var(--bh-border-width-default); border-color: var(--bh-color-border-bold)"></span>
+              : <span class="sh-line" style={`border-width: var(${t.cssVar})`}></span>}
+        </span>
+        <span class="sh-use">{t.use}</span>
+      </li>
+    ))}
+  </ul>
+)}
+
+{kind === 'radius-use' && (
+  <div class:list={['sh-ex-grid', 'sh-root', { 'is-one': item === '0' || item === '200' }]}>
+    {item === '0' && (
+      <div class="sh-ex">
+        <Pin label="radius.0" r="0px">
+          <div class="sh-frame" role="img" aria-label={L('A full-width table with square corners', 'Bảng tràn hết chiều ngang, góc vuông')}>
+            <header>{L('Sync logs', 'Nhật ký đồng bộ')}</header>
+            <div class="sh-table">
+              <span><em>10:42:07</em>{L('Order #10293 to ERP', 'Đơn #10293 sang ERP')}<em>{L('Synced', 'Đã đồng bộ')}</em></span>
+              <span><em>10:42:11</em>{L('Order #10295 to ERP', 'Đơn #10295 sang ERP')}<em>{L('Synced', 'Đã đồng bộ')}</em></span>
+            </div>
+          </div>
+        </Pin>
+      </div>
+    )}
+    {item === '050' && (
+      <Fragment>
+        <div class="sh-ex"><Pin label="radius.050" r="var(--bh-radius-050)"><span class="sh-tag">{L('Online store', 'Cửa hàng online')}</span></Pin></div>
+        <div class="sh-ex"><Pin label="radius.050" r="var(--bh-radius-050)"><span class="sh-badge">3</span></Pin></div>
+        <div class="sh-ex"><span class="sh-row"><Pin label="radius.050" r="var(--bh-radius-050)"><span class="sh-check" set:html={tick}></span></Pin><span>{L('Sync stock', 'Đồng bộ tồn kho')}</span></span></div>
+        <div class="sh-ex"><span class="sh-menu"><span>{L('Edit mapping', 'Sửa mapping')}</span><Pin label="radius.050" r="var(--bh-radius-050)" len="600"><span class="is-on" style="flex: 1">{L('Run sync now', 'Đồng bộ ngay')}</span></Pin><span>{L('Pause', 'Tạm dừng')}</span></span></div>
+      </Fragment>
+    )}
+    {item === '100' && (
+      <Fragment>
+        <div class="sh-ex"><Pin label="radius.100" r="var(--bh-radius-100)"><span class="sp-btn is-primary">{L('Connect', 'Kết nối')}</span></Pin></div>
+        <div class="sh-ex"><Pin label="radius.100" r="var(--bh-radius-100)"><span class="sp-input" style="width: 14rem"><span style="width: var(--bh-space-150)"></span><span>mystore.example.com</span></span></Pin></div>
+        <div class="sh-ex"><Pin label="radius.100" r="var(--bh-radius-100)"><span class="sh-tip">{L('Copied to clipboard', 'Đã sao chép')}</span></Pin></div>
+        <div class="sh-ex"><Pin label="radius.100" r="var(--bh-radius-100)"><span class="sh-alert"><b>{L('Sync failed for 12 orders', 'Đồng bộ lỗi 12 đơn hàng')}</b><span>{L('Retrying in 5 minutes.', 'Thử lại sau 5 phút.')}</span></span></Pin></div>
+      </Fragment>
+    )}
+    {item === '150' && (
+      <Fragment>
+        <div class="sh-ex"><Pin label="radius.150" r="var(--bh-radius-150)"><span class="sh-card"><b>{L('Online store', 'Cửa hàng online')}</b><span>{L('Connected · last sync 2 minutes ago', 'Đã kết nối · đồng bộ lần cuối 2 phút trước')}</span></span></Pin></div>
+        <div class="sh-ex"><Pin label="radius.150" r="var(--bh-radius-150)"><span class="sh-group"><span class="is-on">{L('Orders', 'Đơn hàng')}</span><span>{L('Products', 'Sản phẩm')}</span></span></Pin></div>
+      </Fragment>
+    )}
+    {item === '200' && (
+      <div class="sh-ex">
+        <Pin label="radius.200" r="var(--bh-radius-200)">
+          <span class="sh-dialog" role="img" aria-label={L('A dialog with 16 px corners', 'Dialog bo góc 16 px')}>
+            <b>{L('Disconnect the online store?', 'Ngắt kết nối cửa hàng online?')}</b>
+            <p>{L('Orders stop syncing until you connect again.', 'Đơn hàng sẽ ngừng đồng bộ cho đến khi bạn kết nối lại.')}</p>
+            <span class="sh-row"><span class="sp-btn">{L('Cancel', 'Huỷ')}</span><span class="sp-btn is-primary">{L('Disconnect', 'Ngắt kết nối')}</span></span>
+          </span>
+        </Pin>
+      </div>
+    )}
+    {item === 'full' && (
+      <Fragment>
+        <div class="sh-ex"><Pin label="radius.full" r="calc(var(--bh-space-600) / 2)"><span class="sh-avatar">TN</span></Pin></div>
+        <div class="sh-ex"><Pin label="radius.full" r="calc(var(--bh-size-control-small) / 2)"><span class="sh-switch" role="img" aria-label={L('Switch, on', 'Switch, đang bật')}></span></Pin></div>
+        <div class="sh-ex"><Pin label="radius.full" r="calc(var(--bh-size-control-default) / 2)"><span class="sh-chip">{L('Online store', 'Cửa hàng online')}<span aria-hidden="true">×</span></span></Pin></div>
+        <div class="sh-ex"><Pin label="radius.full" r="calc(var(--bh-size-control-small) / 2)"><span class="sh-tag is-pill">{L('Connected', 'Đã kết nối')}</span></Pin></div>
+      </Fragment>
+    )}
+  </div>
+)}
+
+{kind === 'nesting' && (
+  <div class="sh-nest-grid sh-root">
+    <figure class="sh-nest">
+      <div class="sh-outer" style="border-radius: var(--bh-radius-150); padding: var(--bh-space-050)"><span class="sh-inner" style="border-radius: var(--bh-radius-100)">{L('Image', 'Ảnh')}</span></div>
+      <span class="sh-sum">12 − 4 = 8</span>
+      <figcaption>{L('Card, image 4 px from the edge', 'Card, ảnh cách mép 4 px')}</figcaption>
+    </figure>
+    <figure class="sh-nest">
+      <div class="sh-outer" style="border-radius: var(--bh-radius-200); padding: var(--bh-space-100)"><span class="sh-inner" style="border-radius: var(--bh-radius-100)">{L('Button', 'Nút')}</span></div>
+      <span class="sh-sum">16 − 8 = 8</span>
+      <figcaption>{L('Group of controls, 8 px padding', 'Nhóm control, padding 8 px')}</figcaption>
+    </figure>
+    <figure class="sh-nest">
+      <div class="sh-outer" style="border-radius: var(--bh-radius-100); padding: var(--bh-space-050)"><span class="sh-inner" style="border-radius: var(--bh-radius-050)">{L('Menu item', 'Mục menu')}</span></div>
+      <span class="sh-sum">8 − 4 = 4</span>
+      <figcaption>{L('Menu, items 4 px from the edge', 'Menu, mục cách mép 4 px')}</figcaption>
+    </figure>
+    <figure class="sh-nest">
+      <div class="sh-outer" style="border-radius: var(--bh-radius-100); padding: var(--bh-space-075)"><span class="sh-inner" style="border-radius: var(--bh-radius-025); min-height: var(--bh-space-250)">{L('Chip', 'Chip')}</span></div>
+      <span class="sh-sum">8 − 6 = 2</span>
+      <figcaption>{L('Input, chip 6 px from the edge', 'Ô nhập, chip cách mép 6 px')}</figcaption>
+    </figure>
+    <figure class="sh-nest">
+      <div class="sh-outer" style="border-radius: var(--bh-radius-150); padding: var(--bh-space-300)"><span class="sh-inner" style="border-radius: var(--bh-radius-100); min-height: var(--bh-size-control-default)">{L('Button', 'Nút')}</span></div>
+      <span class="sh-sum">24 &gt; 12</span>
+      <figcaption>{L('Padding larger than the radius: the button keeps its own 8 px', 'Padding lớn hơn radius: nút giữ 8 px của nó')}</figcaption>
+    </figure>
+  </div>
+)}
+
+{kind === 'focus-radius' && (
+  <figure class="sh-fig sh-root">
+    <div class="sh-stage">
+      <span class="sh-col"><span class="sp-btn is-primary sh-ring">{L('Connect', 'Kết nối')}</span><span class="sh-label">{L('Outside: ring radius 8 + 2 = 10', 'Ra ngoài: radius của ring 8 + 2 = 10')}</span></span>
+      <span class="sh-col"><span class="sh-menu"><span>{L('Edit mapping', 'Sửa mapping')}</span><span class="is-focus">{L('Run sync now', 'Đồng bộ ngay')}</span><span>{L('Pause', 'Tạm dừng')}</span></span><span class="sh-label">{L('Inside a clipping box: offset −2', 'Trong khung bị cắt: offset −2')}</span></span>
+    </div>
+    <figcaption><span>{L('The browser draws the ring around the corner, so it needs no radius token of its own.', 'Trình duyệt tự vẽ ring theo góc, nên ring không cần token radius riêng.')}</span></figcaption>
+  </figure>
+)}
+
+{kind === 'border-use' && (
+  <div class="sh-ex-grid sh-root">
+    {item === 'default' && (
+      <Fragment>
+        <div class="sh-ex is-b"><Pin solid label="border.width.default" at="bottom"><span class="sp-input" style="width: 15rem"><span style="width: var(--bh-space-150)"></span><span>mystore.example.com</span></span></Pin></div>
+        <div class="sh-ex is-b"><Pin solid label="border.width.default" at="bottom"><span class="sh-card"><b>{L('Online store', 'Cửa hàng online')}</b><span>{L('Connected · last sync 2 minutes ago', 'Đã kết nối · đồng bộ lần cuối 2 phút trước')}</span></span></Pin></div>
+      </Fragment>
+    )}
+    {item === 'selected' && (
+      <Fragment>
+        <div class="sh-ex is-b"><span class="sh-tabs"><Pin solid label="border.width.selected" at="bottom"><span class="is-on">{L('Overview', 'Tổng quan')}</span></Pin><span>{L('Mappings', 'Mapping')}</span><span>{L('History', 'Lịch sử')}</span></span></div>
+        <div class="sh-ex is-b"><Pin solid label="border.width.selected" at="bottom"><span class="sh-card is-selected"><b>{L('Every 15 minutes', 'Mỗi 15 phút')}</b><span>{L('Selected schedule', 'Lịch đang chọn')}</span></span></Pin></div>
+        <div class="sh-ex is-b is-span is-left"><span class="sh-nav"><span>{L('Dashboard', 'Bảng điều khiển')}</span><Pin solid label="border.width.selected" at="left" lenNarrow="600"><span class="is-on">{L('Integrations', 'Tích hợp')}</span></Pin><span>{L('Logs', 'Nhật ký')}</span></span></div>
+      </Fragment>
+    )}
+    {item === 'focused' && (
+      <Fragment>
+        <div class="sh-ex is-b"><Pin solid label="border.width.focused" at="bottom" len="400"><span class="sp-btn sh-ring">{L('Test connection', 'Kiểm tra kết nối')}</span></Pin></div>
+        <div class="sh-ex is-b"><span class="sh-menu"><span>{L('Edit mapping', 'Sửa mapping')}</span><span>{L('Pause', 'Tạm dừng')}</span><Pin solid label="border.width.focused" at="bottom" len="400"><span class="is-focus">{L('Run sync now', 'Đồng bộ ngay')}</span></Pin></span></div>
+      </Fragment>
+    )}
+    {item === 'accent' && (
+      <Fragment>
+        <div class="sh-ex is-b is-span is-left"><Pin solid label="border.width.accent" at="left" wide><span class="sh-alert"><b>{L('Sync failed for 12 orders', 'Đồng bộ lỗi 12 đơn hàng')}</b><span>{L('The store returned 429. Retrying in 5 minutes.', 'Cửa hàng trả về 429. Thử lại sau 5 phút.')}</span></span></Pin></div>
+        <div class="sh-ex is-b is-span is-left"><Pin solid label="border.width.accent" at="left"><p class="sh-quote">{L('Use one radius for every control.', 'Mọi control dùng chung một radius.')}</p></Pin></div>
+        <div class="sh-ex is-b is-span is-left">
+          <span class="sh-frame">
+            <div class="sh-table">
+              <span><em>10:42:07</em>{L('Order #10293', 'Đơn #10293')}<em>{L('Synced', 'Đã đồng bộ')}</em></span>
+              <Pin solid label="border.width.accent" at="left" lenNarrow="800"><span class="is-error"><em>10:42:09</em>{L('Order #10294', 'Đơn #10294')}<em>{L('Failed', 'Lỗi')}</em></span></Pin>
+              <span><em>10:42:11</em>{L('Order #10295', 'Đơn #10295')}<em>{L('Synced', 'Đã đồng bộ')}</em></span>
+            </div>
+          </span>
+        </div>
+      </Fragment>
+    )}
+  </div>
+)}
+
+{kind === 'dodont' && (
+  <div class="sp-dd sh-root">
+    <figure class="sp-dd-panel is-do">
+      <figcaption><span aria-hidden="true">✓</span> {L('Do', 'Nên')}</figcaption>
+      <div class="sp-dd-stage">
+        {item === 'nested' && <div class="sh-outer" style="border-radius: var(--bh-radius-200); padding: var(--bh-space-100); width: 13rem"><span class="sh-inner" style="border-radius: var(--bh-radius-100); min-height: 4rem">{L('Button group', 'Nhóm nút')}</span></div>}
+        {item === 'controls' && <span class="sh-row"><span class="sp-input" style="width: 11rem"><span style="width: var(--bh-space-150)"></span><span>{L('Search orders', 'Tìm đơn hàng')}</span></span><span class="sp-btn is-primary">{L('Search', 'Tìm')}</span></span>}
+        {item === 'corners' && <span class="sh-alert"><b>{L('Sync failed', 'Đồng bộ lỗi')}</b><span>{L('12 orders were not sent.', '12 đơn chưa được gửi.')}</span></span>}
+        {item === 'selected' && <span class="sh-tabs"><span class="is-on">{L('Overview', 'Tổng quan')}</span><span>{L('Mappings', 'Mapping')}</span><span>{L('History', 'Lịch sử')}</span></span>}
+        {item === 'accent' && <span class="sh-alert"><b>{L('Sync failed', 'Đồng bộ lỗi')}</b><span>{L('12 orders were not sent.', '12 đơn chưa được gửi.')}</span></span>}
+        {item === 'cards' && <span class="sh-card"><b>{L('Online store', 'Cửa hàng online')}</b><span>{L('Connected', 'Đã kết nối')}</span></span>}
+      </div>
+      <p>
+        {item === 'nested' && L('Take the padding off the outer radius: 16 − 8 = 8. The two curves run side by side.', 'Lấy radius ngoài trừ padding: 16 − 8 = 8. Hai đường cong chạy song song.')}
+        {item === 'controls' && L('Give inputs and buttons the same 8 px, so a row of controls lines up.', 'Ô nhập và nút dùng chung 8 px, để một hàng control thẳng hàng.')}
+        {item === 'corners' && L('Round all four corners and let the accent bar follow them.', 'Bo cả bốn góc và để thanh accent chạy theo góc.')}
+        {item === 'selected' && L('Mark the selected tab with a 2 px bar in the selected colour.', 'Đánh dấu tab đang chọn bằng thanh 2 px màu selected.')}
+        {item === 'accent' && L('Put the 4 px accent on one edge only.', 'Chỉ đặt accent 4 px ở một cạnh.')}
+        {item === 'cards' && L('Give cards a 1 px border. Selection adds the 2 px border.', 'Card dùng viền 1 px. Khi chọn mới dùng viền 2 px.')}
+      </p>
+    </figure>
+    <figure class="sp-dd-panel is-dont">
+      <figcaption><span aria-hidden="true">✕</span> {L('Don’t', 'Không nên')}</figcaption>
+      <div class="sp-dd-stage">
+        {item === 'nested' && <div class="sh-outer" style="border-radius: var(--bh-radius-200); padding: var(--bh-space-100); width: 13rem"><span class="sh-inner" style="border-radius: var(--bh-radius-200); min-height: 4rem">{L('Button group', 'Nhóm nút')}</span></div>}
+        {item === 'controls' && <span class="sh-row"><span class="sp-input" style="width: 11rem; border-radius: var(--bh-radius-050)"><span style="width: var(--bh-space-150)"></span><span>{L('Search orders', 'Tìm đơn hàng')}</span></span><span class="sp-btn is-primary" style="border-radius: var(--bh-radius-full)">{L('Search', 'Tìm')}</span></span>}
+        {item === 'corners' && <span class="sh-alert is-squared"><b>{L('Sync failed', 'Đồng bộ lỗi')}</b><span>{L('12 orders were not sent.', '12 đơn chưa được gửi.')}</span></span>}
+        {item === 'selected' && <span class="sh-tabs" style="--sh-sel: var(--bh-border-width-accent)"><span class="is-on">{L('Overview', 'Tổng quan')}</span><span>{L('Mappings', 'Mapping')}</span><span>{L('History', 'Lịch sử')}</span></span>}
+        {item === 'accent' && <span class="sh-alert is-boxed"><b>{L('Sync failed', 'Đồng bộ lỗi')}</b><span>{L('12 orders were not sent.', '12 đơn chưa được gửi.')}</span></span>}
+        {item === 'cards' && <span class="sh-card" style="border-width: var(--bh-border-width-selected); border-color: var(--bh-color-border-bold)"><b>{L('Online store', 'Cửa hàng online')}</b><span>{L('Connected', 'Đã kết nối')}</span></span>}
+      </div>
+      <p>
+        {item === 'nested' && L('The same 16 px inside and out. The gap is wider at the corners than along the sides.', 'Trong và ngoài cùng 16 px. Khoảng hở ở góc rộng hơn ở hai cạnh.')}
+        {item === 'controls' && L('A 4 px input next to a pill button. The row looks like two different products.', 'Ô nhập 4 px cạnh nút viên thuốc. Hàng control trông như của hai sản phẩm khác nhau.')}
+        {item === 'corners' && L('Square only the left corners. One box ends up with two radii.', 'Chỉ làm vuông hai góc trái. Một hộp có hai radius khác nhau.')}
+        {item === 'selected' && L('Use the 4 px accent for a selected tab. Accent is for status and emphasis.', 'Dùng accent 4 px cho tab đang chọn. Accent dành cho trạng thái và nhấn mạnh.')}
+        {item === 'accent' && L('Draw 4 px all the way round. The alert shouts and the message gets lost.', 'Vẽ 4 px quanh cả hộp. Alert quá nặng và nội dung bị lấn át.')}
+        {item === 'cards' && L('Give every card a 2 px border. Nothing can show selection any more.', 'Card nào cũng viền 2 px. Không còn cách nào để báo trạng thái đang chọn.')}
+      </p>
+    </figure>
+  </div>
+)}

package/dist/docs/src/components/ShapePin.astro

@@ -0,0 +1,22 @@
+---
+// Points at the part of an example that the token sets, the way a spec redline does: a Beehexa
+// hexagon on that spot, the corner's own curve traced inside it (radius pins), and a line to the
+// token name.
+interface Props {
+  label: string;
+  /** corner: the bottom-left corner. bottom / top: the middle of the bottom or top edge. left: the middle of the left edge. */
+  at?: 'corner' | 'bottom' | 'top' | 'left';
+  /** The element's radius, e.g. var(--bh-radius-100). Draws the curve inside the hexagon. Leave out for border pins. */
+  r?: string;
+  /** Line length as a space token step, e.g. '300' for space.300. */
+  len?: string;
+  /** Let the pinned element take the full width of its column (alerts, tables). */
+  wide?: boolean;
+  /** A small solid hexagon and a dark line, as on the Border page. */
+  solid?: boolean;
+  /** Line length when a left pin drops down on narrow screens. */
+  lenNarrow?: string;
+}
+const { label, at = 'corner', r, len = '300', wide = false, solid = false, lenNarrow } = Astro.props;
+---
+<span class:list={['sh-pin', { 'is-wide': wide }]}><slot /><span class:list={['sh-anno', `is-${at}`, { 'is-solid': solid }]} style={`--sh-len: var(--bh-space-${len});${lenNarrow ? ` --sh-len-n: var(--bh-space-${lenNarrow});` : ''}${r ? ` --sh-r: ${r};` : ''}`} aria-hidden="true"><i class="sh-mark">{r && <b class="sh-arc"></b>}</i><b class="sh-ln"></b><code>{label}</code></span></span>

package/dist/docs/src/components/Sidebar.astro

@@ -0,0 +1,206 @@
+---
+// The one navigation tree for the design system. Every section (level 1) starts open, so the
+// whole system is visible on arrival; its whole row opens and closes it, and its first page
+// (Overview) is the section's landing page. A page with sub-pages (level 2, such as Logos or
+// Typography) is a folder row that links to its first page: a plain click opens the folder and
+// goes there, or only closes it when open; modified clicks open the page in a new tab.
+// Nothing closes on its own: opening, closing or following a link never changes another
+// branch. What the reader opened or closed is kept for the browser tab.
+import { isCurrent, type SectionId, type Sidebar } from '../lib/navigation';
+import StatusBadge from './StatusBadge.astro';
+import ChevronRight from '@lucide/astro/icons/chevron-right';
+import X from '@lucide/astro/icons/x';
+import { basePath, langOf, localize, t } from '../lib/i18n';
+
+interface Props {
+  tree: (Sidebar & { id: SectionId })[];
+  current?: SectionId;
+}
+
+const { tree } = Astro.props;
+const lang = langOf(Astro.url.pathname);
+const T = t(lang);
+const path = basePath(Astro.url.pathname);
+const L = (href: string) => localize(href, lang);
+const current = (href: string) => (isCurrent(href, path) ? 'page' : undefined);
+const slug = (href: string) => href.replace(/[^a-z0-9]+/gi, '-').replace(/^-|-$/g, '');
+---
+
+<nav class="sidebar" id="docs-sidebar" aria-label={T.designSystem}>
+  <div class="sidebar-head">
+    <span class="sidebar-title">{T.designSystem}</span>
+    <button class="sidebar-close" type="button" data-drawer-close aria-label={T.closeMenu}>
+      <X size={20} />
+    </button>
+  </div>
+  <ul class="sidebar-tree">
+    {tree.map((section) => {
+      const showBadge = (status?: string) => status && status !== 'ga' && !section.sharedStatus;
+      const branchId = `branch-${section.id}`;
+      return (
+        <li class="sidebar-section">
+          <button class="sidebar-section-toggle" type="button" aria-expanded="true" aria-controls={branchId} data-branch-toggle>
+            <span class="sidebar-section-title">{section.title}</span>
+            {section.sharedStatus && section.sharedStatus !== 'ga' && <StatusBadge status={section.sharedStatus} link={false} />}
+            <ChevronRight size={16} class="sidebar-chevron" />
+          </button>
+          <div class="sidebar-branch" id={branchId}>
+            {section.groups.map((group) => (
+              <div class="sidebar-group">
+                {group.label && <p class="sidebar-label">{group.label}</p>}
+                <ul>
+                  {group.items.map((item) => {
+                    if (!item.children) {
+                      return (
+                        <li>
+                          <a href={L(item.href)} class="sidebar-item" aria-current={current(item.href)}>
+                            <span>{item.title}</span>
+                            {showBadge(item.status) && <StatusBadge status={item.status!} link={false} />}
+                          </a>
+                        </li>
+                      );
+                    }
+                    const hasCurrent = item.children.some((child) => isCurrent(child.href, path));
+                    const subId = `sub-${slug(item.href)}`;
+                    return (
+                      <li>
+                        <a href={L(item.children[0].href)} class="sidebar-item has-children" aria-expanded={hasCurrent ? 'true' : 'false'} aria-controls={subId} data-branch-toggle data-has-current={hasCurrent ? '' : undefined}>
+                          <span>{item.title}</span>
+                          {showBadge(item.status) && <StatusBadge status={item.status!} link={false} />}
+                          <ChevronRight size={16} class="sidebar-chevron" />
+                        </a>
+                        <ul class="sidebar-children" id={subId} hidden={!hasCurrent}>
+                          {item.children.map((child) => (
+                            <li>
+                              <a href={L(child.href)} class="sidebar-child" aria-current={current(child.href)}>
+                                <span>{child.title}</span>
+                                {showBadge(child.status) && child.status !== item.status && <StatusBadge status={child.status!} link={false} />}
+                              </a>
+                            </li>
+                          ))}
+                        </ul>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </li>
+      );
+    })}
+  </ul>
+</nav>
+
+<script is:inline>
+  // Runs before the first paint, so the tree never flashes into a different state.
+  // State for this browser tab: { branches: { id: open }, scroll: { href, y } }.
+  // Only branches the reader opened or closed are stored; the rest keep their defaults
+  // (sections open, folders closed unless they hold the current page).
+  (() => {
+    const nav = document.getElementById('docs-sidebar');
+    if (!nav) return;
+    const KEY = 'bh-sidebar';
+    let state = {};
+    try {
+      state = JSON.parse(sessionStorage.getItem(KEY) || '{}') || {};
+    } catch {}
+    if (typeof state.branches !== 'object' || !state.branches) state.branches = {};
+    const save = () => {
+      try {
+        sessionStorage.setItem(KEY, JSON.stringify(state));
+      } catch {}
+    };
+    const toggleFor = (id) => nav.querySelector('[data-branch-toggle][aria-controls="' + id + '"]');
+    const setOpen = (id, open) => {
+      const branch = document.getElementById(id);
+      const toggle = toggleFor(id);
+      if (!branch || !toggle) return;
+      branch.hidden = !open;
+      toggle.setAttribute('aria-expanded', String(open));
+    };
+    // Open and close with a short slide (height, margins and fade), unless the reader asked
+    // for reduced motion. A new click during the slide reverses it from where it is.
+    const still = matchMedia('(prefers-reduced-motion: reduce)');
+    const slide = (id, open) => {
+      const branch = document.getElementById(id);
+      const toggle = toggleFor(id);
+      if (!branch || !toggle) return;
+      toggle.setAttribute('aria-expanded', String(open));
+      if (still.matches || !branch.animate) {
+        branch.hidden = !open;
+        return;
+      }
+      const from = branch.hidden ? 0 : branch.getBoundingClientRect().height;
+      branch.getAnimations().forEach((a) => a.cancel());
+      branch.hidden = false;
+      const cs = getComputedStyle(branch);
+      const full = { height: branch.scrollHeight + 'px', marginTop: cs.marginTop, marginBottom: cs.marginBottom, opacity: 1 };
+      const none = { height: '0px', marginTop: '0px', marginBottom: '0px', opacity: 0 };
+      const start = from && from !== branch.scrollHeight ? { ...(open ? none : full), height: from + 'px' } : open ? none : full;
+      const anim = branch.animate([start, open ? full : none], { duration: open ? 220 : 180, easing: 'cubic-bezier(0.2, 0, 0, 1)' });
+      branch.style.overflow = 'hidden';
+      anim.onfinish = () => {
+        branch.style.overflow = '';
+        if (toggle.getAttribute('aria-expanded') !== 'true') branch.hidden = true;
+      };
+    };
+
+    const returning = Object.keys(state.branches).length > 0 || 'scroll' in state;
+    for (const [id, open] of Object.entries(state.branches)) setOpen(id, Boolean(open));
+
+    // The branches that hold the current page always open, so the reader sees where they are.
+    const here = nav.querySelector('[aria-current="page"]');
+    const reveal = [];
+    for (let el = here?.parentElement; el && el !== nav; el = el.parentElement) {
+      if (el.matches('.sidebar-branch, .sidebar-children') && el.id) {
+        // Remember it as opened, so it stays open after the reader moves on. If it was closed
+        // on the previous page, draw it closed and slide it open after the first paint.
+        const wasOpen = el.matches('.sidebar-branch') ? state.branches[el.id] !== false : state.branches[el.id] === true;
+        if (returning && !wasOpen) {
+          setOpen(el.id, false);
+          reveal.push(el.id);
+        } else setOpen(el.id, true);
+        state.branches[el.id] = true;
+      }
+    }
+
+    // Coming from a sidebar link: keep the clicked link at the same height as before.
+    // Otherwise bring the current page into view if it is below the fold.
+    const scroll = state.scroll;
+    delete state.scroll;
+    save();
+    const link = scroll && scroll.href === location.pathname ? nav.querySelector('a[href="' + scroll.href + '"]') : null;
+    if (link) nav.scrollTop = link.offsetTop - scroll.y;
+    else if (here && here.offsetTop + here.offsetHeight > nav.clientHeight - 24) nav.scrollTop = here.offsetTop - nav.clientHeight / 3;
+
+    if (reveal.length) requestAnimationFrame(() => requestAnimationFrame(() => reveal.forEach((id) => slide(id, true))));
+
+    nav.querySelectorAll('[data-branch-toggle]').forEach((button) =>
+      button.addEventListener('click', (event) => {
+        // A folder row is a real link to its first page, so Ctrl/Cmd/Shift-click, middle-click
+        // and the right-click menu open it in a new tab or window as usual.
+        if (event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;
+        const id = button.getAttribute('aria-controls');
+        const open = button.getAttribute('aria-expanded') !== 'true';
+        state.branches[id] = open;
+        // Opening a folder goes straight to its first page (the link does it, at once), unless
+        // the reader is already in it. The next page draws the folder already open.
+        if (open && button.hasAttribute('href') && !button.hasAttribute('data-has-current')) {
+          save();
+          return;
+        }
+        event.preventDefault();
+        save();
+        slide(id, open);
+      }),
+    );
+
+    nav.addEventListener('click', (event) => {
+      const a = event.target.closest('a[href]');
+      if (event.defaultPrevented || !a || a.origin !== location.origin) return;
+      state.scroll = { href: a.pathname, y: a.offsetTop - nav.scrollTop };
+      save();
+    });
+  })();
+</script>