wimui 0.16.0 → 0.18.0

package/dist/llms-full.txt

@@ -4,7 +4,7 @@
 
 ## What this is
 
-**wimui** v0.16.0 — a React 19 component library: 218 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
+**wimui** v0.18.0 — a React 19 component library: 218 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
 
 ## Install & required setup
 
@@ -72,16 +72,16 @@ Single components are judged by state/a11y/token compliance. **Composed screens*
 2. Contrast density: hero/showcase sparse, data regions (tables/lists) dense. Uniform "medium density" reads as AI.
 3. Never override a component's defaults via inline `style` (`padding:0`, `borderRadius:0`). Add a prop/token instead.
 4. Never hardcode gap/padding/size — use `--wim-spacing-*` tokens.
-5. Keep one radius stance per screen (`radius.component` / `radius.container` / `radius.overlay`); don't mix 0 and lg arbitrarily.
+5. Keep one radius stance per screen (`radius.component` / `radius.container` / `radius.overlay`); don't mix 0 and lg arbitrarily. Narrow table cards must share the same radius token as the adjacent toolbar/pagination chrome — not jump to `radius.container` while chrome stays on `radius.component`.
 6. Limit accent color: primary surfaces (solid buttons, emphasis backgrounds) 1–2 per view.
 7. Give demo content real substance (product-context copy, internally consistent numbers/dates/names — active ≤ total, dates not evenly spaced).
-8. Keep one elevation stance per screen: don't mix surfaces raised by shadow with surfaces cut by borders. `Card` and `Stats` default to `elevated`, so pass `variant="outline"` when the screen is border-led. If the outer container already casts a shadow, its contents need only a border.
+8. Keep one elevation stance per screen: don't mix surfaces raised by shadow with surfaces cut by borders. `Card` and `Stats` default to `elevated`, so pass `variant="outline"` when the screen is border-led. If the outer container already casts a shadow, its contents need only a border. On admin/list screens, `Table`/`DataGrid` mobile cards must stay border-only like the toolbar and pagination — row cards with `shadow-sm` while chrome is flat outline is the same mixed stance.
 9. Never wrap a component that already draws its own frame. `<Card><Table card /></Card>` doubles the border and nests radii (12px inside 4px). `Table` takes a `card` prop and `Stats` is already a Card — place them directly.
 10. Always pass `intent` on `Badge` / `Tag` / `Chip`. Their default is `primary` (the accent), so an ordinary value like `pending` or `member` gets painted as loudly as an exception and the colour stops carrying information. Use `intent="neutral"` for ordinary values.
 11. Pick colour by good/bad, not by direction. `Stats.Trend` ties the arrow and the colour together, so `up` is always the success colour — using it for a metric where up is bad (failures, error rate) renders the bad news as good. Use a colourless form such as `Stats.Description` instead. Don't approximate a meaning the API cannot express.
 12. Keep the chrome quiet. Breadcrumb, page title, summary line, toolbar and filter bar frame the content; they must not compete with the protagonist. Don't promote a one-line summary to an `Alert`/`Banner`, don't wrap the filter bar in a `Card` (its border doubles up with the data region's), keep primary surfaces out of the chrome, and don't stack a KPI tile row above a table screen. Corollary of protagonist and accent limits, but it is the rule most often broken on admin/list screens — the test is whether the eye lands on the data first.
 13. Add intentional "wobble": mix in 1–2 incomplete rows (a truncated long name, a missing optional field, an extreme value, an error/unread state) and show non-happy-path states (hover/focus/disabled/error/empty/loading).
-14. Check the screen at 390px and 768px before calling it done. The page itself must never scroll sideways (`document.scrollWidth > document.documentElement.clientWidth` is a bug — the usual cause is a group of controls that cannot wrap, e.g. several buttons packed into one `Toolbar.Group`; split them into separate groups). Data tables need their narrow mode turned on (`<DataGrid mobileCard>`) rather than an inner scrollbar: without it columns collapse and a short string like a `Code` lot number breaks one character per line. The switch to cards happens at the `md` container width, so tablets get cards too.
+14. Check the screen at 390px and 768px before calling it done. The page itself must never scroll sideways (`document.scrollWidth > document.documentElement.clientWidth` is a bug — the usual cause is a group of controls that cannot wrap, e.g. several buttons packed into one `Toolbar.Group`; split them into separate groups). Data tables need their narrow mode turned on (`<DataGrid mobileCard>` / `<Table mobileCard>`) rather than an inner scrollbar: without it columns collapse and a short string like a `Code` lot number breaks one character per line. The default card switch is `container-down(sm)` (576px). Wide grids that still overflow at tablet should pass `mobileCard="md"` so cards continue through 768px.
 
 ## Recipes — copy-paste starting points
 
@@ -863,7 +863,7 @@ Set `responsive={false}` to keep the sidebar in flow at every width.
     - `enterPreset: "none" | "fade" | "scale" | "slide-right" | "slide-left" | "slide-top" | "slide-bottom"` — 入りだけ別扱いにしたいときのプリセット。`"none"` で入りのアニメーションを止める。
 省略時は `preset` に従う。
 
-`Drawer` の `slideIn` / `slideOut` のように**片方だけ切りたい** API があるのに、
+`Drawer` の `slideIn` / `slideOut` のように片方だけ切りたい API があるのに、
 `preset` は両相を一括で決めるため表現できなかった（T58）。
     - `leavePreset: "none" | "fade" | "scale" | "slide-right" | "slide-left" | "slide-top" | "slide-bottom"` — 出だけ別扱いにしたいときのプリセット。`"none"` で出のアニメーションを止める。
     - `enter: string` = "" — Class applied during the enter transition
@@ -1844,6 +1844,16 @@ When a function is passed, it is called as (error, errorInfo, reset) => ReactNod
 @default "sm"
     - `message: string` — Loading message displayed below the indicator.
     - `fixed: boolean` = false — Whether to use position: fixed (covers the whole screen).
+
+When `false` (the default) the overlay is `position: absolute`, so it covers
+**the nearest positioned ancestor** — not necessarily the element you wrapped.
+Give that element a position explicitly, e.g. `<Box position="relative">`.
+
+`Card` sets `position: relative` for this reason (T88), so
+`<Card><LoadingOverlay /></Card>` covers the card. A plain `<div>` does not,
+and the overlay will spread to the viewport — measured at 1280x800 from the
+origin while the card it was meant to cover was 1248x75.
+
 @default false
     - `zIndex: number` — z-index of the overlay.
     - `children: React.ReactNode` — Custom loading content, replacing the default indicator.
@@ -2164,6 +2174,7 @@ Same derivation as `padding`. There is no `--wim-radius-xs` / `-3xl` /
     - `asChild: boolean` — Whether to use the Radix Slot pattern
 - **Chip** — Filter/Selection tokens (aka Pill, Token)
     - `asChild: boolean` = false — If true, the chip will be rendered as its child, merging its props onto that child.
+Cannot be combined with `onDelete` (T99).
     - `children: React.ReactNode` — Content to display
     - `content: React.ReactNode` — Content to display (alternative to children)
     - `onClick: (e: React.MouseEvent<HTMLButtonElement | HTMLSpanElement>) => void` — Click event. When provided, the chip behaves as a button.
@@ -2424,14 +2435,16 @@ Same derivation as `padding`. There is no `--wim-radius-xs` / `-3xl` /
     - `containerClassName: string` — Additional class name for the scroll container
     - `card: boolean` = false — Add outer border and border-radius to the container (DataGrid look)
 - **Tag** — Compact visual descriptors used for labeling or categorizing content
-    - `asChild: boolean` — If true, the tag will be rendered as its child, merging its props onto that child.
+    - `asChild: boolean` = false — If true, the tag will be rendered as its child, merging its props onto that child.
+Cannot be combined with `onDelete` — the delete control is a second element, and
+`asChild` requires a single React element child (T99).
     - `children: React.ReactNode` — Content to display
     - `content: React.ReactNode` — Content to display (alternative to children)
     - `intent: IndicatorIntent` — Intent (semantic state)
     - `variant: "solid" | "outline" | "subtle"` — Visual style variant
     - `size: Extract<ComponentSize, "sm" | "md" | "lg">` — Size
     - `icon: React.ReactNode` — Icon
-    - `onDelete: (e: React.MouseEvent<HTMLButtonElement>) => void` — Delete event. When provided, a × button is shown.
+    - `onDelete: (e: React.MouseEvent<HTMLButtonElement>) => void` — Delete event. When provided, a × button is shown. Incompatible with `asChild`.
     - `disabled: boolean` — Whether the tag is disabled
     - `interactive: boolean` = false — Whether to enable the interactive state
 - **Timeline** — A vertical list mapping events or history in chronological order

package/dist/llms.txt

@@ -4,7 +4,7 @@
 
 ## What this is
 
-**wimui** v0.16.0 — a React 19 component library: 218 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
+**wimui** v0.18.0 — a React 19 component library: 218 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
 
 ## Install & required setup
 
@@ -72,16 +72,16 @@ Single components are judged by state/a11y/token compliance. **Composed screens*
 2. Contrast density: hero/showcase sparse, data regions (tables/lists) dense. Uniform "medium density" reads as AI.
 3. Never override a component's defaults via inline `style` (`padding:0`, `borderRadius:0`). Add a prop/token instead.
 4. Never hardcode gap/padding/size — use `--wim-spacing-*` tokens.
-5. Keep one radius stance per screen (`radius.component` / `radius.container` / `radius.overlay`); don't mix 0 and lg arbitrarily.
+5. Keep one radius stance per screen (`radius.component` / `radius.container` / `radius.overlay`); don't mix 0 and lg arbitrarily. Narrow table cards must share the same radius token as the adjacent toolbar/pagination chrome — not jump to `radius.container` while chrome stays on `radius.component`.
 6. Limit accent color: primary surfaces (solid buttons, emphasis backgrounds) 1–2 per view.
 7. Give demo content real substance (product-context copy, internally consistent numbers/dates/names — active ≤ total, dates not evenly spaced).
-8. Keep one elevation stance per screen: don't mix surfaces raised by shadow with surfaces cut by borders. `Card` and `Stats` default to `elevated`, so pass `variant="outline"` when the screen is border-led. If the outer container already casts a shadow, its contents need only a border.
+8. Keep one elevation stance per screen: don't mix surfaces raised by shadow with surfaces cut by borders. `Card` and `Stats` default to `elevated`, so pass `variant="outline"` when the screen is border-led. If the outer container already casts a shadow, its contents need only a border. On admin/list screens, `Table`/`DataGrid` mobile cards must stay border-only like the toolbar and pagination — row cards with `shadow-sm` while chrome is flat outline is the same mixed stance.
 9. Never wrap a component that already draws its own frame. `<Card><Table card /></Card>` doubles the border and nests radii (12px inside 4px). `Table` takes a `card` prop and `Stats` is already a Card — place them directly.
 10. Always pass `intent` on `Badge` / `Tag` / `Chip`. Their default is `primary` (the accent), so an ordinary value like `pending` or `member` gets painted as loudly as an exception and the colour stops carrying information. Use `intent="neutral"` for ordinary values.
 11. Pick colour by good/bad, not by direction. `Stats.Trend` ties the arrow and the colour together, so `up` is always the success colour — using it for a metric where up is bad (failures, error rate) renders the bad news as good. Use a colourless form such as `Stats.Description` instead. Don't approximate a meaning the API cannot express.
 12. Keep the chrome quiet. Breadcrumb, page title, summary line, toolbar and filter bar frame the content; they must not compete with the protagonist. Don't promote a one-line summary to an `Alert`/`Banner`, don't wrap the filter bar in a `Card` (its border doubles up with the data region's), keep primary surfaces out of the chrome, and don't stack a KPI tile row above a table screen. Corollary of protagonist and accent limits, but it is the rule most often broken on admin/list screens — the test is whether the eye lands on the data first.
 13. Add intentional "wobble": mix in 1–2 incomplete rows (a truncated long name, a missing optional field, an extreme value, an error/unread state) and show non-happy-path states (hover/focus/disabled/error/empty/loading).
-14. Check the screen at 390px and 768px before calling it done. The page itself must never scroll sideways (`document.scrollWidth > document.documentElement.clientWidth` is a bug — the usual cause is a group of controls that cannot wrap, e.g. several buttons packed into one `Toolbar.Group`; split them into separate groups). Data tables need their narrow mode turned on (`<DataGrid mobileCard>`) rather than an inner scrollbar: without it columns collapse and a short string like a `Code` lot number breaks one character per line. The switch to cards happens at the `md` container width, so tablets get cards too.
+14. Check the screen at 390px and 768px before calling it done. The page itself must never scroll sideways (`document.scrollWidth > document.documentElement.clientWidth` is a bug — the usual cause is a group of controls that cannot wrap, e.g. several buttons packed into one `Toolbar.Group`; split them into separate groups). Data tables need their narrow mode turned on (`<DataGrid mobileCard>` / `<Table mobileCard>`) rather than an inner scrollbar: without it columns collapse and a short string like a `Code` lot number breaks one character per line. The default card switch is `container-down(sm)` (576px). Wide grids that still overflow at tablet should pass `mobileCard="md"` so cards continue through 768px.
 
 ## Recipes — copy-paste starting points
 

package/dist/locales/en/components.json

@@ -629,7 +629,8 @@
     "more": "More"
   },
   "command_palette": {
-    "no_results": "No results found."
+    "no_results": "No results found.",
+    "label": "Command palette"
   },
   "treeview": {
     "collapse": "Collapse {{label}}",

package/dist/locales/ja/components.json

@@ -629,7 +629,8 @@
     "accessibility": "視覚性"
   },
   "command_palette": {
-    "no_results": "該当する結果がありません。"
+    "no_results": "該当する結果がありません。",
+    "label": "コマンドパレット"
   },
   "treeview": {
     "collapse": "{{label}} を折りたたむ",

package/dist/locales/pt/components.json

@@ -629,7 +629,8 @@
     "accessibility": "Acessibilidade Visual"
   },
   "command_palette": {
-    "no_results": "Nenhum resultado encontrado."
+    "no_results": "Nenhum resultado encontrado.",
+    "label": "Paleta de comandos"
   },
   "treeview": {
     "collapse": "Recolher {{label}}",