@treeui/mcp 0.8.0 → 0.8.2

package/dist/{chunk-CEDY3OJ4.js → chunk-VPOHUNDH.js}

@@ -1,8 +1,8 @@
 // src/generated/treeui.catalog.json
 var treeui_catalog_default = {
-  generatedAt: "0.30.0",
+  generatedAt: "0.34.1",
   packageName: "@treeui/vue",
-  packageVersion: "0.30.0",
+  packageVersion: "0.34.1",
   decisionGuides: [
     {
       id: "single-choice",
@@ -125,7 +125,7 @@ var treeui_catalog_default = {
           ],
           notes: [
             "Editing, not display. For read-only key/value display use TDescriptionList.",
-            "A write-only/sensitive mode (value never read back) is a closed contract on the queue, not yet shipped."
+            "A write-only/sensitive mode (value never read back) is a designed contract that is not yet shipped."
           ]
         },
         {
@@ -423,8 +423,8 @@ var treeui_catalog_default = {
         "Put the lockup in the `header-start` slot, not `header`. Filling `header-start` switches the header to the shell's own grid, so the mark tracks `--tree-app-shell-sidebar-width` and animates with the collapse \u2014 no local column math.",
         'The slot is scoped: use its `collapsed` binding to drop the wordmark and keep only the mark (`v-if="!collapsed"`), rather than hiding text with CSS.',
         'Logo is `TAvatar` (`size`, `alt`, `initials` fallback) or a plain `<img>` sized with `--tree-size-icon-*`; name and subtitle are `TText` (`weight`, `tone="muted"`, `truncate`) \u2014 never raw `<strong>`/`<span>` with a local class.',
-        "TreeUI ships no `TBrand` component on purpose: the logo asset, the product name, and what survives collapse are product identity, which must stay in the consumer. See DECISIONS.md \u2192 Portability Boundary.",
-        "Company and service logos (AWS, LocalStack, social networks) are brand assets and are not TreeUI icons \u2014 source them from the app's brand policy, not the icon registry."
+        "TreeUI ships no `TBrand` component on purpose: the logo asset, the product name, and what survives collapse are product identity, which must stay in the consuming application. See DECISIONS.md \u2192 Portability Boundary.",
+        "Company and service logos are brand assets, not TreeUI icons \u2014 source them from your own brand assets rather than the icon registry."
       ]
     },
     {
@@ -462,7 +462,7 @@ var treeui_catalog_default = {
         "`TNavMenuItem.icon` is `TIconInput`, so a component is accepted too. Prefer the name: `items` normally lives in a `ref`, a `computed`, or a route config, and a string is never made reactive \u2014 a component object there needs `markRaw` or Vue warns.",
         "An item with no icon (or an unregistered name) falls back to a letter marker, and a `console.warn` lists the valid names \u2014 once per name, in production builds too. Give every item an icon before shipping a collapsible rail, or the collapsed state is a column of letters.",
         "Icons the app needs but TreeUI does not ship are REGISTERED, not worked around: one `registerTreeIcons` call in `main.ts` and they are usable by name everywhere. Never hand-roll an `<svg>` \u2014 without the `absoluteStrokeWidth` correction its stroke scales with the icon (1.67px at size 20, 4px at 48), so it looks bolder than its neighbours at every size above 24.",
-        "Check the name is not already taken before registering it \u2014 `hasTreeIcon(name)` answers that. Registering one of the 364 built-in names replaces that built-in everywhere, silently, which is a supported swap but never what you want when the goal was adding an icon.",
+        "Check the name is not already taken before registering it \u2014 `hasTreeIcon(name)` answers that. Registering one of the 370 built-in names replaces that built-in everywhere, silently, which is a supported swap but never what you want when the goal was adding an icon.",
         "Keep the icon vocabulary consistent: built-ins use TreeUI's descriptive kebab-case names, so register custom ones with the same convention.",
         "Icon registration is process-wide state. In component tests that register icons, call `resetTreeIcons()` in an `afterEach` so one case's icons do not leak into the next.",
         "Set `to` for the route target on each item \u2014 `TNavMenuItem` has no `href` and no `id`; identity is `value`.",
@@ -770,28 +770,41 @@ var treeui_catalog_default = {
         "Tab/Shift+Tab order, Escape to close, Enter/Space to activate, arrow keys where the pattern expects them.",
         "Overlays trap focus while open and restore it on close.",
         "Clickable targets stay at or above 44\xD744px.",
-        "Form control boundaries clear 3:1 against every surface (WCAG 1.4.11); decorative edges are a separate token and are not held to it."
+        "Form control boundaries clear 3:1 against every surface (WCAG 1.4.11); decorative edges are a separate token and are not held to it.",
+        "A panel anchored to a trigger is rendered in a layer no ancestor can clip, and is pushed back inside the viewport \u2014 a control that is painted off-screen or behind a clip is not operable.",
+        "Every string a screen reader announces is a prop with a default, never a hard-coded literal; a control whose only name is English is unusable in any other language."
       ],
       components: [
-        "TModal",
-        "TDrawer",
-        "TConfirmDialog",
-        "TDropdown",
-        "TTooltip",
         "TAccordion",
-        "TFormField",
-        "TTreeView",
-        "TToastProvider",
+        "TAppShell",
         "TButton",
+        "TCanvasSurface",
+        "TCheckbox",
         "TCodeBlock",
+        "TConfirmDialog",
+        "TDatePicker",
+        "TDrawer",
+        "TDropdown",
+        "TFileUpload",
+        "TFormField",
+        "TIconTile",
+        "TImage",
         "TLinkTile",
         "TMenu",
+        "TModal",
         "TPopover",
-        "TImage",
+        "TSelect",
         "TSkipLink",
-        "TAppShell",
-        "TCheckbox",
-        "TText"
+        "TStatGroup",
+        "TSteps",
+        "TTable",
+        "TTabs",
+        "TText",
+        "TToast",
+        "TToastProvider",
+        "TToggleGroup",
+        "TTooltip",
+        "TTreeView"
       ]
     },
     {
@@ -851,26 +864,45 @@ var treeui_catalog_default = {
         "Spacing comes from the --tree-space-* scale, applied by layout components.",
         "Compose TPage, TStack, TGrid, and TSplit before writing a custom layout div.",
         "Forms align through TFormField + TStack + TGrid \u2014 labels, hints, and errors line up by contract.",
-        "Reading widths and page gutters come from TContainer/TPage, not local max-widths."
+        "Reading widths and page gutters come from TContainer/TPage, not local max-widths.",
+        "A surface takes its container's width: it never grows to the min-content of something inside it. Card, modal and timeline surfaces declare an explicit minmax(0, 1fr) track, and text that can lack a break opportunity wraps, so scrolling and truncation belong to the descendant that asked for them \u2014 never to every sibling on the surface."
       ],
       components: [
-        "TStack",
-        "TGrid",
-        "TSplit",
-        "TContainer",
-        "TSpacer",
-        "TPage",
-        "TPageHeader",
-        "TFormField",
+        "TAppShell",
+        "TBadge",
         "TBrandLockup",
-        "TList",
+        "TCanvasSurface",
+        "TCard",
+        "TCodeBlock",
+        "TConfirmDialog",
+        "TContainer",
         "TDescriptionList",
-        "TSection",
+        "TEmptyState",
+        "TFormField",
+        "TGrid",
         "THero",
+        "THide",
+        "TIconTile",
+        "TLinkTile",
+        "TList",
+        "TModal",
+        "TNavMenu",
+        "TPage",
+        "TPageHeader",
         "TPageSurface",
+        "TSection",
         "TShow",
-        "THide",
-        "TEmptyState"
+        "TSpacer",
+        "TSparkline",
+        "TSplit",
+        "TStack",
+        "TStat",
+        "TStatGroup",
+        "TSteps",
+        "TTable",
+        "TTabs",
+        "TText",
+        "TTimeline"
       ]
     },
     {
@@ -897,6 +929,7 @@ var treeui_catalog_default = {
         "TColorSwatch",
         "TDescriptionList",
         "THero",
+        "TIconTile",
         "TImage",
         "TInput",
         "TKeyValueEditor",
@@ -910,6 +943,7 @@ var treeui_catalog_default = {
         "TSection",
         "TSelect",
         "TStat",
+        "TStatGroup",
         "TSwitch",
         "TTag",
         "TTagInput",
@@ -917,6 +951,24 @@ var treeui_catalog_default = {
         "TTextarea",
         "TToast"
       ]
+    },
+    {
+      id: "branchline-icons",
+      title: "Icons drawn to a contract",
+      summary: "Branchline is the drawing contract behind every shipped icon: one grid, one weight, one closed modifier vocabulary. It is checked rather than reviewed \u2014 the build renders each glyph and fails when two names look alike at 16px or when a shape draws nothing.",
+      rules: [
+        "One grid: a 24x24 canvas with geometry inside a 1.5-22.5 trim area, so a 2u stroke never clips; four keylines carry the set \u2014 square 17.5, circle 18.5 diameter, wide 18x14, tall 14x18 \u2014 and positions land on a 0.25u step.",
+        "One weight: 2u stroke, round caps and joins, currentColor and fill=none, all declared on the root <svg>. A child that sets stroke or fill breaks absoluteStrokeWidth and fails the build.",
+        "Legible at the size it ships at: every pair of canonical icons is rendered at 16px and must differ by at least 5% of its ink. The rule is measured by branchline.test.ts, not judged by eye.",
+        "A modifier gets territory of its own, and the base keeps its size: it is drawn inside bases that enclose space (shield, file, folder, calendar, ticket, message, square, badge, search) and in a cleared corner otherwise, where the base is redrawn at full size with that corner interrupted so 5.5u of canvas stays clear around the mark.",
+        "Every shape earns its place: each node is removed and re-rendered, and a node that changes less than 1% of the glyph's ink fails the build. Geometry is never derived from the icon's name.",
+        "A family shares one base, drawn once and reused literally; a variant changes exactly one thing, in one place, by one rule.",
+        "The metaphor is the conventional one \u2014 an icon is not the place to be original. A concept with no settled picture composes one from Branchline primitives, drawn deliberately rather than generated.",
+        "One concept, one canonical name, one drawing. A synonym is an alias that shares its target's geometry byte for byte, so mic and microphone can never drift apart."
+      ],
+      components: [
+        "TIcon"
+      ]
     }
   ],
   setup: {
@@ -931,7 +983,7 @@ var treeui_catalog_default = {
     },
     vueSetup: {
       pluginInstall: {
-        import: "import TreeUIPlugin from '@treeui/vue'",
+        import: "import { TreeUIPlugin } from '@treeui/vue'",
         usage: "app.use(TreeUIPlugin)"
       },
       individualImports: {
@@ -1554,7 +1606,7 @@ var treeui_catalog_default = {
           name: "showCollapseButton",
           type: "boolean",
           default: "true",
-          note: "Renders the built-in collapse toggle in the sidebar footer. Desktop only, and only when `collapsible` is set \u2014 no need to wire your own. Never rendered in the mobile drawer."
+          note: "Renders the built-in collapse toggle in the sidebar footer. Desktop only, and only when `collapsible` is set \u2014 no need to wire your own. Never rendered in the mobile drawer, and never inside the auto-rail band (between `breakpoint` and `railBreakpoint`): there the width decides the state, so the button could not change anything, did nothing when pressed, and announced the manual preference instead of what was on screen. Its `aria-expanded` and `aria-label` are derived from the EFFECTIVE collapsed state, as the glyph already was."
         },
         {
           name: "collapseLabel",
@@ -1638,7 +1690,7 @@ var treeui_catalog_default = {
         },
         {
           name: "header-end",
-          description: "Trailing header region for actions/controls, pinned to the far end of the row. Filling it adds `has-end`; in the plain flex header the content region's grow already pushes it to the end, and in the `has-start` grid it becomes a content-sized third column with the trailing padding. Replaces the consumer's own `TStack justify=flex-end` wrapper inside `#header`.\n",
+          description: "Trailing header region for actions/controls, pinned to the far end of the row. Filling it adds `has-end`; in the plain flex header the content region's grow already pushes it to the end, and in the `has-start` grid it becomes a content-sized third column with the trailing padding. Trailing alignment is the shell's own job, so header actions need no `TStack justify=flex-end` wrapper around them.\n",
           note: "AppShellSlotProps"
         },
         {
@@ -1692,6 +1744,7 @@ var treeui_catalog_default = {
         "menu_and_drawer_close_buttons_are_44px: true"
       ],
       behavior: [
+        "scroller_is_a_containing_block: `.t-app-shell__main` (and `.t-app-shell__sidebar-body`) carry `position: relative`. Without it an absolutely positioned descendant with auto insets \u2014 `.t-visually-hidden`, which this library itself uses for the TProgress label \u2014 anchored to the initial block instead of the panel: it was neither clipped nor scrolled with the panel, and it extended the DOCUMENT's scroll. The shell is `100dvh`, so the document is not supposed to scroll at all; it did, leaving an empty band below the shell.",
         "fills_viewport_full_width_and_height: true",
         "resets_body_margin_while_a_shell_is_mounted: body:has(.t-app-shell) { margin: 0 } \u2014 a deliberate global rule, scoped so it only applies to pages that mount a shell",
         "header_spans_full_width_above_sidebar_and_content: true",
@@ -1779,7 +1832,8 @@ var treeui_catalog_default = {
         "brand-lockup"
       ],
       practices: [
-        "accessible-by-default"
+        "accessible-by-default",
+        "content-alignment"
       ]
     },
     {
@@ -1990,6 +2044,18 @@ var treeui_catalog_default = {
             "lg"
           ],
           description: "Changes min-height and font-size only; inline padding is constant across sizes."
+        },
+        {
+          name: "truncate",
+          type: "boolean",
+          default: "false",
+          description: "Keep the label on one line and clip it with an ellipsis. Opt-in: the default is to wrap, because a status pill that silently loses the end of its text is worse than a two-line pill. Pass `label` alongside it so the full text reaches the `title` tooltip."
+        },
+        {
+          name: "label",
+          type: "string",
+          default: "undefined",
+          description: "The badge text. Only needed with `truncate`, which puts it in `title`; otherwise use the default slot."
         }
       ],
       events: [],
@@ -2012,8 +2078,10 @@ var treeui_catalog_default = {
         "tone_remaps_variant_color_variables: true",
         "tone_overrides_variant_danger_palette: true",
         "tone_neutral_has_no_stylesheet_rule: true",
+        'tint_ink_is_the_on_soft_token: The `soft` and `danger` variants paint their label with the tone\'s `*-on-soft` colour, never the tone\'s full-strength colour. `*-on-soft` is derived to clear AA on that exact tint and deepens as the tint deepens; the full-strength tone on its own tint measured below AA for eight of the ten tone/theme pairs, including `variant="soft" tone="neutral"`, which is both defaults. The mapping is declared in `@treeui/tokens` as `NATIVE_BADGE_TONES` and the stylesheet is tested against it.',
         "icon_wrapper_rendered_only_when_slot_filled: true",
-        "icon_renders_before_default_slot: true"
+        "icon_renders_before_default_slot: true",
+        "never_wider_than_its_container: The badge carries `max-inline-size: 100%` and `min-inline-size: 0`, so a long label wraps inside the container instead of pushing it. Wrapped lines use the UI line height with block padding rather than `line-height: 1`, at which a second line's ascenders touched the pill's border."
       ],
       selection: {
         keywords: [],
@@ -2031,6 +2099,7 @@ var treeui_catalog_default = {
       practices: [
         "predictable-api",
         "state-clarity",
+        "content-alignment",
         "token-driven"
       ]
     },
@@ -2221,7 +2290,7 @@ var treeui_catalog_default = {
           name: "href",
           type: "string",
           default: "undefined",
-          note: 'Anchor attributes (`href`, `target`, `rel`, `download`) are declared props and are only rendered when `as="a"`. They were fallthrough before, which typechecked as an error in a consumer\'s `strictTemplates` build even though a link button is the documented use of `as` (TREEUX-011, group 1).\n'
+          note: 'Anchor attributes (`href`, `target`, `rel`, `download`) are declared props and are only rendered when `as="a"`. They were fallthrough before, which typechecked as an error in a consumer\'s `strictTemplates` build even though a link button is the documented use of `as`.\n'
         },
         {
           name: "target",
@@ -2636,6 +2705,116 @@ var treeui_catalog_default = {
       recipes: [],
       practices: []
     },
+    {
+      name: "TCanvasSurface",
+      aliases: [],
+      package: "@treeui/vue",
+      kind: "data-display",
+      category: "Data Display",
+      status: "available",
+      purpose: "A sized, repaintable, hit-testable canvas for a data-driven drawing \u2014 a diagram, a graph, a custom plot.",
+      sourceFile: "packages/vue/src/components/TCanvasSurface.vue",
+      storyFile: "apps/docs/src/stories/CanvasSurface.stories.ts",
+      storyTitle: "Components/Data Display/Canvas Surface",
+      manifestFile: "docs/ai/COMPONENTS/canvas-surface.yaml",
+      props: [
+        {
+          name: "draw",
+          type: "(frame: CanvasSurfaceFrame) => void",
+          required: true,
+          note: "Paints the whole surface. Called on mount, on resize and on every `redraw()`. The context arrives already scaled to CSS pixels, so the drawing never does device-ratio arithmetic; it is expected to clear what it does not repaint.\n"
+        },
+        {
+          name: "height",
+          type: "number | string",
+          default: "320",
+          note: "Number is px, string is any CSS length. A diagram has no intrinsic height, so it is declared."
+        },
+        {
+          name: "cursor",
+          type: "string",
+          default: "undefined",
+          note: "Pointer over the surface. This cannot come from a stylesheet: the sensitive area is a rectangle inside the bitmap and no selector knows where it is. Bind it to whatever the consumer's hit-test just decided.\n"
+        },
+        {
+          name: "maxPixelRatio",
+          type: "number",
+          default: "2"
+        },
+        {
+          name: "ariaLabel",
+          type: "string",
+          default: "undefined",
+          note: "Sets role=img. A bitmap says nothing on its own."
+        },
+        {
+          name: "redrawKey",
+          type: "unknown",
+          default: "undefined",
+          note: "Repaint whenever this changes \u2014 pass the data, a version counter, or the theme. Deep-watched."
+        }
+      ],
+      events: [],
+      slots: [
+        {
+          name: "default",
+          description: "The long form of the drawing \u2014 a list, a table, the same data as markup. It lives inside the `<canvas>` element, which the browser exposes to assistive technology and never paints.\n"
+        }
+      ],
+      a11y: [
+        "Give it an ariaLabel; a canvas is opaque to assistive technology.",
+        "Put the same information in the default slot as markup \u2014 it is the accessible form, not a fallback.",
+        "Anything clickable inside the drawing needs a real control elsewhere, or a keyboard user cannot reach it."
+      ],
+      behavior: [
+        "repaints_on_demand_not_on_a_clock: true",
+        "backing_store_follows_the_element: true",
+        "pointer_events_reach_the_canvas: true",
+        "ssr_safe: Nothing touches the DOM outside onMounted."
+      ],
+      selection: {
+        keywords: [
+          "canvas",
+          "diagram",
+          "graph",
+          "node and edge",
+          "custom drawing",
+          "plot",
+          "topology",
+          "map",
+          "hit testing"
+        ],
+        useWhen: [
+          "The drawing is data-driven and no chart primitive expresses it \u2014 nodes and edges, a topology, a custom plot.",
+          "Parts of the drawing are click or hover targets.",
+          "It must repaint when the data, the locale or the theme changes."
+        ],
+        avoidWhen: [
+          "A line, area or bar chart says it \u2014 use TChart, which brings axes, legend, tooltip and an accessible table.",
+          "The drawing is ornament \u2014 use useDecorativeCanvas, which gates the loop on visibility and reduced motion.",
+          "The shape is an inline trend \u2014 use TSparkline."
+        ],
+        alternatives: [
+          {
+            component: "TChart",
+            when: "The data fits axes and categories."
+          },
+          {
+            component: "useDecorativeCanvas",
+            when: "It is decoration, not information."
+          }
+        ]
+      },
+      setup: {
+        required: [],
+        notes: []
+      },
+      recipes: [],
+      practices: [
+        "accessible-by-default",
+        "content-alignment"
+      ]
+    },
     {
       name: "TCard",
       aliases: [],
@@ -2709,6 +2888,9 @@ var treeui_catalog_default = {
         "unnamed_section_root: The default `section` root has no accessible name, so assistive tech exposes it as generic rather than as a region. The component sets no `inheritAttrs: false` and has a single root, so `aria-label` / `aria-labelledby` passed by the consumer fall through to that root when a named region is wanted."
       ],
       behavior: [
+        "surface_never_inflated_by_a_descendant: The surface and its body declare `grid-template-columns: minmax(0, 1fr)`. An implicit `auto` track takes its minimum from the min-content of its items, so one unbreakable descendant \u2014 a table, a code block, a machine string \u2014 behind any wrapper widened the whole surface and laid every sibling out past the border: `TText truncate` never engaged, the TTable wrapper's `overflow-x` never scrolled, and anything aligned to the end was painted outside the surface or over the neighbouring card.",
+        "title_wraps_instead_of_widening_the_card: `.t-card__title` carries `overflow-wrap: anywhere`. A title without spaces used to set the card's min-content width, and the `#header` slot was no way out because the same track was still `auto`.",
+        "actions_shrink_and_wrap: `.t-card__actions` is `flex-shrink: 1; min-inline-size: 0; flex-wrap: wrap`. It was `flex-shrink: 0`, so in a narrow card the controls were laid out past the border instead of moving to the next line \u2014 the header already wraps, and the actions now follow it.",
         "body_wrapper_class: t-card__body",
         "header_render_condition: The `header.t-card__header` element renders when ANY of the `header` slot, a truthy `title` prop, or the `actions` slot is present. All three branches are independent \u2014 actions alone still produces a header.",
         "footer_render_condition: The `footer.t-card__footer` element renders only when the `footer` slot is supplied.",
@@ -2751,6 +2933,7 @@ var treeui_catalog_default = {
       practices: [
         "interaction-feedback",
         "predictable-api",
+        "content-alignment",
         "token-driven"
       ]
     },
@@ -2767,6 +2950,18 @@ var treeui_catalog_default = {
       storyTitle: "Components/Data Display/Chart",
       manifestFile: "docs/ai/COMPONENTS/chart.yaml",
       props: [
+        {
+          name: "axisValueFormat",
+          type: "(value: number) => string",
+          default: "undefined",
+          description: "Formatter for the AXIS ticks only, falling back to `valueFormat`. The two have different jobs and the axis is the one with no room: a tooltip can spell `R$ 1.500.000.000,00` in full, while the same string on a y-axis at 320px eats the plot \u2014 and the space reserved for it is capped at 40% of the chart, so past that it clips. One formatter could not serve both."
+        },
+        {
+          name: "yAxisWidth",
+          type: "number",
+          default: "undefined",
+          description: "Fix the space reserved for the y-axis labels, in pixels. Left unset, the chart MEASURES the formatted ticks and reserves what they need \u2014 the margin used to be a flat 44px, which clipped a formatted `1,234,567`. Set it to line several charts up on a shared gutter."
+        },
         {
           name: "type",
           type: "TChartType",
@@ -2911,6 +3106,7 @@ var treeui_catalog_default = {
         "point-click has no keyboard equivalent \u2014 do not make it the only way to reach a behavior."
       ],
       behavior: [
+        "edge_x_labels_anchor_with_a_class_not_an_attribute: The first and last x labels carry `is-anchor-start` / `is-anchor-end`, not a `text-anchor` ATTRIBUTE. CSS always beats a presentation attribute, so `.t-chart__axis-label--x { text-anchor: middle }` silently won and the anchoring never applied \u2014 the last label kept rendering centred and hanging off the SVG.",
         "colors_auto_assign_from_chart_palette: --tree-color-chart-1..8, cycling by series index; per-series color overrides",
         "zero_baseline_for_bar_and_area: the y domain is extended to include 0 for bar and area; line uses the data extent. minY overrides it.",
         "y_domain_uses_nice_ticks: every type runs through niceScale, which rounds the min down and the max up to round numbers",
@@ -2937,7 +3133,7 @@ var treeui_catalog_default = {
         ],
         avoidWhen: [
           "A single value tells the story \u2014 use TStat.",
-          "You only need an inline trend with no axes \u2014 use TSparkline.",
+          "You only need an inline trend with no axes \u2014 use TSparkline (`fluid` fills the card width).",
           "The data is a part-of-whole breakdown \u2014 use TDonutChart."
         ],
         alternatives: [
@@ -3109,6 +3305,17 @@ var treeui_catalog_default = {
       storyTitle: "Components/Data Display/CodeBlock",
       manifestFile: "docs/ai/COMPONENTS/code-block.yaml",
       props: [
+        {
+          name: "size",
+          type: "TSize",
+          default: "md",
+          values: [
+            "sm",
+            "md",
+            "lg"
+          ],
+          description: "Density. Scales the type size and the padding of the `<pre>` by tokens, like every other sized component. `md` is what the block has always shipped; `sm` is for a block inside a dense surface \u2014 a table cell, a list row \u2014 where the fixed type size dominated the row."
+        },
         {
           name: "code",
           type: "string",
@@ -3157,7 +3364,10 @@ var treeui_catalog_default = {
         'scroll_region: The `<pre>` is `role="region"` + `tabindex="0"` + `aria-label` (from `label`) so keyboard users can scroll it \u2014 the library does this for you.',
         "copy_button_state: The copy button's aria-label reflects the copied state briefly."
       ],
-      behavior: [],
+      behavior: [
+        "copyable_reserves_the_toolbar_width: With the copy button rendered, `.t-code-block.is-copyable .t-code-block__pre` reserves its width as `padding-inline-end`. The toolbar floats over the code, so a wrapped line used to run underneath it and the characters behind the button were unreadable. This only became visible once `wrap` started breaking for real: before, the long token overflowed sideways and never reached the button.",
+        'wrap_reduces_the_min_content: `.t-code-block.is-wrap .t-code-block__pre` uses `overflow-wrap: anywhere`, not `break-word`. `break-word` breaks only once a width is already settled, so wherever the block\'s width came from its content \u2014 a grid `auto` track, a table cell, a flex item without `min-width: 0` \u2014 the longest run without a break opportunity became the minimum width and pushed the container instead of wrapping. That is precisely the case `wrap` exists for: a URL, a token, a credential. Same semantics as `TText wrap="anywhere"`.'
+      ],
       selection: {
         keywords: [
           "code",
@@ -3195,6 +3405,7 @@ var treeui_catalog_default = {
       recipes: [],
       practices: [
         "accessible-by-default",
+        "content-alignment",
         "token-driven"
       ]
     },
@@ -3716,6 +3927,7 @@ var treeui_catalog_default = {
         "icon_slot_marked_aria_hidden: true"
       ],
       behavior: [
+        "surface_never_inflated_by_a_descendant: `.t-confirm-dialog` and its body declare `grid-template-columns: minmax(0, 1fr)`, and the icon variant uses `auto minmax(0, 1fr)`. It inherits TModal's title and description wrapping, which is what keeps confirm and cancel on the surface when the dialog names a long resource \u2014 it passes `title`/`description` as strings and exposes no `#header` slot, so there was no way around it from the API.",
         "built_on_modal_contract: true",
         "default_confirm_button_variant: danger",
         "default_cancel_button_variant: ghost",
@@ -3761,7 +3973,8 @@ var treeui_catalog_default = {
         "confirm-destructive-action"
       ],
       practices: [
-        "accessible-by-default"
+        "accessible-by-default",
+        "content-alignment"
       ]
     },
     {
@@ -4141,6 +4354,8 @@ var treeui_catalog_default = {
         "focus_is_not_trapped_and_tab_leaves_the_open_calendar: true"
       ],
       behavior: [
+        'panel_is_teleported_to_the_body: The calendar panel renders through `<Teleport to="body">` and is placed with `position: fixed` from the trigger\'s viewport rect by `useAnchoredLayer`. It used to be absolutely positioned inside the root, so inside a `TModal` it was trapped in the surface and clipped. Query it from `document.body` in tests.',
+        'month_title_capitalises_only_its_first_letter: `text-transform: capitalize` uppercased every word, which in most locales hits a particle in the middle of the title \u2014 pt-BR\'s "setembro de 2026" rendered as "Setembro De 2026". The rule is now `none` plus a `::first-letter` uppercase.',
         "value_format: YYYY-MM-DD",
         "controlled_and_uncontrolled_open: true",
         "open_state_emits_are_deduped: true",
@@ -4189,7 +4404,9 @@ var treeui_catalog_default = {
         ]
       },
       recipes: [],
-      practices: []
+      practices: [
+        "accessible-by-default"
+      ]
     },
     {
       name: "TDateTimePicker",
@@ -4630,6 +4847,7 @@ var treeui_catalog_default = {
         "Provide a meaningful ariaLabel describing what the chart shows."
       ],
       behavior: [
+        "legend_label_is_the_flexible_column: `.t-donut-chart__legend-label` is `flex: 1 1 0` with `min-width: 0` and an ellipsis, and `.t-donut-chart__legend-value` is `flex: 0 0 auto`. A 60-character label used to push the value out of the card. The full text is carried in `title`, since truncation hides data the chart is meant to show.",
         "colors_auto_assign_from_chart_palette: --tree-color-chart-1..8, cycling by visible-segment index; per-segment color overrides",
         "hovering_a_slice_dims_the_rest_and_updates_center: the other segments get is-dimmed, the hovered donut segment grows to thickness + 4, and its legend row gets is-active",
         "hovering_a_legend_row_drives_the_same_highlight: legend items carry the same pointerenter/pointerleave handlers as the segments",
@@ -5203,6 +5421,48 @@ var treeui_catalog_default = {
       storyTitle: "Components/Data Entry/FileUpload",
       manifestFile: "docs/ai/COMPONENTS/file-upload.yaml",
       props: [
+        {
+          name: "uploadingLabel",
+          type: "string",
+          default: "Uploading files",
+          description: "Accessible name for the spinner shown while `loading`."
+        },
+        {
+          name: "uploadedAnnouncement",
+          type: "(name: string) => string",
+          default: "(n) => `${n} uploaded.`",
+          description: "What the live region announces when a file succeeds. A function, because the file name sits inside the sentence and its position differs by language."
+        },
+        {
+          name: "failedAnnouncement",
+          type: "(name: string) => string",
+          default: "(n) => `${n} failed.`",
+          description: "The same, for a failure. The error text is appended after it."
+        },
+        {
+          name: "showRejections",
+          type: "boolean",
+          default: "true",
+          description: "Render the built-in rejection messages. Turn it off when the product already surfaces `files-rejected` in its own alert \u2014 otherwise the user reads the same refusal twice, and the embedded copy is the one that cannot be placed where the product wants it. The event fires either way."
+        },
+        {
+          name: "clearLabel",
+          type: "string",
+          default: "Clear all",
+          description: "Label for the button that drops every selected file. It was hard-coded English with no way out."
+        },
+        {
+          name: "removeLabel",
+          type: "string",
+          default: "Remove",
+          description: "Label for a row's remove button."
+        },
+        {
+          name: "removeAriaLabel",
+          type: "(file: File) => string",
+          default: "(f) => `Remove ${f.name}`",
+          description: "Accessible name for a row's remove button. A function, not a string, because the file name sits INSIDE the sentence and its position differs by language \u2014 a prefix and a suffix cannot express that."
+        },
         {
           name: "modelValue",
           type: "File[]",
@@ -5411,6 +5671,7 @@ var treeui_catalog_default = {
         "remove_and_retry_meet_the_44px_target: true"
       ],
       behavior: [
+        "a_rejection_follows_the_active_language: A rejection is held as DATA (the file and the reason) and formatted during render. It used to be stored as its rendered string, frozen at refusal time, so switching language afterwards left the old sentence on screen \u2014 the one piece of copy in this component that could not be retranslated.",
         "accepts_files_from_input_drop_and_paste: true",
         "multiple_false_replaces_existing_selection: true",
         "accept_maxFiles_and_maxFileSize_apply_to_all_entry_points: true",
@@ -5462,7 +5723,9 @@ var treeui_catalog_default = {
       recipes: [
         "page-drop-target"
       ],
-      practices: []
+      practices: [
+        "accessible-by-default"
+      ]
     },
     {
       name: "TFlag",
@@ -5775,6 +6038,12 @@ var treeui_catalog_default = {
           name: "dense",
           type: "boolean",
           default: "false"
+        },
+        {
+          name: "balance",
+          type: "boolean",
+          default: "false",
+          note: 'Let the last row divide itself among the items it has instead of leaving empty tracks to its right \u2014 five cards over four tracks read as "one card failed to load". `auto-fit` cannot do it: it collapses a track only when that track is empty on EVERY row, so the remainder row keeps the widths of the rows above it. Balanced mode lays out with flex, where each line sizes itself: full rows are identical to the grid, only the remainder is shared out. Ignored when `columns` is set, since a declared track count already answers the same question.\n'
         }
       ],
       events: [],
@@ -5788,6 +6057,7 @@ var treeui_catalog_default = {
       ],
       behavior: [
         "semantic_element_controlled_by_as: true",
+        "balance_shares_the_last_row_instead_of_leaving_holes: true",
         "fixed_columns_supported: true",
         "auto_fit_columns_supported: true",
         "dense_mode_uses_grid_auto_flow_dense: true"
@@ -6080,6 +6350,7 @@ var treeui_catalog_default = {
             "calendar-plus",
             "calendar-range",
             "calendar-x",
+            "campaign",
             "carousel",
             "catalog",
             "chart-column",
@@ -6116,7 +6387,6 @@ var treeui_catalog_default = {
             "companion",
             "compass",
             "connections",
-            "contentpilot",
             "copy",
             "cpu",
             "cpu-chip",
@@ -6362,8 +6632,6 @@ var treeui_catalog_default = {
             "tickets",
             "timeline",
             "timer",
-            "toggle-left",
-            "toggle-right",
             "token-input",
             "token-output",
             "trail",
@@ -6401,10 +6669,18 @@ var treeui_catalog_default = {
         },
         {
           name: "size",
-          type: "number | string",
+          type: "number | TIconSize",
           default: "20",
-          description: "Pixel size for both width and height of the rendered svg.",
-          note: 'This is a PIXEL COUNT, not the sm | md | lg token scale used by nearly every\nother TreeUI component. `<TIcon size="md" />` does not fail loudly: it writes\nwidth="md" / height="md" onto the svg, which the browser discards, so the\nicon becomes unsized and stretches to fill its container. Pass a number\n(20, 32) or a numeric string ("20"). To size an icon from tokens, leave `size`\nalone and set width/height in CSS from the icon scale \u2014 --tree-size-icon-sm |\n-md | -lg | -xl | -2xl (1rem / 1.25rem / 1.5rem / 2rem / 3rem) \u2014 which is what\nTLanguageSelect\'s switcher variant does.\n'
+          values: [
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl",
+            "<number of pixels>"
+          ],
+          description: "A token name from the icon scale, or a pixel number.",
+          note: '`size` used to be `number | string`, which meant `<TIcon size="sm" />`\ntype-checked, wrote width="sm" onto the svg, and left the icon unsized \u2014\nit then stretched to fill its container, measured at 300px in the report\nthat produced this change. It now takes either a NUMBER of pixels or one\nof the icon-scale token names, which map to the same values as\n--tree-size-icon-sm | -md | -lg | -xl | -2xl (16 / 20 / 24 / 32 / 48 px).\nAn unrecognised string is a compile error in TypeScript and, for\nJavaScript consumers, falls back to the default size with a console\nwarning in development rather than rendering at an arbitrary size.\nA free-form CSS length is no longer accepted: set width/height in CSS\nfrom the icon scale instead, which is what TLanguageSelect\'s switcher\nvariant does.\n'
         },
         {
           name: "strokeWidth",
@@ -6434,7 +6710,7 @@ var treeui_catalog_default = {
       behavior: [
         "unknown_name_renders_nothing: An unregistered name makes `resolveTreeIcon` return `undefined`, and `TIcon`'s `v-if` then renders no element at all \u2014 no empty box, no placeholder, no error. A `console.warn` names the missing icon, suggests the `registerTreeIcons` call, and lists every valid name. It warns once per NAME (not per message \u2014 the message embeds the valid-name list, which changes on every registration), so a miss inside a render loop cannot flood the console. The warning is NOT gated on `process.env.NODE_ENV`: it fires in production builds too, deliberately, because a missing icon is a misconfiguration worth hearing about once and `process` is undefined in most browser bundles. Components with a marker fallback (TNavMenu) show that instead \u2014 see nav-menu.yaml.",
         'absolute_stroke_width_math: Icons draw on `viewBox="0 0 24 24"` with the svg sized to `size`, so painted pixels = (stroke-width attribute) * size / 24. With `absoluteStrokeWidth` (the default) the attribute is set to `(strokeWidth * 24) / size`, which cancels the scale: at the default `strokeWidth: 2` the attribute is 2.4 at size 20, 1.5 at 32, and 1.0 at 48 \u2014 a constant 2px painted at every size. That is the entire point of the correction: a 48px icon sits beside a 20px one at the same optical weight. A `size` of 0 or a non-numeric value keeps the nominal stroke rather than producing NaN/Infinity. Setting `absoluteStrokeWidth: false` pins the attribute at `strokeWidth`, which is the hand-rolled behaviour: the painted stroke then scales WITH the icon (1.67px at 20, 2.67px at 32, 4px at 48 \u2014 double the library weight).',
-        "icons_are_built_lazily_and_cached: Geometry lives in a data registry; a component is created on first lookup and reused after that, so an unused icon stays as DATA instead of becoming a `defineComponent`. Note what this does not claim: the geometry for all 364 built-ins is retained by any import of the package (the registry copies `builtinTreeIconNodes` into a `Map` at module scope, so a live reference exists and nothing tree-shakes it away \u2014 `sideEffects: false` does not change that). The saving is component construction, not bundle bytes.",
+        "icons_are_built_lazily_and_cached: Geometry lives in a data registry; a component is created on first lookup and reused after that, so an unused icon stays as DATA instead of becoming a `defineComponent`. Note what this does not claim: the geometry for all 370 built-ins is retained by any import of the package (the registry copies `builtinTreeIconNodes` into a `Map` at module scope, so a live reference exists and nothing tree-shakes it away \u2014 `sideEffects: false` does not change that). The saving is component construction, not bundle bytes.",
         "resolved_per_render: TIcon resolves its name in a computed, not once at setup, so an icon registered after the component mounted still appears.",
         "migration_aliases: Twelve compatibility names resolve to the same geometry as their canonical names: grid \u2192 layout-grid, share \u2192 share-nodes, chevron-updown \u2192 chevrons-up-down, refresh \u2192 refresh-cw, comment/chat \u2192 message-circle, check-square \u2192 square-check, help \u2192 circle-help, automations \u2192 zap, connections \u2192 external-link, persona \u2192 user-round, and close \u2192 x.",
         "company_logos_are_app_owned: Company logos are not built-ins. When an application needs one, it imports the official SVG as its own component and passes or registers that component under an application-owned name."
@@ -6484,7 +6760,89 @@ var treeui_catalog_default = {
       recipes: [
         "nav-menu-icons"
       ],
-      practices: []
+      practices: [
+        "branchline-icons"
+      ]
+    },
+    {
+      name: "TIconTile",
+      aliases: [],
+      package: "@treeui/vue",
+      kind: "display",
+      category: "Data Display",
+      status: "available",
+      purpose: "A registered icon on a toned ground, sized and coloured so the glyph reads at phone size.",
+      sourceFile: "packages/vue/src/components/TIconTile.vue",
+      storyFile: "apps/docs/src/stories/IconTile.stories.ts",
+      storyTitle: "Components/Data Display/IconTile",
+      manifestFile: "docs/ai/COMPONENTS/icon-tile.yaml",
+      props: [
+        {
+          name: "name",
+          type: "TIconName",
+          default: "undefined",
+          description: "Registry name. Use the default slot for a glyph that is not registered."
+        },
+        {
+          name: "tone",
+          type: "TIconTileTone",
+          default: "brand",
+          values: [
+            "brand",
+            "neutral",
+            "success",
+            "warning",
+            "danger",
+            "info"
+          ],
+          description: "Selects the `--tree-icon-tile-accent` / `--tree-icon-tile-soft` pair. The ink is the tone's full-strength colour on its own `*-soft` tint, which is the pairing that tint is derived for."
+        },
+        {
+          name: "size",
+          type: "TSize",
+          default: "md",
+          values: [
+            "sm",
+            "md",
+            "lg"
+          ],
+          description: "2rem / 2.75rem / 3.5rem. The glyph steps with the tile (16 / 20 / 24px) so the ink keeps its proportion of the pill."
+        },
+        {
+          name: "label",
+          type: "string",
+          default: "undefined",
+          description: "Accessible name. Omit it when the tile sits beside a heading that already says the same thing \u2014 the glyph is then decoration, and a screen reader reading it twice is noise."
+        }
+      ],
+      events: [],
+      slots: [
+        {
+          name: "default"
+        }
+      ],
+      a11y: [
+        "semantic_element: span",
+        'role_img_only_when_named: With `label` the tile is `role="img"` with that name; without it, `aria-hidden`. There is no third state where a glyph is announced as nothing.',
+        "contrast_floor: 3:1, measured. An icon is a non-text UI component under WCAG 1.4.11, so the floor is 3:1 and not the 4.5:1 a badge has to clear \u2014 a badge carries a word. `packages/tokens/src/icon-tile-contrast.test.ts` measures every tone in both themes and fails the build below the floor, the same way the badge's own floor is held."
+      ],
+      behavior: [],
+      selection: {
+        keywords: [],
+        useWhen: [],
+        avoidWhen: [],
+        alternatives: []
+      },
+      setup: {
+        required: [],
+        notes: []
+      },
+      recipes: [],
+      practices: [
+        "accessible-by-default",
+        "content-alignment",
+        "token-driven"
+      ]
     },
     {
       name: "TImage",
@@ -6607,7 +6965,7 @@ var treeui_catalog_default = {
           name: "modelValue",
           type: "T",
           default: "undefined",
-          note: "Generic over `T extends string | number`, so a `ref<number>` binds without a cast and `update:modelValue` pays back a number. `<script setup>` was widening every model to `string | number`, which under a consumer's `strictTemplates` made a numeric field a type error at the call site with no correct way to write it (TREEUX-011, group 3). When `T` is `number` the component parses the raw input value and only falls back to the raw string when it does not parse.\n"
+          note: "Generic over `T extends string | number`, so a `ref<number>` binds without a cast and `update:modelValue` pays back a number. `<script setup>` was widening every model to `string | number`, and widening makes a numeric field a type error under `strictTemplates`, with no correct way to write the binding. When `T` is `number` the component parses the raw input value and only falls back to the raw string when it does not parse.\n"
         },
         {
           name: "size",
@@ -7319,7 +7677,9 @@ var treeui_catalog_default = {
         "aria_current: `page` when `current`.",
         "focus_visible: Focus ring on the tile."
       ],
-      behavior: [],
+      behavior: [
+        "default_slot_does_not_stretch_its_children: `.t-link-tile__body` is `align-items: flex-start`, not the `stretch` default. The default slot is where a consumer drops a TTag or a TBadge, and stretch made a four-character tag as wide as the description. Title and description are TText and still wrap to the available width."
+      ],
       selection: {
         keywords: [
           "tile",
@@ -7355,6 +7715,7 @@ var treeui_catalog_default = {
       practices: [
         "interaction-feedback",
         "accessible-by-default",
+        "content-alignment",
         "token-driven"
       ]
     },
@@ -7401,7 +7762,8 @@ var treeui_catalog_default = {
         "not_selectable: For a single-select list of options use TSelectableList instead."
       ],
       behavior: [
-        "responsive: On a container narrower than 30rem the row wraps: meta drops below the content while actions stay visible inline. Actions are NEVER hidden or auto-collapsed into an overflow menu \u2014 compose a TMenu inside the actions slot deliberately if an overflow is wanted (uses a CSS container query; the list sets container-type).",
+        "actions_take_their_own_line_in_a_narrow_container: Inside the existing `@container (max-width: 30rem)` query, `.t-list-item__actions` becomes `flex-basis: 100%; order: 2; flex-wrap: wrap; justify-content: flex-end`. Rigid actions used to squeeze the content column down to 40\u2013110px rather than moving below it \u2014 the meta already dropped to its own line, and the actions now follow the same rule. Actions are still never hidden or auto-collapsed into an overflow menu; that stays a deliberate consumer choice.",
+        "responsive: On a container narrower than 30rem the row wraps: meta drops below the content while actions stay visible inline, and the leading slot stays on the first line of the content \u2014 the wrap is for the meta only. Actions are NEVER hidden or auto-collapsed into an overflow menu \u2014 compose a TMenu inside the actions slot deliberately if an overflow is wanted (uses a CSS container query; the list sets container-type).",
         "no_overflow_ownership: TList does not create, own, or collapse an actions overflow."
       ],
       selection: {
@@ -7564,7 +7926,7 @@ var treeui_catalog_default = {
       kind: "overlay",
       category: "Overlay",
       status: "available",
-      purpose: "Rich action menu in a popover \u2014 slot-driven compound with groups, icons, descriptions, meta, destructive items, link items, and a radio (workspace-switch) item, with roving focus and keyboard support. Built on TPopover, so anchoring and focus restore come from there (TREEUX-015).",
+      purpose: "Rich action menu in a popover \u2014 slot-driven compound with groups, icons, descriptions, meta, destructive items, link items, and a radio (workspace-switch) item, with roving focus and keyboard support. Built on TPopover, so anchoring and focus restore come from there.",
       sourceFile: "packages/vue/src/components/TMenu.vue",
       storyFile: "apps/docs/src/stories/Menu.stories.ts",
       storyTitle: "Components/Overlay/Menu",
@@ -7809,6 +8171,10 @@ var treeui_catalog_default = {
         "escape_closes_when_enabled: true"
       ],
       behavior: [
+        "surface_never_inflated_by_a_descendant: The surface and its body declare `grid-template-columns: minmax(0, 1fr)`. An implicit `auto` track takes its minimum from the min-content of its items, so one unbreakable descendant \u2014 a table, a code block, a machine string \u2014 behind any wrapper widened the whole surface and laid every sibling out past the border: `TText truncate` never engaged, the TTable wrapper's `overflow-x` never scrolled, and anything aligned to the end was painted outside the surface or over the neighbouring card.",
+        "only_the_body_scrolls: `.t-modal__surface` is a flex column with `overflow: hidden`, and `.t-modal__body` is the single scroller (`flex: 1 1 auto; min-block-size: 0; overflow: auto`). The whole surface used to scroll, so on a short viewport the footer's actions sat below the fold and the title scrolled away with the content. A flex column also removes the implicit `auto` track, which is the other half of the inflation above.",
+        "title_and_description_wrap: `.t-modal__title` and `.t-modal__description` carry `overflow-wrap: anywhere` \u2014 `anywhere`, not `break-word`, because only `anywhere` reduces the min-content. A confirm dialog exists to name the thing being deleted, and a resource name without a break opportunity used to push confirm and cancel off the surface at any width, desktop included.",
+        "a_child_overlay_must_be_teleported: Because the surface now clips, a panel rendered inside it would be cut off. TSelect's listbox and TDatePicker's panel teleport to the body for exactly this reason; a consumer composing its own overlay inside a modal should do the same with `useAnchoredLayer`.",
         "uses_teleport_to_body: true",
         "locks_body_scroll_while_open: true",
         "overlay_click_closes_when_enabled: true",
@@ -7853,7 +8219,8 @@ var treeui_catalog_default = {
       ],
       practices: [
         "accessible-by-default",
-        "predictable-api"
+        "predictable-api",
+        "content-alignment"
       ]
     },
     {
@@ -8199,6 +8566,7 @@ var treeui_catalog_default = {
         "aria_disabled: on link items when disabled"
       ],
       behavior: [
+        "labels_wrap_rather_than_scroll_the_sidebar: `.t-nav-menu__list` and `.t-nav-menu__copy` declare `grid-template-columns: minmax(0, 1fr)`, and the label and description carry `overflow-wrap: anywhere`. A sidebar is the one place a horizontal scrollbar is never the right answer, and an item label without a break opportunity used to give it one.",
         "can_be_controlled_or_uncontrolled: true",
         "can_inherit_collapsed_state_from_sidebar: true",
         "supports_rich_item_rendering_via_slot: true"
@@ -8246,7 +8614,8 @@ var treeui_catalog_default = {
         "responsive-navigation"
       ],
       practices: [
-        "interaction-feedback"
+        "interaction-feedback",
+        "content-alignment"
       ]
     },
     {
@@ -8265,7 +8634,7 @@ var treeui_catalog_default = {
         {
           name: "modelValue",
           type: "number | null",
-          note: "`null` is REAL, not an error state: clearing the field is empty, and the component emits `null` for it. So `v-model` needs a `ref<number | null>`, and a `ref<number>` is a genuine type error under a consumer's `strictTemplates` rather than a gap in the library. This is the one place in the round where the checker was right and the call site was wrong \u2014 the others (TInput, TTabs, TToggleGroup) were the library's fault.\n"
+          note: "`null` is REAL, not an error state: clearing the field is empty, and the component emits `null` for it. So `v-model` needs a `ref<number | null>`, and a `ref<number>` is a genuine type error under `strictTemplates` rather than a gap in the library \u2014 here the binding is what has to widen, not the model. The opposite of TInput/TTabs/TToggleGroup, where the library's own model type was too wide and no narrow ref could bind it.\n"
         },
         {
           name: "min",
@@ -8513,6 +8882,7 @@ var treeui_catalog_default = {
         "Actions area holds standard focusable controls (e.g. TButton) \u2014 no custom roles added."
       ],
       behavior: [
+        "slot_presence_is_read_during_render: The template tests `$slots.title` / `$slots.subtitle` directly instead of a `computed` over `useSlots()`. The computed cached its first answer, so a `v-if`'d title slot that appeared later never rendered, and one that disappeared left an empty `<h1>` behind. This is the arrangement TCard already used for `$slots.header`.",
         "title_and_subtitle_optional: true",
         "heading_level_controlled_by_level: true",
         "actions_area_right_aligned_and_wraps: true",
@@ -9533,14 +9903,14 @@ var treeui_catalog_default = {
       props: [
         {
           name: "modelValue",
-          type: "string | number",
-          default: ""
+          type: "T",
+          default: "undefined"
         },
         {
           name: "options",
-          type: "TSelectOption[]",
+          type: "TSelectOption<T>[]",
           default: "[]",
-          note: "Array of { label: string; value: string | number; disabled?: boolean }"
+          note: "Array of { label: string; value: T; disabled?: boolean }"
         },
         {
           name: "open",
@@ -9636,7 +10006,9 @@ var treeui_catalog_default = {
         "outside_click_closes_dropdown: true",
         "focus_restores_on_close: true",
         "numeric_values_supported_without_string_coercion: true",
-        "listbox_flips_above_trigger_when_space_below_is_insufficient: true"
+        "listbox_flips_above_trigger_when_space_below_is_insufficient: true",
+        "option_label_wraps_instead_of_being_clipped: `.t-select__option` carries `overflow-wrap: anywhere`, so a label without a break opportunity wraps inside the listbox rather than overflowing it and being cut off.",
+        "listbox_is_teleported_to_the_body: The listbox renders through `<Teleport to=\"body\">` and is placed with `position: fixed` from the trigger's viewport rect by the `useAnchoredLayer` composable, matching the trigger's width. It used to be positioned inside the root, which meant ANY ancestor with `overflow` clipped it \u2014 the TTable wrapper cut it off and a modal trapped it. Consequences for tests: the listbox is not a descendant of the component's root element, so query it from `document.body`."
       ],
       selection: {
         keywords: [
@@ -9674,6 +10046,7 @@ var treeui_catalog_default = {
       ],
       practices: [
         "interaction-feedback",
+        "accessible-by-default",
         "predictable-api",
         "token-driven"
       ]
@@ -10147,7 +10520,9 @@ var treeui_catalog_default = {
         "Hit area is `--tree-size-control-lg` (48px) tall, above the 44px target floor.",
         "The label must say where it goes; the library does not supply one."
       ],
-      behavior: [],
+      behavior: [
+        "hidden_link_paints_no_shadow: `.t-skip-link:not(:focus-visible)` sets `box-shadow: none`. The box is translated off-screen while hidden, but a 14px offset with a 34px blur is not: it painted a grey smudge in the top-left of every header, at every width, all the time. The shadow belongs to the focused state, which is when the link is actually on screen."
+      ],
       selection: {
         keywords: [
           "skip link",
@@ -10372,6 +10747,12 @@ var treeui_catalog_default = {
           default: "false",
           note: "Marker on the final point (line/area)."
         },
+        {
+          name: "fluid",
+          type: "boolean",
+          default: "false",
+          note: "Fill the parent's width; `width` stays the viewBox. The height is unchanged on purpose \u2014 a sparkline is a band, and growing in both directions turns it into a chart that lies about its precision. Strokes use `non-scaling-stroke`, so the pen keeps its declared width.\n"
+        },
         {
           name: "ariaLabel",
           type: "string",
@@ -10387,7 +10768,8 @@ var treeui_catalog_default = {
       behavior: [
         "no_axes_or_legend: true",
         "flat_series_renders_centered: true",
-        "scales_to_intrinsic_width_and_height: true"
+        "scales_to_intrinsic_width_and_height: true",
+        "fluid_fills_parent_width: true"
       ],
       selection: {
         keywords: [
@@ -10427,7 +10809,9 @@ var treeui_catalog_default = {
       recipes: [
         "metric-dashboard"
       ],
-      practices: []
+      practices: [
+        "content-alignment"
+      ]
     },
     {
       name: "TSpinner",
@@ -10786,6 +11170,33 @@ var treeui_catalog_default = {
       storyTitle: "Components/Data Display/Stat",
       manifestFile: "docs/ai/COMPONENTS/stat.yaml",
       props: [
+        {
+          name: "variant",
+          type: "TStatVariant",
+          default: "card (plain inside a TStatGroup)",
+          values: [
+            "card",
+            "plain"
+          ],
+          description: "Whether the tile draws its own card. `plain` keeps the padding, the type and the tones and drops the border, radius, shadow and background. Inside a `TStatGroup` the default flips to `plain`, because the group owns the surface; an explicit value always wins. A stat drawing its own card inside a TCard is a card within a card \u2014 doubled frame, summed padding, and eight of them read as eight objects rather than one row of figures."
+        },
+        {
+          name: "metaPlacement",
+          type: "'top' | 'bottom'",
+          default: "top",
+          description: 'Where the `meta` note sits. `top` shares the label\'s line; `bottom` puts it under the value, for the reading order of an indicator with a footnote. It is also a height fix: on the shared line a long label and a long note do not fit, the note wraps onto a line of its own ABOVE the value, and that one tile grows \u2014 the grid then stretches the whole row and every sibling shows an empty band. With `bottom` the DOM follows the visual order, so the announced order is label, value, note. Different from `emphasis="value"`, which promotes the FIGURE and takes the label down with it.'
+        },
+        {
+          name: "size",
+          type: "TSize",
+          default: "md",
+          values: [
+            "sm",
+            "md",
+            "lg"
+          ],
+          description: "Density. `sm` lowers the value's floor from 1.5rem to 1.125rem and tightens the padding, which is what lets two stats share a row on a phone \u2014 at the default floor a formatted negative currency does not fit, so a grid of six indicators collapsed into one tall column. The value still scales to its card through the container query, not to the viewport."
+        },
         {
           name: "label",
           type: "string",
@@ -10832,6 +11243,16 @@ var treeui_catalog_default = {
           name: "loading",
           type: "boolean",
           default: "false"
+        },
+        {
+          name: "emphasis",
+          type: "TStatEmphasis",
+          default: "label",
+          values: [
+            "label",
+            "value"
+          ],
+          note: 'Which half leads. `label` is the dashboard reading \u2014 the eye is scanning for what is measured. `value` puts the figure first, for a marketing band where the number IS the argument; it also keeps a row of figures on one baseline, because the labels above them no longer have to be the same height. Visual order only: the DOM keeps label before value, so the announcement stays "Requests served, 4.2M".\n'
         }
       ],
       events: [],
@@ -10858,6 +11279,7 @@ var treeui_catalog_default = {
       ],
       behavior: [
         "value_and_trend_are_optional: true",
+        "emphasis_reorders_visually_not_in_the_dom: true",
         "icon_slot_adds_visual_emphasis: true",
         "trend_indicator_changes_with_direction: true",
         "loading_renders_internal_skeleton_placeholders: true"
@@ -10895,6 +11317,76 @@ var treeui_catalog_default = {
         "metric-dashboard"
       ],
       practices: [
+        "content-alignment",
+        "token-driven"
+      ]
+    },
+    {
+      name: "TStatGroup",
+      aliases: [],
+      package: "@treeui/vue",
+      kind: "layout",
+      status: "available",
+      purpose: "A row of indicators sharing one surface, with a hairline between cells.",
+      sourceFile: "packages/vue/src/components/TStatGroup.vue",
+      manifestFile: "docs/ai/COMPONENTS/stat-group.yaml",
+      props: [
+        {
+          name: "label",
+          type: "string",
+          default: "undefined",
+          description: 'Accessible name for the band. Sets `aria-label` on a `role="group"`, so the row is announced as one unit rather than as a run of unrelated figures.'
+        },
+        {
+          name: "columns",
+          type: "number",
+          default: "undefined",
+          description: "Fixed track count. Leave unset to let `minItemWidth` decide."
+        },
+        {
+          name: "minItemWidth",
+          type: "string",
+          default: "12rem",
+          description: "Smallest a cell may get before a track is dropped. Same meaning as on TGrid."
+        },
+        {
+          name: "balance",
+          type: "boolean",
+          default: "false",
+          description: "Let the last row share itself out. Off by default here, unlike TGrid, and deliberately: a stat's value scales to its own cell (`container-type: inline-size`), so a lone cell stretched across the last row prints a number visibly larger than its siblings', and size on a dashboard reads as importance. An orphan beside empty space is the lesser mistake. The real fix for a band is a track count that divides the figures \u2014 set `columns`, or a `minItemWidth` that lands on one."
+        }
+      ],
+      events: [],
+      slots: [
+        {
+          name: "default"
+        }
+      ],
+      a11y: [
+        "semantic_element: div",
+        "role: group",
+        "naming: `label` is what makes the band a named unit. Without it the group has no accessible name and is announced as an unlabelled grouping."
+      ],
+      behavior: [
+        'children_render_plain_without_being_told: The group provides a context that TStat reads, so every child defaults to `variant="plain"` inside it. The alternative is the consumer repeating `variant="plain"` on all eight, which is the alignment busywork this library exists to absorb \u2014 and which goes wrong on the ninth one added later. An explicit `variant` on a child still wins.',
+        "the_track_is_a_TGrid: Composed, not re-implemented, so `columns`, `minItemWidth` and `balance` behave exactly as they do everywhere else. `gap` is 0: the cells have to meet for the hairline to be a shared edge, and the breathing room comes from each cell's own padding.",
+        "hairlines_survive_reflow: Every cell carries a start and a top line as pseudo-elements, and the track is pulled back one pixel so the outermost pair falls outside the clipped box. A cell that reflows onto a new row keeps its top line and becomes the first of its row, where its start line is the one being clipped \u2014 nothing hanging on the outer edge, nothing doubled between neighbours. `:nth-child` cannot express this, because which cell starts a row depends on a track count only the browser knows.",
+        "pseudo_elements_not_borders: A border would land on the child's own `border-width`. The contract is that a cell in a band measures as frameless from the outside \u2014 `border-width` is actually 0 \u2014 so the lines are drawn beside the cell rather than on it."
+      ],
+      selection: {
+        keywords: [],
+        useWhen: [],
+        avoidWhen: [],
+        alternatives: []
+      },
+      setup: {
+        required: [],
+        notes: []
+      },
+      recipes: [],
+      practices: [
+        "accessible-by-default",
+        "content-alignment",
         "token-driven"
       ]
     },
@@ -10907,7 +11399,7 @@ var treeui_catalog_default = {
       kind: "navigation",
       category: "Navigation",
       status: "available",
-      purpose: "Stepper component for visualizing workflow progress, with optional interactive selection.",
+      purpose: "Ordered sequence \u2014 a wizard to operate, or a described flow to read.",
       sourceFile: "packages/vue/src/components/TSteps.vue",
       storyFile: "apps/docs/src/stories/Steps.stories.ts",
       storyTitle: "Components/Navigation/Steps",
@@ -10951,7 +11443,20 @@ var treeui_catalog_default = {
         {
           name: "interactive",
           type: "boolean",
-          default: "false"
+          default: "false",
+          note: "Whether a step can be picked. False \u2014 the default \u2014 renders inert boxes: no button in the accessibility tree, no disabled wash, and no step elected current unless `modelValue`/`defaultValue` or an item `status` says so. A described sequence used to render one dead control per step, at 60% opacity, with the first step ringed as if the reader were standing on it.\n"
+        },
+        {
+          name: "columns",
+          type: "number",
+          default: "undefined",
+          note: "Fixed steps per row, horizontal only. Use for a sequence with a shape (3 + 3)."
+        },
+        {
+          name: "minItemWidth",
+          type: "string",
+          default: "14rem",
+          note: "Width at which a step stops shrinking and the strip wraps. Same axis as TGrid."
         }
       ],
       events: [
@@ -10967,10 +11472,13 @@ var treeui_catalog_default = {
       a11y: [
         "semantic_root: ol",
         "current_step_uses_aria_current_step: true",
-        "interactive_variant_uses_buttons: true"
+        "interactive_variant_uses_buttons: true",
+        "static_variant_emits_no_control: true"
       ],
       behavior: [
         "can_be_controlled_or_uncontrolled: true",
+        "static_variant_elects_no_current_step: true",
+        "shared_box_class_is_t_steps_box: true",
         "status_can_be_explicit_or_computed: true",
         "alias_export_available: true"
       ],
@@ -11001,7 +11509,10 @@ var treeui_catalog_default = {
         ]
       },
       recipes: [],
-      practices: []
+      practices: [
+        "accessible-by-default",
+        "content-alignment"
+      ]
     },
     {
       name: "TSwitch",
@@ -11108,11 +11619,23 @@ var treeui_catalog_default = {
       storyTitle: "Components/Data Display/Table",
       manifestFile: "docs/ai/COMPONENTS/table.yaml",
       props: [
+        {
+          name: "stackBelow",
+          type: "TBreakpoint",
+          default: "undefined",
+          values: [
+            "sm",
+            "md",
+            "lg",
+            "xl"
+          ],
+          description: "Below this CONTAINER width the grid becomes one block per row: the column marked `stack=\"title\"` is the block's heading, the rest sit under it, and each value carries its column's label because the header row is gone. Above it the table is unchanged, horizontal scroll included. Measured on the wrapper and not the viewport \u2014 a table can sit in a narrow panel on a wide screen, which is the case a media query cannot see. A breakpoint name and not a free length: a container query cannot read a custom property in its condition, so an arbitrary value would need a ResizeObserver per table."
+        },
         {
           name: "columns",
           type: "TTableColumn[]",
           required: true,
-          description: "Array of column definitions with key, label, sortable, align, and width."
+          description: "Array of column definitions with key, label, sortable, align, width, and minWidth."
         },
         {
           name: "rows",
@@ -11154,6 +11677,35 @@ var treeui_catalog_default = {
           type: "(row, index) => 'default' | 'muted'",
           required: false,
           description: "Semantic per-row state applied by data, not position, so it survives sorting. `muted` recesses a row (e.g. a resource that no longer exists) via `t-table__row--muted`, written at compound specificity so it wins over the zebra/hover rules."
+        },
+        {
+          name: "rowHref",
+          type: "(row: Record<string, unknown>, index: number) => string | undefined",
+          default: "undefined",
+          description: 'The row NAVIGATES: a real `href` per row, rendered as an `<a>` in the first cell and stretched over the whole row via `::after`, so ctrl/middle-click, "open in new tab", and the status-bar URL all work and the accessible role is `link`. Mutually exclusive with `rowTo` and `rowActivatable` \u2014 dev builds warn. The affordance follows the RESOLVED target: a row whose function returns `undefined` renders no link and gets no pointer.'
+        },
+        {
+          name: "rowTo",
+          type: "(row: Record<string, unknown>, index: number) => string | undefined",
+          default: "undefined",
+          description: "Same as `rowHref`, resolved through the app's RouterLink instead of a plain `<a>`."
+        },
+        {
+          name: "rowLabel",
+          type: "(row: Record<string, unknown>, index: number) => string",
+          default: "undefined",
+          description: "Accessible name for the row's activator, per row \u2014 used by BOTH `rowHref`/`rowTo` and `rowActivatable`. Required with the former and strongly advised with the latter: without it the name is every cell concatenated, repeated for every row."
+        },
+        {
+          name: "rowActivatable",
+          type: "boolean",
+          default: "false",
+          description: 'The row ACTIVATES something that is not a route \u2014 a modal, a selection. Renders a real `<button>` in the first cell, stretched over the row the same way `rowHref` does, rather than `role="button"` on the `<tr>`, which would make every cell presentational and destroy the table\'s grid semantics. Mutually exclusive with `rowHref`/`rowTo` \u2014 dev builds warn.'
+        },
+        {
+          name: "expandedRow",
+          type: "string | number | null",
+          description: "Key of the row whose detail panel is open, matched against the identity `rowKey` resolves."
         }
       ],
       events: [
@@ -11161,6 +11713,11 @@ var treeui_catalog_default = {
           name: "sort",
           description: "Emitted when a sortable column header is clicked.",
           payload: "TTableSortState"
+        },
+        {
+          name: "row-activate",
+          description: "Emitted when an activatable row is activated without navigating \u2014 see `rowActivatable`.",
+          payload: "[row: Record<string, unknown>, index: number]"
         }
       ],
       slots: [
@@ -11175,6 +11732,10 @@ var treeui_catalog_default = {
         {
           name: "empty",
           description: "Content shown when rows array is empty."
+        },
+        {
+          name: "detail",
+          description: "Detail panel for the expanded row, rendered as a `<tr>` adjacent to its own row. Receives `{ row, index }`."
         }
       ],
       a11y: [
@@ -11185,7 +11746,11 @@ var treeui_catalog_default = {
         "keyboard: Sortable headers are focusable and activated with Enter or Space.",
         "scope: col on all th elements."
       ],
-      behavior: [],
+      behavior: [
+        'roles_are_declared_rather_than_implied: `role` is on the table, both rowgroups, every row, every column header and every cell. Each is the element\'s own implicit role, so nothing changes while `display: table` holds \u2014 they exist to survive stacked mode, where `display: block` drops the implicit table semantics in several screen readers and the block would be announced as a run of unrelated text. Measured in the accessibility tree: a stacked cell reads as "Saldo real R$ 1.284,30", carrying its column.',
+        "containment_is_scoped_to_tables_that_use_it: `container-type: inline-size` applies `contain: layout inline-size style`, so it is set only on a wrapper carrying a `stack-below` modifier rather than on every table in the library.",
+        "a_row_link_covers_the_whole_block: Outside stacked mode every cell after the first is raised above the stretched-link overlay, because those are neighbouring columns and one may hold a button. Stacked, those same cells are plain text under the title, and raising them punched a hole in the link. Inside the container query only cells that actually contain something focusable are raised \u2014 and never the first, which holds the overlay: positioning it makes it the overlay's containing block, and `inset: 0` then covers that cell alone."
+      ],
       selection: {
         keywords: [
           "table",
@@ -11220,7 +11785,9 @@ var treeui_catalog_default = {
       ],
       practices: [
         "interaction-feedback",
-        "state-clarity"
+        "accessible-by-default",
+        "state-clarity",
+        "content-alignment"
       ]
     },
     {
@@ -11240,7 +11807,7 @@ var treeui_catalog_default = {
           name: "modelValue",
           type: "T",
           default: "undefined",
-          note: "The value of the currently active tab; use with v-model. Generic over `T extends string`, so a `ref<'overview' | 'logs'>` keeps its literal union instead of being widened to `string` \u2014 under a consumer's `strictTemplates` that widening made the binding an error with no correct way to write it (TREEUX-011, group 3).\n"
+          note: "The value of the currently active tab; use with v-model. Generic over `T extends string`, so a `ref<'overview' | 'logs'>` keeps its literal union instead of being widened to `string` \u2014 widening makes the binding an error under `strictTemplates`, with no correct way to write it.\n"
         },
         {
           name: "defaultValue",
@@ -11290,6 +11857,7 @@ var treeui_catalog_default = {
         "aria_controls_aria_labelledby_pairing: true"
       ],
       behavior: [
+        "overflowing_tabs_scroll_within_their_own_strip: `.t-tabs__list` is `overflow-x: auto` with `overscroll-behavior-x: contain`. Tabs that did not fit pushed the PAGE sideways, which moves every other element on screen to solve a problem belonging to one component. TTabList scrolls the active tab into view whenever the active value changes, so a tab reached by keyboard or restored from a model value is never left off-strip.",
         "arrow_left_right_moves_focus: true",
         "home_focuses_first_tab: true",
         "end_focuses_last_tab: true",
@@ -11329,7 +11897,9 @@ var treeui_catalog_default = {
         "router-backed-tabs"
       ],
       practices: [
-        "interaction-feedback"
+        "interaction-feedback",
+        "accessible-by-default",
+        "content-alignment"
       ]
     },
     {
@@ -11667,6 +12237,17 @@ var treeui_catalog_default = {
           ],
           note: "Break axis for a string with no break opportunity \u2014 an id, ARN, API key or hash is one long word, so it overflows its box. `truncate` is the wrong answer when the string IS what the reader came to copy: an ellipsis makes an id useless. `anywhere` breaks at any character (and sets `min-inline-size: 0`, without which a flex or grid child still refuses to shrink below its longest word and never breaks); `break-word` only breaks a word that would otherwise overflow. Ignored when `truncate` is set.\n"
         },
+        {
+          name: "align",
+          type: "TTextAlign",
+          default: "undefined",
+          values: [
+            "start",
+            "center",
+            "end"
+          ],
+          note: "How the LINES sit inside the box, which is the other half of `TStack align` \u2014 that one centres the box, and a centred box only looks centred while it is narrow: at full width the paragraph inside reads left-aligned. Renders block, because `text-align` does nothing on an inline box that shrink-wraps its content. Logical values, so `start`/`end` follow the writing direction. Combined with `measure`, `center` also centres the capped block itself.\n"
+        },
         {
           name: "balance",
           type: "boolean",
@@ -11707,6 +12288,7 @@ var treeui_catalog_default = {
         "Choose `as` to convey the correct semantics (e.g. headings via h1\u2013h6); TText adds only visual styling."
       ],
       behavior: [
+        'the_wrap_axis_outranks_preserve_whitespace: `.t-text.t-text--wrap-anywhere` is qualified with `.t-text` so it matches the (0,2,0) specificity of `.t-text.is-pre-wrap`, and wins by order. Without it `preserveWhitespace` silently downgraded `wrap="anywhere"` to `break-word`, which is the one thing `anywhere` exists to do differently: only `anywhere` reduces the min-content.',
         "semantic_element_controlled_by_as: true",
         "token_driven_size_tone_weight: true",
         "truncate_takes_precedence_over_preserve_whitespace: true"
@@ -11728,6 +12310,7 @@ var treeui_catalog_default = {
       practices: [
         "accessible-by-default",
         "predictable-api",
+        "content-alignment",
         "token-driven"
       ]
     },
@@ -11744,6 +12327,12 @@ var treeui_catalog_default = {
       storyTitle: "Components/Data Entry/Textarea",
       manifestFile: "docs/ai/COMPONENTS/textarea.yaml",
       props: [
+        {
+          name: "spellcheck",
+          type: "boolean",
+          default: "undefined",
+          description: 'A real `<textarea>` attribute that the declared surface was missing. It matters most with `family="mono"`: a JSON or config editor wants the spell-checker to stop underlining keys, ARNs and identifiers.'
+        },
         {
           name: "modelValue",
           type: "string",
@@ -11817,7 +12406,7 @@ var treeui_catalog_default = {
             "sans",
             "mono"
           ],
-          note: "Font family of the editable content, same vocabulary as TText. `mono` is for machine text \u2014 JSON, a policy document, a payload \u2014 which otherwise leaves a `.mono` class behind in the consumer's stylesheet. Applied to the `<textarea>`, not the label wrapper, which also holds the loading spinner.\n"
+          note: "Font family of the editable content, same vocabulary as TText. `mono` is for machine text \u2014 JSON, a policy document, a payload \u2014 which otherwise needs a one-off `.mono` font-family rule in product CSS. Applied to the `<textarea>`, not the label wrapper, which also holds the loading spinner.\n"
         }
       ],
       events: [
@@ -11917,6 +12506,7 @@ var treeui_catalog_default = {
         "timestamp_uses_time_element_when_provided: true"
       ],
       behavior: [
+        "content_stays_inside_the_container: `.t-timeline` and `.t-timeline__content` declare `grid-template-columns: minmax(0, 1fr)`, and the title and description carry `overflow-wrap: anywhere`. Together they stop an unbreakable string from setting the column's min-content and carrying the whole entry across the container.",
         "items_render_in_order_given: true",
         "line_hidden_on_last_item: true",
         "marker_tone_defaults_to_neutral: true"
@@ -11932,7 +12522,9 @@ var treeui_catalog_default = {
         notes: []
       },
       recipes: [],
-      practices: []
+      practices: [
+        "content-alignment"
+      ]
     },
     {
       name: "TToast",
@@ -11947,6 +12539,12 @@ var treeui_catalog_default = {
       storyTitle: "Components/Feedback/Toast",
       manifestFile: "docs/ai/COMPONENTS/toast.yaml",
       props: [
+        {
+          name: "closeLabel",
+          type: "string",
+          default: "Dismiss notification",
+          description: "Accessible name for the dismiss button, on `TToastProvider` as the instance default and on a single toast's options to override it. It was hard-coded English, which left the toast's only control unreadable to a screen reader in any other language."
+        },
         {
           name: "toast",
           type: "ToastItem",
@@ -12006,6 +12604,7 @@ var treeui_catalog_default = {
         "confirm-destructive-action"
       ],
       practices: [
+        "accessible-by-default",
         "token-driven"
       ]
     },
@@ -12026,7 +12625,7 @@ var treeui_catalog_default = {
           name: "modelValue",
           type: "TToggleGroupModel<T, M> \u2014 `T` in single mode, `T[]` in multiple",
           default: "undefined",
-          note: "Generic over the option type AND the selection mode, so the model is the type the call site actually has: `<TToggleGroup v-model=\"view\">` with a `ref<'grid' | 'list'>` binds, and `selectionMode=\"multiple\"` binds a `('grid' | 'list')[]`. It was `string | string[]` in and `string | string[] | undefined` out, which no literal-union ref could bind under a consumer's `strictTemplates` \u2014 the same defect as TTabs/TInput (TREEUX-011, group 3), found by the gate once it ran on the same `vue-tsc` major consumers use. `undefined` was never actually emitted.\n"
+          note: "Generic over the option type AND the selection mode, so the model is the type the binding actually has: `<TToggleGroup v-model=\"view\">` with a `ref<'grid' | 'list'>` binds, and `selectionMode=\"multiple\"` binds a `('grid' | 'list')[]`. It was `string | string[]` in and `string | string[] | undefined` out, which no literal-union ref could bind under `strictTemplates` \u2014 the same defect as TTabs/TInput, and invisible to any build that does not typecheck templates against the published types. `undefined` was never actually emitted.\n"
         },
         {
           name: "options",
@@ -12087,6 +12686,7 @@ var treeui_catalog_default = {
         "activation_keys_select_option: true"
       ],
       behavior: [
+        'selected_item_repaints_its_descendants_secondary_text: `.t-toggle-group__item.is-selected` rebinds `--tree-color-text-muted` to `--tree-color-brand-contrast`. Only the inherited colour used to change, so a `TText tone="muted"` in the `#option` slot kept reading the muted token and measured 1.18:1 (light) and 1.09:1 (dark) over the brand fill, where `xs` text needs 4.5:1. Rebinding the token is what keeps a slot the library does not control legible; `brand-contrast` is the only value that clears AA in both themes (5.19:1 / 6.21:1) \u2014 a `color-mix` at 85% still measured 4.18:1.',
         "single_and_multiple_modes: true",
         "variant_changes_visual_style_only: true",
         "visible_option_set_expected: true"
@@ -12127,7 +12727,9 @@ var treeui_catalog_default = {
         ]
       },
       recipes: [],
-      practices: []
+      practices: [
+        "accessible-by-default"
+      ]
     },
     {
       name: "TTooltip",
@@ -13276,25 +13878,25 @@ var treeui_catalog_default = {
     {
       cssVar: "--tree-color-status-success",
       path: "color.status.success",
-      value: "#1a7f37",
+      value: "#197d36",
       category: "color",
       derived: false,
       description: "Themed semantic color, resolved per [data-tree-theme].",
       themeValues: {
-        light: "#1a7f37",
-        dark: "#59ac5c"
+        light: "#197d36",
+        dark: "#5bae5e"
       }
     },
     {
       cssVar: "--tree-color-status-warning",
       path: "color.status.warning",
-      value: "#956400",
+      value: "#946300",
       category: "color",
       derived: false,
       description: "Themed semantic color, resolved per [data-tree-theme].",
       themeValues: {
-        light: "#956400",
-        dark: "#c69026"
+        light: "#946300",
+        dark: "#c99227"
       }
     },
     {
@@ -13600,25 +14202,25 @@ var treeui_catalog_default = {
     {
       cssVar: "--tree-color-status-success-hover",
       path: "color.status.success-hover",
-      value: "#15682d",
+      value: "#15672c",
       category: "color",
       derived: true,
       description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
       themeValues: {
-        light: "#15682d",
-        dark: "#77bb79"
+        light: "#15672c",
+        dark: "#79bd7b"
       }
     },
     {
       cssVar: "--tree-color-status-success-press",
       path: "color.status.success-press",
-      value: "#125625",
+      value: "#115525",
       category: "color",
       derived: true,
       description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
       themeValues: {
-        light: "#125625",
-        dark: "#8ec790"
+        light: "#115525",
+        dark: "#8fc892"
       }
     },
     {
@@ -13630,31 +14232,31 @@ var treeui_catalog_default = {
       description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
       themeValues: {
         light: "#dfede3",
-        dark: "#2a3a34"
+        dark: "#2a3a35"
       }
     },
     {
       cssVar: "--tree-color-status-success-soft-hover",
       path: "color.status.success-soft-hover",
-      value: "#c3decb",
+      value: "#c3ddcb",
       category: "color",
       derived: true,
       description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
       themeValues: {
-        light: "#c3decb",
-        dark: "#314a3a"
+        light: "#c3ddcb",
+        dark: "#314a3b"
       }
     },
     {
       cssVar: "--tree-color-status-success-border",
       path: "color.status.success-border",
-      value: "#419559",
+      value: "#419359",
       category: "color",
       derived: true,
       description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
       themeValues: {
-        light: "#419559",
-        dark: "#4d9052"
+        light: "#419359",
+        dark: "#4f9154"
       }
     },
     {
@@ -13672,49 +14274,49 @@ var treeui_catalog_default = {
     {
       cssVar: "--tree-color-status-success-on-soft",
       path: "color.status.success-on-soft",
-      value: "#197934",
+      value: "#187733",
       category: "color",
       derived: true,
       description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
       themeValues: {
-        light: "#197934",
-        dark: "#61b064"
+        light: "#187733",
+        dark: "#63b266"
       }
     },
     {
       cssVar: "--tree-color-status-success-on-soft-hover",
       path: "color.status.success-on-soft-hover",
-      value: "#15672d",
+      value: "#156b2e",
       category: "color",
       derived: true,
       description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
       themeValues: {
-        light: "#15672d",
-        dark: "#85c287"
+        light: "#156b2e",
+        dark: "#80c082"
       }
     },
     {
       cssVar: "--tree-color-status-warning-hover",
       path: "color.status.warning-hover",
-      value: "#7a5200",
+      value: "#795100",
       category: "color",
       derived: true,
       description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
       themeValues: {
-        light: "#7a5200",
-        dark: "#d0a44d"
+        light: "#795100",
+        dark: "#d3a64e"
       }
     },
     {
       cssVar: "--tree-color-status-warning-press",
       path: "color.status.warning-press",
-      value: "#654400",
+      value: "#654300",
       category: "color",
       derived: true,
       description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
       themeValues: {
-        light: "#654400",
-        dark: "#d8b46b"
+        light: "#654300",
+        dark: "#dab56c"
       }
     },
     {
@@ -13744,13 +14346,13 @@ var treeui_catalog_default = {
     {
       cssVar: "--tree-color-status-warning-border",
       path: "color.status.warning-border",
-      value: "#a77f2c",
+      value: "#a67e2c",
       category: "color",
       derived: true,
       description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
       themeValues: {
-        light: "#a77f2c",
-        dark: "#a37a28"
+        light: "#a67e2c",
+        dark: "#a57b29"
       }
     },
     {
@@ -13768,25 +14370,25 @@ var treeui_catalog_default = {
     {
       cssVar: "--tree-color-status-warning-on-soft",
       path: "color.status.warning-on-soft",
-      value: "#8e5f00",
+      value: "#8d5e00",
       category: "color",
       derived: true,
       description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
       themeValues: {
-        light: "#8e5f00",
-        dark: "#c99631"
+        light: "#8d5e00",
+        dark: "#cc9732"
       }
     },
     {
       cssVar: "--tree-color-status-warning-on-soft-hover",
       path: "color.status.warning-on-soft-hover",
-      value: "#805600",
+      value: "#7f5500",
       category: "color",
       derived: true,
       description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
       themeValues: {
-        light: "#805600",
-        dark: "#d5ad5f"
+        light: "#7f5500",
+        dark: "#d5ab58"
       }
     },
     {