@beehexa/design-rules 0.0.0-stage → 2611.3.3

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

@@ -0,0 +1,32 @@
+---
+// A small HexaSync screen drawn with role tokens only, used to show colour in context.
+// `markers` adds the numbered callouts used by the "Using color" page.
+import { langOf } from '../lib/i18n';
+interface Props {
+  markers?: boolean;
+  style?: string;
+}
+const { markers = false, style } = Astro.props;
+const vi = langOf(Astro.url.pathname) === 'vi';
+const L = (en: string, viText: string) => (vi ? viText : en);
+const n = (i: number) => (markers ? `<span class="c-ex-n">${i}</span>` : '');
+---
+
+<div class="c-ex-card" style={style}>
+  <div class="c-ex-head">
+    <span class="c-ex-title">{L('Connections', 'Kết nối')} <Fragment set:html={n(1)} /></span>
+    <span><span class="bh-button bh-button-primary">{L('Add connection', 'Thêm kết nối')}</span><Fragment set:html={n(2)} /></span>
+  </div>
+  <div class="c-ex-row">
+    <span><b class="c-ex-name">{L('Online store', 'Cửa hàng online')}</b><span class="c-ex-meta">{L('Synced 2 min ago', 'Đồng bộ 2 phút trước')} <Fragment set:html={n(3)} /></span></span>
+    <span><span class="bh-label is-success">{L('Synced', 'Đã đồng bộ')}</span><Fragment set:html={n(4)} /></span>
+  </div>
+  <div class="c-ex-row is-selected">
+    <span><b class="c-ex-name">ERP</b><span class="c-ex-meta">{L('Token expires in 3 days', 'Token hết hạn sau 3 ngày')}</span></span>
+    <span><span class="bh-label is-warning">{L('Expiring', 'Sắp hết hạn')}</span><Fragment set:html={n(5)} /></span>
+  </div>
+  <div class="c-ex-row">
+    <span><b class="c-ex-name">{L('Accounting', 'Kế toán')}</b><span class="c-ex-meta"><a class="c-ex-link" href="#">{L('View error log', 'Xem nhật ký lỗi')}</a> <Fragment set:html={n(6)} /></span></span>
+    <span class="bh-label is-danger">{L('Failed', 'Lỗi')}</span>
+  </div>
+</div>

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

@@ -0,0 +1,20 @@
+---
+import { tokensByPrefix } from '../lib/tokens';
+
+// Grid of color swatches for every color token under `prefix`.
+interface Props {
+  prefix: string;
+}
+
+const tokens = tokensByPrefix(Astro.props.prefix).filter((token) => token.type === 'color');
+---
+
+<ul class="swatch-grid">
+  {tokens.map((token) => (
+    <li>
+      <span class="swatch-large" style={`background: var(${token.cssVar})`} aria-hidden="true"></span>
+      <code>{token.name}</code>
+      <span>{token.resolved}</span>
+    </li>
+  ))}
+</ul>

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

@@ -0,0 +1,21 @@
+---
+import { tabLabels } from '../lib/navigation';
+import { langOf, localize } from '../lib/i18n';
+
+const viTabs: Record<string, string> = { examples: 'Ví dụ', code: 'Code', usage: 'Cách dùng', accessibility: 'Khả năng tiếp cận', changelog: 'Nhật ký thay đổi' };
+
+interface Props {
+  name: string;
+  tabs: (keyof typeof tabLabels)[];
+  current: keyof typeof tabLabels;
+}
+
+const { name, tabs, current } = Astro.props;
+const lang = langOf(Astro.url.pathname);
+---
+
+<nav class="component-tabs" aria-label={lang === 'vi' ? 'Tài liệu component' : 'Component documentation'}>
+  {tabs.map((tab) => (
+    <a href={localize(`/components/${name}/${tab}/`, lang)} aria-current={tab === current ? 'page' : undefined}>{lang === 'vi' ? viTabs[tab] : tabLabels[tab]}</a>
+  ))}
+</nav>

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

@@ -0,0 +1,25 @@
+---
+// Site footer: one line. Everything a reader needs to move around is already on screen
+// (header: Design system, News; sidebar: every page; under each page: feedback and changelog),
+// so the footer only carries what lives nowhere else: the copyright and the legal
+// links. The owner is Beehexa Corp, the company named in the Terms of Service. Same shape as fluent2.microsoft.design (checked 23/10/2026).
+// llms.txt stays at /llms.txt for AI tools. A trademark link joins the legal links once
+// Logos › Downloads and terms is written.
+import { langOf, t } from '../lib/i18n';
+
+const year = new Date().getFullYear();
+const T = t(langOf(Astro.url.pathname));
+
+const links = [
+  { label: T.terms, href: 'https://beehexa.com/legal/beehexa-term-of-service' },
+  { label: T.privacy, href: 'https://beehexa.com/legal/privacy-policy' },
+  { label: T.cookies, href: 'https://beehexa.com/legal/beehexa-cookie-policy' },
+];
+---
+
+<footer class="site-footer">
+  <span>© {year} Beehexa Corp</span>
+  <nav aria-label={T.legal}>
+    {links.map((link) => <a href={link.href}>{link.label}</a>)}
+  </nav>
+</footer>

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

@@ -0,0 +1,20 @@
+---
+import { feedbackEmail, feedbackHref } from '../lib/brand';
+
+const proposal = `mailto:${feedbackEmail}?subject=${encodeURIComponent('beehexa.design proposal')}`;
+---
+
+<ul class="help-list">
+  <li>
+    <b>Ask a question</b>
+    <span>A shared channel is being set up. Until then, email <a href={`mailto:${feedbackEmail}`}>{feedbackEmail}</a>.</span>
+  </li>
+  <li>
+    <b>Report a problem</b>
+    <span>Something wrong, missing or hard to follow? <a href={feedbackHref(Astro.url.pathname)}>Report it</a>. Every page also has this link at the bottom.</span>
+  </li>
+  <li>
+    <b>Propose a change</b>
+    <span>Need a new token, component or rule? <a href={proposal}>Send a proposal</a> with the problem it solves and where you need it.</span>
+  </li>
+</ul>

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

@@ -0,0 +1,257 @@
+---
+// Icon library: every Lucide icon, with search by name and tags, a category filter, a size
+// switch and click to copy the name. The page holds only the controls; the icons come from
+// /foundations/styles/icons/lucide.json (built from lucide-static) when the library comes into
+// view, about 540 kB, 140 kB compressed. Without JavaScript the page links to lucide.dev.
+import Search from '@lucide/astro/icons/search';
+import ChevronDown from '@lucide/astro/icons/chevron-down';
+import { lucide } from '../lib/lucide-data';
+import { iconActions } from '../lib/icons';
+import '../styles/icons.css';
+import { langOf } from '../lib/i18n';
+
+const { version, names, categories } = lucide();
+const vi = langOf(Astro.url.pathname) === 'vi';
+const L = (en: string, viText: string) => (vi ? viText : en);
+const n = (value: number) => value.toLocaleString(vi ? 'vi-VN' : 'en-US');
+const total = n(names.length);
+const picks = iconActions.map((action) => action.icon);
+// Search also matches the meaning, in English and Vietnamese, so “sync” and “đồng bộ” both find refresh-cw.
+const meanings = Object.fromEntries(iconActions.map((a) => [a.icon, `${a.meaning} ${a.meaningVi}`.toLowerCase().split(/[\s,]+/).filter(Boolean)]));
+// Words the script writes at run time.
+const words = vi
+  ? { locale: 'vi-VN', loading: 'Đang tải icon…', failed: 'Không tải được icon. Tải lại trang để thử lại.', one: 'icon', many: 'icon', in: ' trong nhóm ', for: ' cho ', copyFailed: 'Không sao chép được. Tên icon là ', copied: 'Đã sao chép ', copiedLabel: 'Đã sao chép' }
+  : { locale: 'en-US', loading: 'Loading icons…', failed: 'The icons did not load. Reload the page to try again.', one: 'icon', many: 'icons', in: ' in ', for: ' for ', copyFailed: 'Could not copy. The name is ', copied: 'Copied ', copiedLabel: 'Copied' };
+---
+
+<section class="ib" aria-label={L('Icon library', 'Thư viện icon')} data-words={JSON.stringify(words)} data-icon-browser data-src="/foundations/styles/icons/lucide.json" data-picks={JSON.stringify(picks)} data-meanings={JSON.stringify(meanings)} data-total={names.length}>
+  <div class="ib-controls">
+    <div class="ib-search">
+      <Search size={16} class="ib-search-icon" />
+      <input id="ib-query" type="search" placeholder={L(`Search ${total} icons`, `Tìm trong ${total} icon`)} aria-label={L(`Search ${total} icons by name or tag`, `Tìm trong ${total} icon theo tên hoặc thẻ`)} autocomplete="off" spellcheck="false" aria-controls="ib-grid" />
+    </div>
+    <label class="ib-field">
+      <span>{L('Category', 'Nhóm')}</span>
+      <span class="ib-select">
+        <select id="ib-category" aria-controls="ib-grid">
+          <option value="all">{L('All', 'Tất cả')} ({total})</option>
+          <option value="common" selected>{L('Common actions', 'Thao tác thường gặp')} ({picks.length})</option>
+          {categories.map((c, i) => <option value={String(i)}>{c.title} ({n(c.count)})</option>)}
+        </select>
+        <ChevronDown size={16} class="ib-select-icon" aria-hidden="true" />
+      </span>
+    </label>
+    <div class="ib-field">
+      <span id="ib-size-label">{L('Size', 'Cỡ')}</span>
+      <div class="ib-sizes" role="radiogroup" aria-labelledby="ib-size-label">
+        {[16, 20, 24].map((size) => (
+          <label class="ib-size">
+            <input type="radio" name="ib-size" value={size} checked={size === 24} aria-label={`${size} px`} />
+            <span aria-hidden="true">{size}</span>
+          </label>
+        ))}
+      </div>
+    </div>
+  </div>
+
+  <p class="ib-status" id="ib-status" aria-live="polite">{picks.length} {L('icons in Common actions', 'icon trong nhóm Thao tác thường gặp')}</p>
+  <p class="sr-only" id="ib-hint">{L('Enter copies the icon name. Arrow keys move between icons.', 'Nhấn Enter để sao chép tên icon. Dùng phím mũi tên để di chuyển giữa các icon.')}</p>
+  <ul class="ib-grid" id="ib-grid" aria-label="Icon" style="--ib-size: 24px"></ul>
+  <p class="ib-empty" hidden>{L('No icon matches. Try another word, such as “sync” or “order”, or choose All.', 'Không có icon nào khớp. Thử từ khác, như "đồng bộ" hoặc "đơn hàng", hoặc chọn Tất cả.')}</p>
+  <noscript><p class="ib-empty">{L('The library needs JavaScript. Browse the same icons on', 'Thư viện cần JavaScript. Xem các icon này trên')} <a href="https://lucide.dev/icons/">lucide.dev/icons</a>.</p></noscript>
+  <div class="ib-toast" role="status" aria-live="polite"></div>
+
+  <p class="ib-credit">
+    {L('Icons from', 'Icon từ')} <a href="https://lucide.dev">Lucide</a> {version}, © Lucide Contributors, <a href="https://lucide.dev/license">{L('ISC licence', 'giấy phép ISC')}</a>. {L('Categories and tags come from the Lucide project.', 'Tên nhóm và thẻ lấy từ dự án Lucide, giữ nguyên tiếng Anh.')}
+  </p>
+</section>
+
+<script>
+  type Row = { name: string; tags: string[]; cats: number[]; li: HTMLLIElement; button: HTMLButtonElement };
+
+  const root = document.querySelector<HTMLElement>('[data-icon-browser]');
+  if (root) init(root);
+
+  function init(root: HTMLElement) {
+    const query = root.querySelector<HTMLInputElement>('#ib-query')!;
+    const category = root.querySelector<HTMLSelectElement>('#ib-category')!;
+    const grid = root.querySelector<HTMLUListElement>('#ib-grid')!;
+    const status = root.querySelector<HTMLElement>('#ib-status')!;
+    const empty = root.querySelector<HTMLElement>('.ib-empty')!;
+    const toast = root.querySelector<HTMLElement>('.ib-toast')!;
+    const picks: string[] = JSON.parse(root.dataset.picks ?? '[]');
+    const meanings: Record<string, string[]> = JSON.parse(root.dataset.meanings ?? '{}');
+    const W: Record<string, string> = JSON.parse(root.dataset.words ?? '{}');
+    const fmt = (value: number) => value.toLocaleString(W.locale);
+    let rows: Row[] = [];
+    let shown: Row[] = [];
+    let active = 0;
+    let loading: Promise<void> | undefined;
+
+    const load = () =>
+      (loading ??= (async () => {
+        status.textContent = W.loading;
+        try {
+          const response = await fetch(root.dataset.src!);
+          const data = (await response.json()) as { icons: [string, string, number[], string][] };
+          grid.innerHTML = data.icons
+            .map(
+              ([name, , , svg]) =>
+                `<li><button type="button" class="ib-icon" tabindex="-1" data-name="${name}" title="${name}" aria-describedby="ib-hint">` +
+                `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${svg}</svg>` +
+                `<span class="ib-name">${name}</span></button></li>`,
+            )
+            .join('');
+          const items = [...grid.children] as HTMLLIElement[];
+          rows = data.icons.map(([name, tags, cats], i) => ({ name, tags: tags ? tags.split(',') : [], cats, li: items[i], button: items[i].firstElementChild as HTMLButtonElement }));
+          // The Common actions icons also match the words of their meaning.
+          for (const [name, words] of Object.entries(meanings)) rows.find((row) => row.name === name)?.tags.unshift(...words);
+          apply(true);
+        } catch {
+          loading = undefined;
+          status.textContent = W.failed;
+        }
+      })());
+
+    // Every word must match the name or a tag. Name matches rank first.
+    const score = (row: Row, words: string[]) => {
+      let total = 0;
+      for (const word of words) {
+        const s = row.name === word ? 12 : row.name.startsWith(word) ? 8 : row.name.includes(word) ? 5
+          : row.tags.some((tag) => tag.startsWith(word)) ? 3 : row.tags.some((tag) => tag.includes(word)) ? 1 : 0;
+        if (!s) return 0;
+        total += s;
+      }
+      // Common actions come first among equal matches.
+      return total + (picks.includes(row.name) ? 6 : 0);
+    };
+
+    let statusTimer = 0;
+    function apply(now = false) {
+      if (!rows.length) return;
+      const words = query.value.toLowerCase().split(/\s+/).filter(Boolean);
+      const value = category.value;
+      // Common actions is the default view, so a search from it looks through every icon
+      // (common actions still rank first); other categories narrow the search.
+      const everything = value === 'all' || (value === 'common' && words.length > 0);
+      let list = everything ? rows
+        : value === 'common' ? picks.map((name) => rows.find((row) => row.name === name)!).filter(Boolean)
+        : rows.filter((row) => row.cats.includes(Number(value)));
+      if (words.length) {
+        list = list
+          .map((row) => ({ row, s: score(row, words) }))
+          .filter((x) => x.s > 0)
+          .sort((a, b) => b.s - a.s || a.row.name.localeCompare(b.row.name))
+          .map((x) => x.row);
+      }
+      shown = list;
+      grid.replaceChildren(...list.map((row) => row.li));
+      empty.hidden = list.length > 0;
+      setActive(0, false);
+      const label = everything ? '' : `${W.in}${category.selectedOptions[0].textContent!.replace(/\s*\(.*\)$/, '')}`;
+      const text = `${fmt(list.length)} ${list.length === 1 ? W.one : W.many}${label}${words.length ? `${W.for}“${query.value.trim()}”` : ''}`;
+      window.clearTimeout(statusTimer);
+      if (now) status.textContent = text;
+      else statusTimer = window.setTimeout(() => (status.textContent = text), 400);
+    }
+
+    function setActive(index: number, focus = true) {
+      if (!shown.length) return;
+      shown[active]?.button.setAttribute('tabindex', '-1');
+      active = Math.max(0, Math.min(index, shown.length - 1));
+      const button = shown[active].button;
+      button.setAttribute('tabindex', '0');
+      if (focus) button.focus();
+    }
+
+    // Columns in the current layout: the items on the first row.
+    const columns = () => {
+      const top = shown[0]?.li.offsetTop;
+      let count = 0;
+      while (count < shown.length && shown[count].li.offsetTop === top) count++;
+      return Math.max(1, count);
+    };
+
+    grid.addEventListener('keydown', (event) => {
+      const step: Record<string, number> = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: columns(), ArrowUp: -columns() };
+      if (event.key in step) setActive(active + step[event.key]);
+      else if (event.key === 'Home') setActive(0);
+      else if (event.key === 'End') setActive(shown.length - 1);
+      else return;
+      event.preventDefault();
+    });
+
+    let toastTimer = 0;
+    const say = (text: string) => {
+      toast.textContent = '';
+      window.setTimeout(() => {
+        toast.textContent = text;
+        toast.dataset.show = '';
+        window.clearTimeout(toastTimer);
+        toastTimer = window.setTimeout(() => delete toast.dataset.show, 2400);
+      }, 50);
+    };
+
+    const fallbackCopy = (text: string) => {
+      const area = document.createElement('textarea');
+      area.value = text;
+      area.setAttribute('readonly', '');
+      area.className = 'sr-only';
+      document.body.append(area);
+      area.select();
+      let ok = false;
+      try {
+        ok = document.execCommand('copy');
+      } catch {}
+      area.remove();
+      return ok;
+    };
+
+    grid.addEventListener('click', async (event) => {
+      const button = (event.target as HTMLElement).closest<HTMLButtonElement>('.ib-icon');
+      if (!button) return;
+      const name = button.dataset.name!;
+      const index = shown.findIndex((row) => row.button === button);
+      if (index >= 0) setActive(index, false);
+      let ok = true;
+      try {
+        await navigator.clipboard.writeText(name);
+      } catch {
+        ok = fallbackCopy(name);
+      }
+      if (!ok) return say(`${W.copyFailed}${name}`);
+      say(`${W.copied}“${name}”`);
+      const label = button.querySelector('.ib-name')!;
+      button.dataset.copied = '';
+      label.textContent = W.copiedLabel;
+      window.setTimeout(() => {
+        delete button.dataset.copied;
+        label.textContent = name;
+      }, 1600);
+    });
+
+    query.addEventListener('input', () => {
+      void load();
+      apply();
+    });
+    query.addEventListener('focus', () => void load());
+    category.addEventListener('change', () => {
+      void load();
+      apply(true);
+    });
+    root.querySelectorAll<HTMLInputElement>('input[name="ib-size"]').forEach((radio) =>
+      radio.addEventListener('change', () => grid.style.setProperty('--ib-size', `${radio.value}px`)),
+    );
+
+    // Load the icons when the library is close to the screen.
+    if ('IntersectionObserver' in window) {
+      const observer = new IntersectionObserver((entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          observer.disconnect();
+          void load();
+        }
+      }, { rootMargin: '400px' });
+      observer.observe(root);
+    } else void load();
+  }
+</script>

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

@@ -0,0 +1,185 @@
+---
+// Illustrations for the Icons pages. Icons are Lucide 1.62.0, read from lucide-static at build
+// time, so the pictures show the exact shapes products get. Colours are role tokens.
+import '../styles/icons.css';
+import { lucide } from '../lib/lucide-data';
+import { iconActions, iconSizes } from '../lib/icons';
+import { langOf } from '../lib/i18n';
+
+interface Props {
+  kind: 'sizes' | 'align' | 'spacing' | 'actions' | 'dodont' | 'target';
+  /** For kind="dodont": which pair to show. */
+  item?: 'label' | 'meaning' | 'selected' | 'size' | 'stroke' | 'align' | 'colour' | 'target' | 'tooltip' | 'decorative';
+}
+const { kind, item } = Astro.props;
+const vi = langOf(Astro.url.pathname) === 'vi';
+const L = (en: string, viText: string) => (vi ? viText : en);
+
+const { icons } = lucide();
+const byName = new Map(icons.map((i) => [i.name, i.svg]));
+/** Inline SVG of a Lucide icon, hidden from assistive technology (the text says what it is). */
+const icon = (name: string, size = 16, opts: { stroke?: number; cls?: string; fill?: boolean } = {}) => {
+  const inner = byName.get(name);
+  if (!inner) throw new Error(`IconDemo: no Lucide icon "${name}"`);
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="${opts.fill ? 'currentColor' : 'none'}" stroke="currentColor" stroke-width="${opts.stroke ?? 2}" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-${name}${opts.cls ? ` ${opts.cls}` : ''}" aria-hidden="true">${inner}</svg>`;
+};
+
+const pairs: Record<string, { do: string; dont: string }> = vi ? {
+  label: { do: 'Icon có nhãn. Nhãn nói điều gì sẽ xảy ra.', dont: 'Icon đứng riêng cho một thao tác người dùng có thể không biết.' },
+  meaning: { do: 'Một nghĩa một icon, ở mọi nơi: refresh-cw cho mọi thao tác đồng bộ.', dont: 'Ba icon khác nhau cho cùng một thao tác trên một màn hình.' },
+  selected: { do: 'Đã chọn: nền "đã chọn" và thanh chỉ báo. Icon vẫn là dạng nét.', dont: 'Icon tô đặc là dấu hiệu duy nhất của mục đã chọn.' },
+  size: { do: 'Icon 16 px cạnh chữ 14 px.', dont: 'Icon 24 px cạnh chữ 14 px, hoặc cỡ lưng chừng như 18 px.' },
+  stroke: { do: 'Nét gốc của Lucide, co giãn theo icon (ở đây cỡ 24 px).', dont: 'Đổi độ dày nét, hoặc trộn nhiều độ dày.' },
+  align: { do: 'Icon căn giữa dòng chữ.', dont: 'Icon đặt trên đường chân chữ: bị lệch lên trên.' },
+  colour: { do: 'Icon cùng màu chữ, hoặc icon trạng thái đi kèm trạng thái viết bằng chữ.', dont: 'Tô màu để trang trí, hoặc icon có màu dưới 3:1.' },
+  target: { do: 'Nút 32 × 32 bao quanh icon 16 px.', dont: 'Icon 16 px là thứ duy nhất để bấm.' },
+  tooltip: { do: 'Nút chỉ có icon, có tên và tooltip cùng nội dung.', dont: 'Nút chỉ có icon, không tên và không tooltip.' },
+  decorative: { do: 'Icon trang trí bị ẩn; nhãn chỉ được đọc một lần.', dont: 'Icon cũng bị đọc: "refresh-cw, Đồng bộ ngay".' },
+} : {
+  label: { do: 'Icon with a label. The label says what happens.', dont: 'An icon on its own for an action people may not know.' },
+  meaning: { do: 'One icon for one meaning, everywhere: refresh-cw for every sync.', dont: 'Three icons for the same action on one screen.' },
+  selected: { do: 'Selected: the selected background and an indicator bar. The icon stays outline.', dont: 'A filled icon as the only sign of the selected item.' },
+  size: { do: '16 px icon next to 14 px text.', dont: 'A 24 px icon next to 14 px text, or an in-between size such as 18 px.' },
+  stroke: { do: 'Lucide’s own stroke, scaled with the icon (here at 24 px).', dont: 'Changing the stroke width, or mixing widths.' },
+  align: { do: 'Icon centred on the line of text.', dont: 'Icon sitting on the text baseline: it rides high.' },
+  colour: { do: 'Icon in the text colour, or a status icon next to the status in words.', dont: 'Colour to decorate, or an icon in a colour below 3:1.' },
+  target: { do: 'A 32 × 32 button around a 16 px icon.', dont: 'The 16 px icon is the only thing to click.' },
+  tooltip: { do: 'Icon-only button with a name and a matching tooltip.', dont: 'Icon-only button with no name and no tooltip.' },
+  decorative: { do: 'Decorative icon hidden; the label is read once.', dont: 'The icon is read too: “refresh-cw, Sync now”.' },
+};
+const syncNow = L('Sync now', 'Đồng bộ ngay');
+---
+
+{kind === 'sizes' && (
+  <div class="ic-sizes">
+    {iconSizes.map((s) => (
+      <figure class="ic-size">
+        <div class="ic-size-stage">
+          <Fragment set:html={icon('refresh-cw', s.size)} />
+        </div>
+        <figcaption>
+          <b>{s.size} px</b>
+          <span class="ic-meta">{L('Stroke', 'Nét')} {vi ? s.stroke.replace('.', ',') : s.stroke} px</span>
+          <span>{vi ? s.useVi : s.use}</span>
+        </figcaption>
+      </figure>
+    ))}
+  </div>
+)}
+
+{kind === 'align' && (
+  <div class="ic-panels">
+    <figure class="ic-panel">
+      <div class="ic-panel-stage is-zoom">
+        <span class="ic-line is-guided">
+          <Fragment set:html={icon('refresh-cw', 16)} /><span>{syncNow}</span>
+        </span>
+      </div>
+      <figcaption>{vi ? <Fragment><b>Một dòng.</b> Icon căn giữa line height của chữ (<code>align-items: center</code>).</Fragment> : <Fragment><b>One line.</b> The icon is centred on the line height of the text (<code>align-items: center</code>).</Fragment>}</figcaption>
+    </figure>
+    <figure class="ic-panel">
+      <div class="ic-panel-stage">
+        <span class="ic-multi">
+          <span class="ic-multi-icon"><Fragment set:html={icon('triangle-alert', 16, { cls: 'is-warning' })} /></span>
+          <span>{L('3 products were skipped because their SKU is missing in the ERP. Add the SKU, then sync again.', '3 sản phẩm bị bỏ qua vì thiếu SKU trong ERP. Thêm SKU rồi đồng bộ lại.')}</span>
+        </span>
+      </div>
+      <figcaption>{vi ? <Fragment><b>Nhiều dòng.</b> Icon căn giữa dòng đầu tiên, không căn theo cả khối.</Fragment> : <Fragment><b>Several lines.</b> The icon is centred on the first line, not on the whole block.</Fragment>}</figcaption>
+    </figure>
+  </div>
+)}
+
+{kind === 'spacing' && (
+  <div class="ic-panels">
+    <figure class="ic-panel">
+      <div class="ic-panel-stage is-zoom">
+        <span class="ic-spaced is-16">
+          <Fragment set:html={icon('plus', 16)} /><i class="ic-gap" aria-hidden="true"><small>4</small></i><span>{L('Add store', 'Thêm cửa hàng')}</span>
+        </span>
+      </div>
+      <figcaption>{vi ? <Fragment><b>4 px</b> với icon 16 px, trong control cỡ nhỏ và mặc định (<code>space.050</code>).</Fragment> : <Fragment><b>4 px</b> with a 16 px icon, in small and default controls (<code>space.050</code>).</Fragment>}</figcaption>
+    </figure>
+    <figure class="ic-panel">
+      <div class="ic-panel-stage is-zoom">
+        <span class="ic-spaced is-20">
+          <Fragment set:html={icon('plus', 20)} /><i class="ic-gap" aria-hidden="true"><small>8</small></i><span>{L('Add store', 'Thêm cửa hàng')}</span>
+        </span>
+      </div>
+      <figcaption>{vi ? <Fragment><b>8 px</b> với icon 20 hoặc 24 px, trong control cỡ lớn và bên ngoài control (<code>space.100</code>).</Fragment> : <Fragment><b>8 px</b> with a 20 or 24 px icon, in large controls and outside controls (<code>space.100</code>).</Fragment>}</figcaption>
+    </figure>
+  </div>
+)}
+
+{kind === 'target' && (
+  <div class="ic-panels">
+    <figure class="ic-panel">
+      <div class="ic-panel-stage is-zoom">
+        <span class="ic-target is-24"><Fragment set:html={icon('x', 16)} /><small>24</small></span>
+      </div>
+      <figcaption>{vi ? <Fragment><b>Tối thiểu 24 × 24</b> cho mọi thứ bấm được (WCAG 2.5.8). Chỉ dùng ở chỗ hẹp, như nút gỡ của một tag.</Fragment> : <Fragment><b>24 × 24 minimum</b> for anything you can click (WCAG 2.5.8). Use it only where space is tight, such as a tag’s remove button.</Fragment>}</figcaption>
+    </figure>
+    <figure class="ic-panel">
+      <div class="ic-panel-stage is-zoom">
+        <span class="ic-target is-32"><Fragment set:html={icon('settings', 16)} /><small>32</small></span>
+      </div>
+      <figcaption>{vi ? <Fragment><b>32 × 32 trong sản phẩm.</b> Mọi nút icon đều 32 × 32 với icon 16 px, hoặc 20 px trong thanh công cụ.</Fragment> : <Fragment><b>32 × 32 in products.</b> Every icon button is 32 × 32 with a 16 px icon, or 20 px in a toolbar.</Fragment>}</figcaption>
+    </figure>
+  </div>
+)}
+
+{kind === 'actions' && (
+  <table class="ic-actions">
+    <thead><tr><th scope="col">{L('Meaning', 'Nghĩa')}</th><th scope="col">Icon</th><th scope="col">{L('Name', 'Tên')}</th><th scope="col">{L('Note', 'Ghi chú')}</th></tr></thead>
+    <tbody>
+      {iconActions.map((a) => (
+        <tr>
+          <td>{vi ? a.meaningVi : a.meaning}</td>
+          <td><span class="ic-action-icon"><Fragment set:html={icon(a.icon, 16)} /><Fragment set:html={icon(a.icon, 24)} /></span></td>
+          <td><code>{a.icon}</code></td>
+          <td>{'note' in a ? (vi && 'noteVi' in a ? a.noteVi : a.note) : ''}</td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+)}
+
+{kind === 'dodont' && item && (
+  <div class="ic-dd">
+    <figure class="ic-dd-panel is-do">
+      <figcaption><span aria-hidden="true">✓</span> {L('Do', 'Nên')}</figcaption>
+      <div class:list={['ic-dd-stage', { 'is-zoom': item === 'align' || item === 'target' }]}>
+        {item === 'label' && (<span class="bh-button"><Fragment set:html={icon('refresh-cw', 16)} />{syncNow}</span>)}
+        {item === 'meaning' && (<span class="ic-row"><span class="bh-button"><Fragment set:html={icon('refresh-cw', 16)} />{syncNow}</span><span class="ic-ibtn" aria-hidden="true"><Fragment set:html={icon('refresh-cw', 16)} /></span></span>)}
+        {item === 'selected' && (
+          <span class="ic-nav"><span class="ic-nav-item is-selected"><Fragment set:html={icon('store', 16)} />{L('Stores', 'Cửa hàng')}</span><span class="ic-nav-item"><Fragment set:html={icon('receipt', 16)} />{L('Orders', 'Đơn hàng')}</span></span>
+        )}
+        {item === 'size' && (<span class="ic-text14"><Fragment set:html={icon('clock', 16)} />{L('Last sync 5 minutes ago', 'Đồng bộ lần cuối 5 phút trước')}</span>)}
+        {item === 'stroke' && (<span class="ic-row is-icons"><Fragment set:html={icon('store', 24)} /><Fragment set:html={icon('receipt', 24)} /><Fragment set:html={icon('package', 24)} /></span>)}
+        {item === 'align' && (<span class="ic-text14"><Fragment set:html={icon('calendar', 16)} />{L('Runs every day', 'Chạy hằng ngày')}</span>)}
+        {item === 'colour' && (<span class="ic-text14 is-danger"><Fragment set:html={icon('circle-x', 16)} />{L('Sync failed', 'Đồng bộ thất bại')}</span>)}
+        {item === 'target' && (<span class="ic-ibtn is-outlined" aria-hidden="true"><Fragment set:html={icon('pencil', 16)} /></span>)}
+        {item === 'tooltip' && (<span class="ic-tip-wrap"><span class="ic-tip">{L('Settings', 'Cài đặt')}</span><span class="ic-ibtn is-outlined" aria-hidden="true"><Fragment set:html={icon('settings', 16)} /></span></span>)}
+        {item === 'decorative' && (<code class="ic-dd-code">&lt;button&gt;&lt;RefreshCw /&gt; {syncNow}&lt;/button&gt;<br />{vi ? `Được đọc là: "${syncNow}, nút"` : `Read as: “${syncNow}, button”`}</code>)}
+      </div>
+      <p>{pairs[item].do}</p>
+    </figure>
+    <figure class="ic-dd-panel is-dont">
+      <figcaption><span aria-hidden="true">✕</span> {L('Don’t', 'Không nên')}</figcaption>
+      <div class:list={['ic-dd-stage', { 'is-zoom': item === 'align' || item === 'target' }]}>
+        {item === 'label' && (<span class="ic-ibtn is-outlined" aria-hidden="true"><Fragment set:html={icon('webhook', 16)} /></span>)}
+        {item === 'meaning' && (<span class="ic-row"><span class="bh-button"><Fragment set:html={icon('rotate-cw', 16)} />{syncNow}</span><span class="ic-ibtn" aria-hidden="true"><Fragment set:html={icon('repeat', 16)} /></span><span class="ic-ibtn" aria-hidden="true"><Fragment set:html={icon('refresh-ccw', 16)} /></span></span>)}
+        {item === 'selected' && (
+          <span class="ic-nav"><span class="ic-nav-item"><Fragment set:html={icon('store', 16, { fill: true, cls: 'is-filled' })} />{L('Stores', 'Cửa hàng')}</span><span class="ic-nav-item"><Fragment set:html={icon('receipt', 16)} />{L('Orders', 'Đơn hàng')}</span></span>
+        )}
+        {item === 'size' && (<span class="ic-text14 is-big"><Fragment set:html={icon('clock', 24)} />{L('Last sync 5 minutes ago', 'Đồng bộ lần cuối 5 phút trước')}</span>)}
+        {item === 'stroke' && (<span class="ic-row is-icons"><Fragment set:html={icon('store', 24, { stroke: 1 })} /><Fragment set:html={icon('receipt', 24, { stroke: 3 })} /><Fragment set:html={icon('package', 24, { stroke: 1.5 })} /></span>)}
+        {item === 'align' && (<span class="ic-text14 is-baseline"><Fragment set:html={icon('calendar', 16)} />{L('Runs every day', 'Chạy hằng ngày')}</span>)}
+        {item === 'colour' && (<span class="ic-text14"><Fragment set:html={icon('store', 16, { cls: 'is-decor' })} />{L('Online store', 'Cửa hàng online')}</span>)}
+        {item === 'target' && (<span class="ic-bare" aria-hidden="true"><Fragment set:html={icon('pencil', 16)} /></span>)}
+        {item === 'tooltip' && (<span class="ic-ibtn is-outlined" aria-hidden="true"><Fragment set:html={icon('settings', 16)} /></span>)}
+        {item === 'decorative' && (<code class="ic-dd-code">&lt;button&gt;&lt;svg role="img" aria-label="refresh-cw"&gt; {syncNow}&lt;/button&gt;<br />{vi ? `Được đọc là: "refresh-cw, ${syncNow}, nút"` : `Read as: “refresh-cw, ${syncNow}, button”`}</code>)}
+      </div>
+      <p>{pairs[item].dont}</p>
+    </figure>
+  </div>
+)}

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

@@ -0,0 +1,29 @@
+---
+import { feedbackHref } from '../lib/brand';
+import { langOf, t } from '../lib/i18n';
+
+// Shown in place of content on pages that are listed but not written yet.
+interface Props {
+  planned?: string[];
+}
+
+const { planned = [] } = Astro.props;
+const T = t(langOf(Astro.url.pathname));
+---
+
+<section class="in-development" aria-labelledby="in-development-title">
+  <div class="in-development-icon" aria-hidden="true">
+    <svg viewBox="0 0 24 24" width="24" height="24"><path d="M12 2.5l8.2 4.75v9.5L12 21.5l-8.2-4.75v-9.5z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" /><path d="M12 8v4.5l2.5 1.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" /></svg>
+  </div>
+  <div>
+    <p class="in-development-title" id="in-development-title">{T.inDevTitle}</p>
+    <p>{T.inDevText}</p>
+    {planned.length > 0 && (
+      <>
+        <p class="in-development-label">{T.inDevPlanned}</p>
+        <ul>{planned.map((item) => <li>{item}</li>)}</ul>
+      </>
+    )}
+    <p>{T.inDevSooner} <a href={feedbackHref(Astro.url.pathname)}>{T.inDevAsk}</a>.</p>
+  </div>
+</section>