@treeui/mcp 0.8.0 → 0.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-CEDY3OJ4.js → chunk-DGIMKZPZ.js} +443 -115
- package/dist/cli.cjs +443 -115
- package/dist/cli.js +1 -1
- package/dist/index.cjs +455 -120
- package/dist/index.js +13 -6
- package/package.json +3 -3
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
// src/generated/treeui.catalog.json
|
|
2
2
|
var treeui_catalog_default = {
|
|
3
|
-
generatedAt: "0.
|
|
3
|
+
generatedAt: "0.32.0",
|
|
4
4
|
packageName: "@treeui/vue",
|
|
5
|
-
packageVersion: "0.
|
|
5
|
+
packageVersion: "0.32.0",
|
|
6
6
|
decisionGuides: [
|
|
7
7
|
{
|
|
8
8
|
id: "single-choice",
|
|
@@ -125,7 +125,7 @@ var treeui_catalog_default = {
|
|
|
125
125
|
],
|
|
126
126
|
notes: [
|
|
127
127
|
"Editing, not display. For read-only key/value display use TDescriptionList.",
|
|
128
|
-
"A write-only/sensitive mode (value never read back) is a
|
|
128
|
+
"A write-only/sensitive mode (value never read back) is a designed contract that is not yet shipped."
|
|
129
129
|
]
|
|
130
130
|
},
|
|
131
131
|
{
|
|
@@ -423,8 +423,8 @@ var treeui_catalog_default = {
|
|
|
423
423
|
"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.",
|
|
424
424
|
'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.',
|
|
425
425
|
'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.',
|
|
426
|
-
"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
|
|
427
|
-
"Company and service logos
|
|
426
|
+
"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.",
|
|
427
|
+
"Company and service logos are brand assets, not TreeUI icons \u2014 source them from your own brand assets rather than the icon registry."
|
|
428
428
|
]
|
|
429
429
|
},
|
|
430
430
|
{
|
|
@@ -770,28 +770,38 @@ var treeui_catalog_default = {
|
|
|
770
770
|
"Tab/Shift+Tab order, Escape to close, Enter/Space to activate, arrow keys where the pattern expects them.",
|
|
771
771
|
"Overlays trap focus while open and restore it on close.",
|
|
772
772
|
"Clickable targets stay at or above 44\xD744px.",
|
|
773
|
-
"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."
|
|
773
|
+
"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.",
|
|
774
|
+
"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.",
|
|
775
|
+
"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."
|
|
774
776
|
],
|
|
775
777
|
components: [
|
|
776
|
-
"TModal",
|
|
777
|
-
"TDrawer",
|
|
778
|
-
"TConfirmDialog",
|
|
779
|
-
"TDropdown",
|
|
780
|
-
"TTooltip",
|
|
781
778
|
"TAccordion",
|
|
782
|
-
"
|
|
783
|
-
"TTreeView",
|
|
784
|
-
"TToastProvider",
|
|
779
|
+
"TAppShell",
|
|
785
780
|
"TButton",
|
|
781
|
+
"TCanvasSurface",
|
|
782
|
+
"TCheckbox",
|
|
786
783
|
"TCodeBlock",
|
|
784
|
+
"TConfirmDialog",
|
|
785
|
+
"TDatePicker",
|
|
786
|
+
"TDrawer",
|
|
787
|
+
"TDropdown",
|
|
788
|
+
"TFileUpload",
|
|
789
|
+
"TFormField",
|
|
790
|
+
"TImage",
|
|
787
791
|
"TLinkTile",
|
|
788
792
|
"TMenu",
|
|
793
|
+
"TModal",
|
|
789
794
|
"TPopover",
|
|
790
|
-
"
|
|
795
|
+
"TSelect",
|
|
791
796
|
"TSkipLink",
|
|
792
|
-
"
|
|
793
|
-
"
|
|
794
|
-
"TText"
|
|
797
|
+
"TSteps",
|
|
798
|
+
"TTabs",
|
|
799
|
+
"TText",
|
|
800
|
+
"TToast",
|
|
801
|
+
"TToastProvider",
|
|
802
|
+
"TToggleGroup",
|
|
803
|
+
"TTooltip",
|
|
804
|
+
"TTreeView"
|
|
795
805
|
]
|
|
796
806
|
},
|
|
797
807
|
{
|
|
@@ -851,26 +861,42 @@ var treeui_catalog_default = {
|
|
|
851
861
|
"Spacing comes from the --tree-space-* scale, applied by layout components.",
|
|
852
862
|
"Compose TPage, TStack, TGrid, and TSplit before writing a custom layout div.",
|
|
853
863
|
"Forms align through TFormField + TStack + TGrid \u2014 labels, hints, and errors line up by contract.",
|
|
854
|
-
"Reading widths and page gutters come from TContainer/TPage, not local max-widths."
|
|
864
|
+
"Reading widths and page gutters come from TContainer/TPage, not local max-widths.",
|
|
865
|
+
"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."
|
|
855
866
|
],
|
|
856
867
|
components: [
|
|
857
|
-
"
|
|
858
|
-
"
|
|
859
|
-
"TSplit",
|
|
860
|
-
"TContainer",
|
|
861
|
-
"TSpacer",
|
|
862
|
-
"TPage",
|
|
863
|
-
"TPageHeader",
|
|
864
|
-
"TFormField",
|
|
868
|
+
"TAppShell",
|
|
869
|
+
"TBadge",
|
|
865
870
|
"TBrandLockup",
|
|
866
|
-
"
|
|
871
|
+
"TCanvasSurface",
|
|
872
|
+
"TCard",
|
|
873
|
+
"TCodeBlock",
|
|
874
|
+
"TConfirmDialog",
|
|
875
|
+
"TContainer",
|
|
867
876
|
"TDescriptionList",
|
|
868
|
-
"
|
|
877
|
+
"TEmptyState",
|
|
878
|
+
"TFormField",
|
|
879
|
+
"TGrid",
|
|
869
880
|
"THero",
|
|
881
|
+
"THide",
|
|
882
|
+
"TLinkTile",
|
|
883
|
+
"TList",
|
|
884
|
+
"TModal",
|
|
885
|
+
"TNavMenu",
|
|
886
|
+
"TPage",
|
|
887
|
+
"TPageHeader",
|
|
870
888
|
"TPageSurface",
|
|
889
|
+
"TSection",
|
|
871
890
|
"TShow",
|
|
872
|
-
"
|
|
873
|
-
"
|
|
891
|
+
"TSpacer",
|
|
892
|
+
"TSparkline",
|
|
893
|
+
"TSplit",
|
|
894
|
+
"TStack",
|
|
895
|
+
"TStat",
|
|
896
|
+
"TSteps",
|
|
897
|
+
"TTabs",
|
|
898
|
+
"TText",
|
|
899
|
+
"TTimeline"
|
|
874
900
|
]
|
|
875
901
|
},
|
|
876
902
|
{
|
|
@@ -917,6 +943,24 @@ var treeui_catalog_default = {
|
|
|
917
943
|
"TTextarea",
|
|
918
944
|
"TToast"
|
|
919
945
|
]
|
|
946
|
+
},
|
|
947
|
+
{
|
|
948
|
+
id: "branchline-icons",
|
|
949
|
+
title: "Icons drawn to a contract",
|
|
950
|
+
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.",
|
|
951
|
+
rules: [
|
|
952
|
+
"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.",
|
|
953
|
+
"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.",
|
|
954
|
+
"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.",
|
|
955
|
+
"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.",
|
|
956
|
+
"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.",
|
|
957
|
+
"A family shares one base, drawn once and reused literally; a variant changes exactly one thing, in one place, by one rule.",
|
|
958
|
+
"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.",
|
|
959
|
+
"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."
|
|
960
|
+
],
|
|
961
|
+
components: [
|
|
962
|
+
"TIcon"
|
|
963
|
+
]
|
|
920
964
|
}
|
|
921
965
|
],
|
|
922
966
|
setup: {
|
|
@@ -1554,7 +1598,7 @@ var treeui_catalog_default = {
|
|
|
1554
1598
|
name: "showCollapseButton",
|
|
1555
1599
|
type: "boolean",
|
|
1556
1600
|
default: "true",
|
|
1557
|
-
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."
|
|
1601
|
+
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."
|
|
1558
1602
|
},
|
|
1559
1603
|
{
|
|
1560
1604
|
name: "collapseLabel",
|
|
@@ -1638,7 +1682,7 @@ var treeui_catalog_default = {
|
|
|
1638
1682
|
},
|
|
1639
1683
|
{
|
|
1640
1684
|
name: "header-end",
|
|
1641
|
-
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.
|
|
1685
|
+
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",
|
|
1642
1686
|
note: "AppShellSlotProps"
|
|
1643
1687
|
},
|
|
1644
1688
|
{
|
|
@@ -1692,6 +1736,7 @@ var treeui_catalog_default = {
|
|
|
1692
1736
|
"menu_and_drawer_close_buttons_are_44px: true"
|
|
1693
1737
|
],
|
|
1694
1738
|
behavior: [
|
|
1739
|
+
"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.",
|
|
1695
1740
|
"fills_viewport_full_width_and_height: true",
|
|
1696
1741
|
"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",
|
|
1697
1742
|
"header_spans_full_width_above_sidebar_and_content: true",
|
|
@@ -1779,7 +1824,8 @@ var treeui_catalog_default = {
|
|
|
1779
1824
|
"brand-lockup"
|
|
1780
1825
|
],
|
|
1781
1826
|
practices: [
|
|
1782
|
-
"accessible-by-default"
|
|
1827
|
+
"accessible-by-default",
|
|
1828
|
+
"content-alignment"
|
|
1783
1829
|
]
|
|
1784
1830
|
},
|
|
1785
1831
|
{
|
|
@@ -1990,6 +2036,18 @@ var treeui_catalog_default = {
|
|
|
1990
2036
|
"lg"
|
|
1991
2037
|
],
|
|
1992
2038
|
description: "Changes min-height and font-size only; inline padding is constant across sizes."
|
|
2039
|
+
},
|
|
2040
|
+
{
|
|
2041
|
+
name: "truncate",
|
|
2042
|
+
type: "boolean",
|
|
2043
|
+
default: "false",
|
|
2044
|
+
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."
|
|
2045
|
+
},
|
|
2046
|
+
{
|
|
2047
|
+
name: "label",
|
|
2048
|
+
type: "string",
|
|
2049
|
+
default: "undefined",
|
|
2050
|
+
description: "The badge text. Only needed with `truncate`, which puts it in `title`; otherwise use the default slot."
|
|
1993
2051
|
}
|
|
1994
2052
|
],
|
|
1995
2053
|
events: [],
|
|
@@ -2012,8 +2070,10 @@ var treeui_catalog_default = {
|
|
|
2012
2070
|
"tone_remaps_variant_color_variables: true",
|
|
2013
2071
|
"tone_overrides_variant_danger_palette: true",
|
|
2014
2072
|
"tone_neutral_has_no_stylesheet_rule: true",
|
|
2073
|
+
'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.',
|
|
2015
2074
|
"icon_wrapper_rendered_only_when_slot_filled: true",
|
|
2016
|
-
"icon_renders_before_default_slot: true"
|
|
2075
|
+
"icon_renders_before_default_slot: true",
|
|
2076
|
+
"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."
|
|
2017
2077
|
],
|
|
2018
2078
|
selection: {
|
|
2019
2079
|
keywords: [],
|
|
@@ -2031,6 +2091,7 @@ var treeui_catalog_default = {
|
|
|
2031
2091
|
practices: [
|
|
2032
2092
|
"predictable-api",
|
|
2033
2093
|
"state-clarity",
|
|
2094
|
+
"content-alignment",
|
|
2034
2095
|
"token-driven"
|
|
2035
2096
|
]
|
|
2036
2097
|
},
|
|
@@ -2221,7 +2282,7 @@ var treeui_catalog_default = {
|
|
|
2221
2282
|
name: "href",
|
|
2222
2283
|
type: "string",
|
|
2223
2284
|
default: "undefined",
|
|
2224
|
-
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
|
|
2285
|
+
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'
|
|
2225
2286
|
},
|
|
2226
2287
|
{
|
|
2227
2288
|
name: "target",
|
|
@@ -2636,6 +2697,116 @@ var treeui_catalog_default = {
|
|
|
2636
2697
|
recipes: [],
|
|
2637
2698
|
practices: []
|
|
2638
2699
|
},
|
|
2700
|
+
{
|
|
2701
|
+
name: "TCanvasSurface",
|
|
2702
|
+
aliases: [],
|
|
2703
|
+
package: "@treeui/vue",
|
|
2704
|
+
kind: "data-display",
|
|
2705
|
+
category: "Data Display",
|
|
2706
|
+
status: "available",
|
|
2707
|
+
purpose: "A sized, repaintable, hit-testable canvas for a data-driven drawing \u2014 a diagram, a graph, a custom plot.",
|
|
2708
|
+
sourceFile: "packages/vue/src/components/TCanvasSurface.vue",
|
|
2709
|
+
storyFile: "apps/docs/src/stories/CanvasSurface.stories.ts",
|
|
2710
|
+
storyTitle: "Components/Data Display/Canvas Surface",
|
|
2711
|
+
manifestFile: "docs/ai/COMPONENTS/canvas-surface.yaml",
|
|
2712
|
+
props: [
|
|
2713
|
+
{
|
|
2714
|
+
name: "draw",
|
|
2715
|
+
type: "(frame: CanvasSurfaceFrame) => void",
|
|
2716
|
+
required: true,
|
|
2717
|
+
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"
|
|
2718
|
+
},
|
|
2719
|
+
{
|
|
2720
|
+
name: "height",
|
|
2721
|
+
type: "number | string",
|
|
2722
|
+
default: "320",
|
|
2723
|
+
note: "Number is px, string is any CSS length. A diagram has no intrinsic height, so it is declared."
|
|
2724
|
+
},
|
|
2725
|
+
{
|
|
2726
|
+
name: "cursor",
|
|
2727
|
+
type: "string",
|
|
2728
|
+
default: "undefined",
|
|
2729
|
+
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"
|
|
2730
|
+
},
|
|
2731
|
+
{
|
|
2732
|
+
name: "maxPixelRatio",
|
|
2733
|
+
type: "number",
|
|
2734
|
+
default: "2"
|
|
2735
|
+
},
|
|
2736
|
+
{
|
|
2737
|
+
name: "ariaLabel",
|
|
2738
|
+
type: "string",
|
|
2739
|
+
default: "undefined",
|
|
2740
|
+
note: "Sets role=img. A bitmap says nothing on its own."
|
|
2741
|
+
},
|
|
2742
|
+
{
|
|
2743
|
+
name: "redrawKey",
|
|
2744
|
+
type: "unknown",
|
|
2745
|
+
default: "undefined",
|
|
2746
|
+
note: "Repaint whenever this changes \u2014 pass the data, a version counter, or the theme. Deep-watched."
|
|
2747
|
+
}
|
|
2748
|
+
],
|
|
2749
|
+
events: [],
|
|
2750
|
+
slots: [
|
|
2751
|
+
{
|
|
2752
|
+
name: "default",
|
|
2753
|
+
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"
|
|
2754
|
+
}
|
|
2755
|
+
],
|
|
2756
|
+
a11y: [
|
|
2757
|
+
"Give it an ariaLabel; a canvas is opaque to assistive technology.",
|
|
2758
|
+
"Put the same information in the default slot as markup \u2014 it is the accessible form, not a fallback.",
|
|
2759
|
+
"Anything clickable inside the drawing needs a real control elsewhere, or a keyboard user cannot reach it."
|
|
2760
|
+
],
|
|
2761
|
+
behavior: [
|
|
2762
|
+
"repaints_on_demand_not_on_a_clock: true",
|
|
2763
|
+
"backing_store_follows_the_element: true",
|
|
2764
|
+
"pointer_events_reach_the_canvas: true",
|
|
2765
|
+
"ssr_safe: Nothing touches the DOM outside onMounted."
|
|
2766
|
+
],
|
|
2767
|
+
selection: {
|
|
2768
|
+
keywords: [
|
|
2769
|
+
"canvas",
|
|
2770
|
+
"diagram",
|
|
2771
|
+
"graph",
|
|
2772
|
+
"node and edge",
|
|
2773
|
+
"custom drawing",
|
|
2774
|
+
"plot",
|
|
2775
|
+
"topology",
|
|
2776
|
+
"map",
|
|
2777
|
+
"hit testing"
|
|
2778
|
+
],
|
|
2779
|
+
useWhen: [
|
|
2780
|
+
"The drawing is data-driven and no chart primitive expresses it \u2014 nodes and edges, a topology, a custom plot.",
|
|
2781
|
+
"Parts of the drawing are click or hover targets.",
|
|
2782
|
+
"It must repaint when the data, the locale or the theme changes."
|
|
2783
|
+
],
|
|
2784
|
+
avoidWhen: [
|
|
2785
|
+
"A line, area or bar chart says it \u2014 use TChart, which brings axes, legend, tooltip and an accessible table.",
|
|
2786
|
+
"The drawing is ornament \u2014 use useDecorativeCanvas, which gates the loop on visibility and reduced motion.",
|
|
2787
|
+
"The shape is an inline trend \u2014 use TSparkline."
|
|
2788
|
+
],
|
|
2789
|
+
alternatives: [
|
|
2790
|
+
{
|
|
2791
|
+
component: "TChart",
|
|
2792
|
+
when: "The data fits axes and categories."
|
|
2793
|
+
},
|
|
2794
|
+
{
|
|
2795
|
+
component: "useDecorativeCanvas",
|
|
2796
|
+
when: "It is decoration, not information."
|
|
2797
|
+
}
|
|
2798
|
+
]
|
|
2799
|
+
},
|
|
2800
|
+
setup: {
|
|
2801
|
+
required: [],
|
|
2802
|
+
notes: []
|
|
2803
|
+
},
|
|
2804
|
+
recipes: [],
|
|
2805
|
+
practices: [
|
|
2806
|
+
"accessible-by-default",
|
|
2807
|
+
"content-alignment"
|
|
2808
|
+
]
|
|
2809
|
+
},
|
|
2639
2810
|
{
|
|
2640
2811
|
name: "TCard",
|
|
2641
2812
|
aliases: [],
|
|
@@ -2709,6 +2880,9 @@ var treeui_catalog_default = {
|
|
|
2709
2880
|
"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."
|
|
2710
2881
|
],
|
|
2711
2882
|
behavior: [
|
|
2883
|
+
"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.",
|
|
2884
|
+
"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`.",
|
|
2885
|
+
"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.",
|
|
2712
2886
|
"body_wrapper_class: t-card__body",
|
|
2713
2887
|
"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.",
|
|
2714
2888
|
"footer_render_condition: The `footer.t-card__footer` element renders only when the `footer` slot is supplied.",
|
|
@@ -2751,6 +2925,7 @@ var treeui_catalog_default = {
|
|
|
2751
2925
|
practices: [
|
|
2752
2926
|
"interaction-feedback",
|
|
2753
2927
|
"predictable-api",
|
|
2928
|
+
"content-alignment",
|
|
2754
2929
|
"token-driven"
|
|
2755
2930
|
]
|
|
2756
2931
|
},
|
|
@@ -2767,6 +2942,12 @@ var treeui_catalog_default = {
|
|
|
2767
2942
|
storyTitle: "Components/Data Display/Chart",
|
|
2768
2943
|
manifestFile: "docs/ai/COMPONENTS/chart.yaml",
|
|
2769
2944
|
props: [
|
|
2945
|
+
{
|
|
2946
|
+
name: "yAxisWidth",
|
|
2947
|
+
type: "number",
|
|
2948
|
+
default: "undefined",
|
|
2949
|
+
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."
|
|
2950
|
+
},
|
|
2770
2951
|
{
|
|
2771
2952
|
name: "type",
|
|
2772
2953
|
type: "TChartType",
|
|
@@ -2937,7 +3118,7 @@ var treeui_catalog_default = {
|
|
|
2937
3118
|
],
|
|
2938
3119
|
avoidWhen: [
|
|
2939
3120
|
"A single value tells the story \u2014 use TStat.",
|
|
2940
|
-
"You only need an inline trend with no axes \u2014 use TSparkline.",
|
|
3121
|
+
"You only need an inline trend with no axes \u2014 use TSparkline (`fluid` fills the card width).",
|
|
2941
3122
|
"The data is a part-of-whole breakdown \u2014 use TDonutChart."
|
|
2942
3123
|
],
|
|
2943
3124
|
alternatives: [
|
|
@@ -3109,6 +3290,17 @@ var treeui_catalog_default = {
|
|
|
3109
3290
|
storyTitle: "Components/Data Display/CodeBlock",
|
|
3110
3291
|
manifestFile: "docs/ai/COMPONENTS/code-block.yaml",
|
|
3111
3292
|
props: [
|
|
3293
|
+
{
|
|
3294
|
+
name: "size",
|
|
3295
|
+
type: "TSize",
|
|
3296
|
+
default: "md",
|
|
3297
|
+
values: [
|
|
3298
|
+
"sm",
|
|
3299
|
+
"md",
|
|
3300
|
+
"lg"
|
|
3301
|
+
],
|
|
3302
|
+
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."
|
|
3303
|
+
},
|
|
3112
3304
|
{
|
|
3113
3305
|
name: "code",
|
|
3114
3306
|
type: "string",
|
|
@@ -3157,7 +3349,9 @@ var treeui_catalog_default = {
|
|
|
3157
3349
|
'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.',
|
|
3158
3350
|
"copy_button_state: The copy button's aria-label reflects the copied state briefly."
|
|
3159
3351
|
],
|
|
3160
|
-
behavior: [
|
|
3352
|
+
behavior: [
|
|
3353
|
+
'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"`.'
|
|
3354
|
+
],
|
|
3161
3355
|
selection: {
|
|
3162
3356
|
keywords: [
|
|
3163
3357
|
"code",
|
|
@@ -3195,6 +3389,7 @@ var treeui_catalog_default = {
|
|
|
3195
3389
|
recipes: [],
|
|
3196
3390
|
practices: [
|
|
3197
3391
|
"accessible-by-default",
|
|
3392
|
+
"content-alignment",
|
|
3198
3393
|
"token-driven"
|
|
3199
3394
|
]
|
|
3200
3395
|
},
|
|
@@ -3716,6 +3911,7 @@ var treeui_catalog_default = {
|
|
|
3716
3911
|
"icon_slot_marked_aria_hidden: true"
|
|
3717
3912
|
],
|
|
3718
3913
|
behavior: [
|
|
3914
|
+
"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.",
|
|
3719
3915
|
"built_on_modal_contract: true",
|
|
3720
3916
|
"default_confirm_button_variant: danger",
|
|
3721
3917
|
"default_cancel_button_variant: ghost",
|
|
@@ -3761,7 +3957,8 @@ var treeui_catalog_default = {
|
|
|
3761
3957
|
"confirm-destructive-action"
|
|
3762
3958
|
],
|
|
3763
3959
|
practices: [
|
|
3764
|
-
"accessible-by-default"
|
|
3960
|
+
"accessible-by-default",
|
|
3961
|
+
"content-alignment"
|
|
3765
3962
|
]
|
|
3766
3963
|
},
|
|
3767
3964
|
{
|
|
@@ -4141,6 +4338,8 @@ var treeui_catalog_default = {
|
|
|
4141
4338
|
"focus_is_not_trapped_and_tab_leaves_the_open_calendar: true"
|
|
4142
4339
|
],
|
|
4143
4340
|
behavior: [
|
|
4341
|
+
'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.',
|
|
4342
|
+
'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.',
|
|
4144
4343
|
"value_format: YYYY-MM-DD",
|
|
4145
4344
|
"controlled_and_uncontrolled_open: true",
|
|
4146
4345
|
"open_state_emits_are_deduped: true",
|
|
@@ -4189,7 +4388,9 @@ var treeui_catalog_default = {
|
|
|
4189
4388
|
]
|
|
4190
4389
|
},
|
|
4191
4390
|
recipes: [],
|
|
4192
|
-
practices: [
|
|
4391
|
+
practices: [
|
|
4392
|
+
"accessible-by-default"
|
|
4393
|
+
]
|
|
4193
4394
|
},
|
|
4194
4395
|
{
|
|
4195
4396
|
name: "TDateTimePicker",
|
|
@@ -5203,6 +5404,24 @@ var treeui_catalog_default = {
|
|
|
5203
5404
|
storyTitle: "Components/Data Entry/FileUpload",
|
|
5204
5405
|
manifestFile: "docs/ai/COMPONENTS/file-upload.yaml",
|
|
5205
5406
|
props: [
|
|
5407
|
+
{
|
|
5408
|
+
name: "clearLabel",
|
|
5409
|
+
type: "string",
|
|
5410
|
+
default: "Clear all",
|
|
5411
|
+
description: "Label for the button that drops every selected file. It was hard-coded English with no way out."
|
|
5412
|
+
},
|
|
5413
|
+
{
|
|
5414
|
+
name: "removeLabel",
|
|
5415
|
+
type: "string",
|
|
5416
|
+
default: "Remove",
|
|
5417
|
+
description: "Label for a row's remove button."
|
|
5418
|
+
},
|
|
5419
|
+
{
|
|
5420
|
+
name: "removeAriaLabel",
|
|
5421
|
+
type: "(file: File) => string",
|
|
5422
|
+
default: "(f) => `Remove ${f.name}`",
|
|
5423
|
+
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."
|
|
5424
|
+
},
|
|
5206
5425
|
{
|
|
5207
5426
|
name: "modelValue",
|
|
5208
5427
|
type: "File[]",
|
|
@@ -5462,7 +5681,9 @@ var treeui_catalog_default = {
|
|
|
5462
5681
|
recipes: [
|
|
5463
5682
|
"page-drop-target"
|
|
5464
5683
|
],
|
|
5465
|
-
practices: [
|
|
5684
|
+
practices: [
|
|
5685
|
+
"accessible-by-default"
|
|
5686
|
+
]
|
|
5466
5687
|
},
|
|
5467
5688
|
{
|
|
5468
5689
|
name: "TFlag",
|
|
@@ -5775,6 +5996,12 @@ var treeui_catalog_default = {
|
|
|
5775
5996
|
name: "dense",
|
|
5776
5997
|
type: "boolean",
|
|
5777
5998
|
default: "false"
|
|
5999
|
+
},
|
|
6000
|
+
{
|
|
6001
|
+
name: "balance",
|
|
6002
|
+
type: "boolean",
|
|
6003
|
+
default: "false",
|
|
6004
|
+
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'
|
|
5778
6005
|
}
|
|
5779
6006
|
],
|
|
5780
6007
|
events: [],
|
|
@@ -5788,6 +6015,7 @@ var treeui_catalog_default = {
|
|
|
5788
6015
|
],
|
|
5789
6016
|
behavior: [
|
|
5790
6017
|
"semantic_element_controlled_by_as: true",
|
|
6018
|
+
"balance_shares_the_last_row_instead_of_leaving_holes: true",
|
|
5791
6019
|
"fixed_columns_supported: true",
|
|
5792
6020
|
"auto_fit_columns_supported: true",
|
|
5793
6021
|
"dense_mode_uses_grid_auto_flow_dense: true"
|
|
@@ -6080,6 +6308,7 @@ var treeui_catalog_default = {
|
|
|
6080
6308
|
"calendar-plus",
|
|
6081
6309
|
"calendar-range",
|
|
6082
6310
|
"calendar-x",
|
|
6311
|
+
"campaign",
|
|
6083
6312
|
"carousel",
|
|
6084
6313
|
"catalog",
|
|
6085
6314
|
"chart-column",
|
|
@@ -6116,7 +6345,6 @@ var treeui_catalog_default = {
|
|
|
6116
6345
|
"companion",
|
|
6117
6346
|
"compass",
|
|
6118
6347
|
"connections",
|
|
6119
|
-
"contentpilot",
|
|
6120
6348
|
"copy",
|
|
6121
6349
|
"cpu",
|
|
6122
6350
|
"cpu-chip",
|
|
@@ -6362,8 +6590,6 @@ var treeui_catalog_default = {
|
|
|
6362
6590
|
"tickets",
|
|
6363
6591
|
"timeline",
|
|
6364
6592
|
"timer",
|
|
6365
|
-
"toggle-left",
|
|
6366
|
-
"toggle-right",
|
|
6367
6593
|
"token-input",
|
|
6368
6594
|
"token-output",
|
|
6369
6595
|
"trail",
|
|
@@ -6401,10 +6627,18 @@ var treeui_catalog_default = {
|
|
|
6401
6627
|
},
|
|
6402
6628
|
{
|
|
6403
6629
|
name: "size",
|
|
6404
|
-
type: "number |
|
|
6630
|
+
type: "number | TIconSize",
|
|
6405
6631
|
default: "20",
|
|
6406
|
-
|
|
6407
|
-
|
|
6632
|
+
values: [
|
|
6633
|
+
"sm",
|
|
6634
|
+
"md",
|
|
6635
|
+
"lg",
|
|
6636
|
+
"xl",
|
|
6637
|
+
"2xl",
|
|
6638
|
+
"<number of pixels>"
|
|
6639
|
+
],
|
|
6640
|
+
description: "A token name from the icon scale, or a pixel number.",
|
|
6641
|
+
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'
|
|
6408
6642
|
},
|
|
6409
6643
|
{
|
|
6410
6644
|
name: "strokeWidth",
|
|
@@ -6434,7 +6668,7 @@ var treeui_catalog_default = {
|
|
|
6434
6668
|
behavior: [
|
|
6435
6669
|
"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.",
|
|
6436
6670
|
'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).',
|
|
6437
|
-
"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
|
|
6671
|
+
"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.",
|
|
6438
6672
|
"resolved_per_render: TIcon resolves its name in a computed, not once at setup, so an icon registered after the component mounted still appears.",
|
|
6439
6673
|
"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.",
|
|
6440
6674
|
"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 +6718,9 @@ var treeui_catalog_default = {
|
|
|
6484
6718
|
recipes: [
|
|
6485
6719
|
"nav-menu-icons"
|
|
6486
6720
|
],
|
|
6487
|
-
practices: [
|
|
6721
|
+
practices: [
|
|
6722
|
+
"branchline-icons"
|
|
6723
|
+
]
|
|
6488
6724
|
},
|
|
6489
6725
|
{
|
|
6490
6726
|
name: "TImage",
|
|
@@ -6607,7 +6843,7 @@ var treeui_catalog_default = {
|
|
|
6607
6843
|
name: "modelValue",
|
|
6608
6844
|
type: "T",
|
|
6609
6845
|
default: "undefined",
|
|
6610
|
-
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`,
|
|
6846
|
+
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"
|
|
6611
6847
|
},
|
|
6612
6848
|
{
|
|
6613
6849
|
name: "size",
|
|
@@ -7319,7 +7555,9 @@ var treeui_catalog_default = {
|
|
|
7319
7555
|
"aria_current: `page` when `current`.",
|
|
7320
7556
|
"focus_visible: Focus ring on the tile."
|
|
7321
7557
|
],
|
|
7322
|
-
behavior: [
|
|
7558
|
+
behavior: [
|
|
7559
|
+
"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."
|
|
7560
|
+
],
|
|
7323
7561
|
selection: {
|
|
7324
7562
|
keywords: [
|
|
7325
7563
|
"tile",
|
|
@@ -7355,6 +7593,7 @@ var treeui_catalog_default = {
|
|
|
7355
7593
|
practices: [
|
|
7356
7594
|
"interaction-feedback",
|
|
7357
7595
|
"accessible-by-default",
|
|
7596
|
+
"content-alignment",
|
|
7358
7597
|
"token-driven"
|
|
7359
7598
|
]
|
|
7360
7599
|
},
|
|
@@ -7401,7 +7640,8 @@ var treeui_catalog_default = {
|
|
|
7401
7640
|
"not_selectable: For a single-select list of options use TSelectableList instead."
|
|
7402
7641
|
],
|
|
7403
7642
|
behavior: [
|
|
7404
|
-
"
|
|
7643
|
+
"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.",
|
|
7644
|
+
"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).",
|
|
7405
7645
|
"no_overflow_ownership: TList does not create, own, or collapse an actions overflow."
|
|
7406
7646
|
],
|
|
7407
7647
|
selection: {
|
|
@@ -7564,7 +7804,7 @@ var treeui_catalog_default = {
|
|
|
7564
7804
|
kind: "overlay",
|
|
7565
7805
|
category: "Overlay",
|
|
7566
7806
|
status: "available",
|
|
7567
|
-
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
|
|
7807
|
+
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.",
|
|
7568
7808
|
sourceFile: "packages/vue/src/components/TMenu.vue",
|
|
7569
7809
|
storyFile: "apps/docs/src/stories/Menu.stories.ts",
|
|
7570
7810
|
storyTitle: "Components/Overlay/Menu",
|
|
@@ -7809,6 +8049,10 @@ var treeui_catalog_default = {
|
|
|
7809
8049
|
"escape_closes_when_enabled: true"
|
|
7810
8050
|
],
|
|
7811
8051
|
behavior: [
|
|
8052
|
+
"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.",
|
|
8053
|
+
"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.",
|
|
8054
|
+
"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.",
|
|
8055
|
+
"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`.",
|
|
7812
8056
|
"uses_teleport_to_body: true",
|
|
7813
8057
|
"locks_body_scroll_while_open: true",
|
|
7814
8058
|
"overlay_click_closes_when_enabled: true",
|
|
@@ -7853,7 +8097,8 @@ var treeui_catalog_default = {
|
|
|
7853
8097
|
],
|
|
7854
8098
|
practices: [
|
|
7855
8099
|
"accessible-by-default",
|
|
7856
|
-
"predictable-api"
|
|
8100
|
+
"predictable-api",
|
|
8101
|
+
"content-alignment"
|
|
7857
8102
|
]
|
|
7858
8103
|
},
|
|
7859
8104
|
{
|
|
@@ -8199,6 +8444,7 @@ var treeui_catalog_default = {
|
|
|
8199
8444
|
"aria_disabled: on link items when disabled"
|
|
8200
8445
|
],
|
|
8201
8446
|
behavior: [
|
|
8447
|
+
"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.",
|
|
8202
8448
|
"can_be_controlled_or_uncontrolled: true",
|
|
8203
8449
|
"can_inherit_collapsed_state_from_sidebar: true",
|
|
8204
8450
|
"supports_rich_item_rendering_via_slot: true"
|
|
@@ -8246,7 +8492,8 @@ var treeui_catalog_default = {
|
|
|
8246
8492
|
"responsive-navigation"
|
|
8247
8493
|
],
|
|
8248
8494
|
practices: [
|
|
8249
|
-
"interaction-feedback"
|
|
8495
|
+
"interaction-feedback",
|
|
8496
|
+
"content-alignment"
|
|
8250
8497
|
]
|
|
8251
8498
|
},
|
|
8252
8499
|
{
|
|
@@ -8265,7 +8512,7 @@ var treeui_catalog_default = {
|
|
|
8265
8512
|
{
|
|
8266
8513
|
name: "modelValue",
|
|
8267
8514
|
type: "number | null",
|
|
8268
|
-
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
|
|
8515
|
+
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"
|
|
8269
8516
|
},
|
|
8270
8517
|
{
|
|
8271
8518
|
name: "min",
|
|
@@ -8513,6 +8760,7 @@ var treeui_catalog_default = {
|
|
|
8513
8760
|
"Actions area holds standard focusable controls (e.g. TButton) \u2014 no custom roles added."
|
|
8514
8761
|
],
|
|
8515
8762
|
behavior: [
|
|
8763
|
+
"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`.",
|
|
8516
8764
|
"title_and_subtitle_optional: true",
|
|
8517
8765
|
"heading_level_controlled_by_level: true",
|
|
8518
8766
|
"actions_area_right_aligned_and_wraps: true",
|
|
@@ -9533,14 +9781,14 @@ var treeui_catalog_default = {
|
|
|
9533
9781
|
props: [
|
|
9534
9782
|
{
|
|
9535
9783
|
name: "modelValue",
|
|
9536
|
-
type: "
|
|
9537
|
-
default: ""
|
|
9784
|
+
type: "T",
|
|
9785
|
+
default: "undefined"
|
|
9538
9786
|
},
|
|
9539
9787
|
{
|
|
9540
9788
|
name: "options",
|
|
9541
|
-
type: "TSelectOption[]",
|
|
9789
|
+
type: "TSelectOption<T>[]",
|
|
9542
9790
|
default: "[]",
|
|
9543
|
-
note: "Array of { label: string; value:
|
|
9791
|
+
note: "Array of { label: string; value: T; disabled?: boolean }"
|
|
9544
9792
|
},
|
|
9545
9793
|
{
|
|
9546
9794
|
name: "open",
|
|
@@ -9636,7 +9884,9 @@ var treeui_catalog_default = {
|
|
|
9636
9884
|
"outside_click_closes_dropdown: true",
|
|
9637
9885
|
"focus_restores_on_close: true",
|
|
9638
9886
|
"numeric_values_supported_without_string_coercion: true",
|
|
9639
|
-
"listbox_flips_above_trigger_when_space_below_is_insufficient: true"
|
|
9887
|
+
"listbox_flips_above_trigger_when_space_below_is_insufficient: true",
|
|
9888
|
+
"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.",
|
|
9889
|
+
"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`."
|
|
9640
9890
|
],
|
|
9641
9891
|
selection: {
|
|
9642
9892
|
keywords: [
|
|
@@ -9674,6 +9924,7 @@ var treeui_catalog_default = {
|
|
|
9674
9924
|
],
|
|
9675
9925
|
practices: [
|
|
9676
9926
|
"interaction-feedback",
|
|
9927
|
+
"accessible-by-default",
|
|
9677
9928
|
"predictable-api",
|
|
9678
9929
|
"token-driven"
|
|
9679
9930
|
]
|
|
@@ -10147,7 +10398,9 @@ var treeui_catalog_default = {
|
|
|
10147
10398
|
"Hit area is `--tree-size-control-lg` (48px) tall, above the 44px target floor.",
|
|
10148
10399
|
"The label must say where it goes; the library does not supply one."
|
|
10149
10400
|
],
|
|
10150
|
-
behavior: [
|
|
10401
|
+
behavior: [
|
|
10402
|
+
"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."
|
|
10403
|
+
],
|
|
10151
10404
|
selection: {
|
|
10152
10405
|
keywords: [
|
|
10153
10406
|
"skip link",
|
|
@@ -10372,6 +10625,12 @@ var treeui_catalog_default = {
|
|
|
10372
10625
|
default: "false",
|
|
10373
10626
|
note: "Marker on the final point (line/area)."
|
|
10374
10627
|
},
|
|
10628
|
+
{
|
|
10629
|
+
name: "fluid",
|
|
10630
|
+
type: "boolean",
|
|
10631
|
+
default: "false",
|
|
10632
|
+
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"
|
|
10633
|
+
},
|
|
10375
10634
|
{
|
|
10376
10635
|
name: "ariaLabel",
|
|
10377
10636
|
type: "string",
|
|
@@ -10387,7 +10646,8 @@ var treeui_catalog_default = {
|
|
|
10387
10646
|
behavior: [
|
|
10388
10647
|
"no_axes_or_legend: true",
|
|
10389
10648
|
"flat_series_renders_centered: true",
|
|
10390
|
-
"scales_to_intrinsic_width_and_height: true"
|
|
10649
|
+
"scales_to_intrinsic_width_and_height: true",
|
|
10650
|
+
"fluid_fills_parent_width: true"
|
|
10391
10651
|
],
|
|
10392
10652
|
selection: {
|
|
10393
10653
|
keywords: [
|
|
@@ -10427,7 +10687,9 @@ var treeui_catalog_default = {
|
|
|
10427
10687
|
recipes: [
|
|
10428
10688
|
"metric-dashboard"
|
|
10429
10689
|
],
|
|
10430
|
-
practices: [
|
|
10690
|
+
practices: [
|
|
10691
|
+
"content-alignment"
|
|
10692
|
+
]
|
|
10431
10693
|
},
|
|
10432
10694
|
{
|
|
10433
10695
|
name: "TSpinner",
|
|
@@ -10832,6 +11094,16 @@ var treeui_catalog_default = {
|
|
|
10832
11094
|
name: "loading",
|
|
10833
11095
|
type: "boolean",
|
|
10834
11096
|
default: "false"
|
|
11097
|
+
},
|
|
11098
|
+
{
|
|
11099
|
+
name: "emphasis",
|
|
11100
|
+
type: "TStatEmphasis",
|
|
11101
|
+
default: "label",
|
|
11102
|
+
values: [
|
|
11103
|
+
"label",
|
|
11104
|
+
"value"
|
|
11105
|
+
],
|
|
11106
|
+
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'
|
|
10835
11107
|
}
|
|
10836
11108
|
],
|
|
10837
11109
|
events: [],
|
|
@@ -10858,6 +11130,7 @@ var treeui_catalog_default = {
|
|
|
10858
11130
|
],
|
|
10859
11131
|
behavior: [
|
|
10860
11132
|
"value_and_trend_are_optional: true",
|
|
11133
|
+
"emphasis_reorders_visually_not_in_the_dom: true",
|
|
10861
11134
|
"icon_slot_adds_visual_emphasis: true",
|
|
10862
11135
|
"trend_indicator_changes_with_direction: true",
|
|
10863
11136
|
"loading_renders_internal_skeleton_placeholders: true"
|
|
@@ -10895,6 +11168,7 @@ var treeui_catalog_default = {
|
|
|
10895
11168
|
"metric-dashboard"
|
|
10896
11169
|
],
|
|
10897
11170
|
practices: [
|
|
11171
|
+
"content-alignment",
|
|
10898
11172
|
"token-driven"
|
|
10899
11173
|
]
|
|
10900
11174
|
},
|
|
@@ -10907,7 +11181,7 @@ var treeui_catalog_default = {
|
|
|
10907
11181
|
kind: "navigation",
|
|
10908
11182
|
category: "Navigation",
|
|
10909
11183
|
status: "available",
|
|
10910
|
-
purpose: "
|
|
11184
|
+
purpose: "Ordered sequence \u2014 a wizard to operate, or a described flow to read.",
|
|
10911
11185
|
sourceFile: "packages/vue/src/components/TSteps.vue",
|
|
10912
11186
|
storyFile: "apps/docs/src/stories/Steps.stories.ts",
|
|
10913
11187
|
storyTitle: "Components/Navigation/Steps",
|
|
@@ -10951,7 +11225,20 @@ var treeui_catalog_default = {
|
|
|
10951
11225
|
{
|
|
10952
11226
|
name: "interactive",
|
|
10953
11227
|
type: "boolean",
|
|
10954
|
-
default: "false"
|
|
11228
|
+
default: "false",
|
|
11229
|
+
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"
|
|
11230
|
+
},
|
|
11231
|
+
{
|
|
11232
|
+
name: "columns",
|
|
11233
|
+
type: "number",
|
|
11234
|
+
default: "undefined",
|
|
11235
|
+
note: "Fixed steps per row, horizontal only. Use for a sequence with a shape (3 + 3)."
|
|
11236
|
+
},
|
|
11237
|
+
{
|
|
11238
|
+
name: "minItemWidth",
|
|
11239
|
+
type: "string",
|
|
11240
|
+
default: "14rem",
|
|
11241
|
+
note: "Width at which a step stops shrinking and the strip wraps. Same axis as TGrid."
|
|
10955
11242
|
}
|
|
10956
11243
|
],
|
|
10957
11244
|
events: [
|
|
@@ -10967,10 +11254,13 @@ var treeui_catalog_default = {
|
|
|
10967
11254
|
a11y: [
|
|
10968
11255
|
"semantic_root: ol",
|
|
10969
11256
|
"current_step_uses_aria_current_step: true",
|
|
10970
|
-
"interactive_variant_uses_buttons: true"
|
|
11257
|
+
"interactive_variant_uses_buttons: true",
|
|
11258
|
+
"static_variant_emits_no_control: true"
|
|
10971
11259
|
],
|
|
10972
11260
|
behavior: [
|
|
10973
11261
|
"can_be_controlled_or_uncontrolled: true",
|
|
11262
|
+
"static_variant_elects_no_current_step: true",
|
|
11263
|
+
"shared_box_class_is_t_steps_box: true",
|
|
10974
11264
|
"status_can_be_explicit_or_computed: true",
|
|
10975
11265
|
"alias_export_available: true"
|
|
10976
11266
|
],
|
|
@@ -11001,7 +11291,10 @@ var treeui_catalog_default = {
|
|
|
11001
11291
|
]
|
|
11002
11292
|
},
|
|
11003
11293
|
recipes: [],
|
|
11004
|
-
practices: [
|
|
11294
|
+
practices: [
|
|
11295
|
+
"accessible-by-default",
|
|
11296
|
+
"content-alignment"
|
|
11297
|
+
]
|
|
11005
11298
|
},
|
|
11006
11299
|
{
|
|
11007
11300
|
name: "TSwitch",
|
|
@@ -11112,7 +11405,7 @@ var treeui_catalog_default = {
|
|
|
11112
11405
|
name: "columns",
|
|
11113
11406
|
type: "TTableColumn[]",
|
|
11114
11407
|
required: true,
|
|
11115
|
-
description: "Array of column definitions with key, label, sortable, align, and
|
|
11408
|
+
description: "Array of column definitions with key, label, sortable, align, width, and minWidth."
|
|
11116
11409
|
},
|
|
11117
11410
|
{
|
|
11118
11411
|
name: "rows",
|
|
@@ -11240,7 +11533,7 @@ var treeui_catalog_default = {
|
|
|
11240
11533
|
name: "modelValue",
|
|
11241
11534
|
type: "T",
|
|
11242
11535
|
default: "undefined",
|
|
11243
|
-
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
|
|
11536
|
+
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"
|
|
11244
11537
|
},
|
|
11245
11538
|
{
|
|
11246
11539
|
name: "defaultValue",
|
|
@@ -11290,6 +11583,7 @@ var treeui_catalog_default = {
|
|
|
11290
11583
|
"aria_controls_aria_labelledby_pairing: true"
|
|
11291
11584
|
],
|
|
11292
11585
|
behavior: [
|
|
11586
|
+
"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.",
|
|
11293
11587
|
"arrow_left_right_moves_focus: true",
|
|
11294
11588
|
"home_focuses_first_tab: true",
|
|
11295
11589
|
"end_focuses_last_tab: true",
|
|
@@ -11329,7 +11623,9 @@ var treeui_catalog_default = {
|
|
|
11329
11623
|
"router-backed-tabs"
|
|
11330
11624
|
],
|
|
11331
11625
|
practices: [
|
|
11332
|
-
"interaction-feedback"
|
|
11626
|
+
"interaction-feedback",
|
|
11627
|
+
"accessible-by-default",
|
|
11628
|
+
"content-alignment"
|
|
11333
11629
|
]
|
|
11334
11630
|
},
|
|
11335
11631
|
{
|
|
@@ -11667,6 +11963,17 @@ var treeui_catalog_default = {
|
|
|
11667
11963
|
],
|
|
11668
11964
|
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"
|
|
11669
11965
|
},
|
|
11966
|
+
{
|
|
11967
|
+
name: "align",
|
|
11968
|
+
type: "TTextAlign",
|
|
11969
|
+
default: "undefined",
|
|
11970
|
+
values: [
|
|
11971
|
+
"start",
|
|
11972
|
+
"center",
|
|
11973
|
+
"end"
|
|
11974
|
+
],
|
|
11975
|
+
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"
|
|
11976
|
+
},
|
|
11670
11977
|
{
|
|
11671
11978
|
name: "balance",
|
|
11672
11979
|
type: "boolean",
|
|
@@ -11707,6 +12014,7 @@ var treeui_catalog_default = {
|
|
|
11707
12014
|
"Choose `as` to convey the correct semantics (e.g. headings via h1\u2013h6); TText adds only visual styling."
|
|
11708
12015
|
],
|
|
11709
12016
|
behavior: [
|
|
12017
|
+
'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.',
|
|
11710
12018
|
"semantic_element_controlled_by_as: true",
|
|
11711
12019
|
"token_driven_size_tone_weight: true",
|
|
11712
12020
|
"truncate_takes_precedence_over_preserve_whitespace: true"
|
|
@@ -11728,6 +12036,7 @@ var treeui_catalog_default = {
|
|
|
11728
12036
|
practices: [
|
|
11729
12037
|
"accessible-by-default",
|
|
11730
12038
|
"predictable-api",
|
|
12039
|
+
"content-alignment",
|
|
11731
12040
|
"token-driven"
|
|
11732
12041
|
]
|
|
11733
12042
|
},
|
|
@@ -11744,6 +12053,12 @@ var treeui_catalog_default = {
|
|
|
11744
12053
|
storyTitle: "Components/Data Entry/Textarea",
|
|
11745
12054
|
manifestFile: "docs/ai/COMPONENTS/textarea.yaml",
|
|
11746
12055
|
props: [
|
|
12056
|
+
{
|
|
12057
|
+
name: "spellcheck",
|
|
12058
|
+
type: "boolean",
|
|
12059
|
+
default: "undefined",
|
|
12060
|
+
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.'
|
|
12061
|
+
},
|
|
11747
12062
|
{
|
|
11748
12063
|
name: "modelValue",
|
|
11749
12064
|
type: "string",
|
|
@@ -11817,7 +12132,7 @@ var treeui_catalog_default = {
|
|
|
11817
12132
|
"sans",
|
|
11818
12133
|
"mono"
|
|
11819
12134
|
],
|
|
11820
|
-
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
|
|
12135
|
+
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"
|
|
11821
12136
|
}
|
|
11822
12137
|
],
|
|
11823
12138
|
events: [
|
|
@@ -11917,6 +12232,7 @@ var treeui_catalog_default = {
|
|
|
11917
12232
|
"timestamp_uses_time_element_when_provided: true"
|
|
11918
12233
|
],
|
|
11919
12234
|
behavior: [
|
|
12235
|
+
"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.",
|
|
11920
12236
|
"items_render_in_order_given: true",
|
|
11921
12237
|
"line_hidden_on_last_item: true",
|
|
11922
12238
|
"marker_tone_defaults_to_neutral: true"
|
|
@@ -11932,7 +12248,9 @@ var treeui_catalog_default = {
|
|
|
11932
12248
|
notes: []
|
|
11933
12249
|
},
|
|
11934
12250
|
recipes: [],
|
|
11935
|
-
practices: [
|
|
12251
|
+
practices: [
|
|
12252
|
+
"content-alignment"
|
|
12253
|
+
]
|
|
11936
12254
|
},
|
|
11937
12255
|
{
|
|
11938
12256
|
name: "TToast",
|
|
@@ -11947,6 +12265,12 @@ var treeui_catalog_default = {
|
|
|
11947
12265
|
storyTitle: "Components/Feedback/Toast",
|
|
11948
12266
|
manifestFile: "docs/ai/COMPONENTS/toast.yaml",
|
|
11949
12267
|
props: [
|
|
12268
|
+
{
|
|
12269
|
+
name: "closeLabel",
|
|
12270
|
+
type: "string",
|
|
12271
|
+
default: "Dismiss notification",
|
|
12272
|
+
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."
|
|
12273
|
+
},
|
|
11950
12274
|
{
|
|
11951
12275
|
name: "toast",
|
|
11952
12276
|
type: "ToastItem",
|
|
@@ -12006,6 +12330,7 @@ var treeui_catalog_default = {
|
|
|
12006
12330
|
"confirm-destructive-action"
|
|
12007
12331
|
],
|
|
12008
12332
|
practices: [
|
|
12333
|
+
"accessible-by-default",
|
|
12009
12334
|
"token-driven"
|
|
12010
12335
|
]
|
|
12011
12336
|
},
|
|
@@ -12026,7 +12351,7 @@ var treeui_catalog_default = {
|
|
|
12026
12351
|
name: "modelValue",
|
|
12027
12352
|
type: "TToggleGroupModel<T, M> \u2014 `T` in single mode, `T[]` in multiple",
|
|
12028
12353
|
default: "undefined",
|
|
12029
|
-
note: "Generic over the option type AND the selection mode, so the model is the type the
|
|
12354
|
+
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"
|
|
12030
12355
|
},
|
|
12031
12356
|
{
|
|
12032
12357
|
name: "options",
|
|
@@ -12087,6 +12412,7 @@ var treeui_catalog_default = {
|
|
|
12087
12412
|
"activation_keys_select_option: true"
|
|
12088
12413
|
],
|
|
12089
12414
|
behavior: [
|
|
12415
|
+
'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.',
|
|
12090
12416
|
"single_and_multiple_modes: true",
|
|
12091
12417
|
"variant_changes_visual_style_only: true",
|
|
12092
12418
|
"visible_option_set_expected: true"
|
|
@@ -12127,7 +12453,9 @@ var treeui_catalog_default = {
|
|
|
12127
12453
|
]
|
|
12128
12454
|
},
|
|
12129
12455
|
recipes: [],
|
|
12130
|
-
practices: [
|
|
12456
|
+
practices: [
|
|
12457
|
+
"accessible-by-default"
|
|
12458
|
+
]
|
|
12131
12459
|
},
|
|
12132
12460
|
{
|
|
12133
12461
|
name: "TTooltip",
|
|
@@ -13276,25 +13604,25 @@ var treeui_catalog_default = {
|
|
|
13276
13604
|
{
|
|
13277
13605
|
cssVar: "--tree-color-status-success",
|
|
13278
13606
|
path: "color.status.success",
|
|
13279
|
-
value: "#
|
|
13607
|
+
value: "#197d36",
|
|
13280
13608
|
category: "color",
|
|
13281
13609
|
derived: false,
|
|
13282
13610
|
description: "Themed semantic color, resolved per [data-tree-theme].",
|
|
13283
13611
|
themeValues: {
|
|
13284
|
-
light: "#
|
|
13285
|
-
dark: "#
|
|
13612
|
+
light: "#197d36",
|
|
13613
|
+
dark: "#5bae5e"
|
|
13286
13614
|
}
|
|
13287
13615
|
},
|
|
13288
13616
|
{
|
|
13289
13617
|
cssVar: "--tree-color-status-warning",
|
|
13290
13618
|
path: "color.status.warning",
|
|
13291
|
-
value: "#
|
|
13619
|
+
value: "#946300",
|
|
13292
13620
|
category: "color",
|
|
13293
13621
|
derived: false,
|
|
13294
13622
|
description: "Themed semantic color, resolved per [data-tree-theme].",
|
|
13295
13623
|
themeValues: {
|
|
13296
|
-
light: "#
|
|
13297
|
-
dark: "#
|
|
13624
|
+
light: "#946300",
|
|
13625
|
+
dark: "#c99227"
|
|
13298
13626
|
}
|
|
13299
13627
|
},
|
|
13300
13628
|
{
|
|
@@ -13600,25 +13928,25 @@ var treeui_catalog_default = {
|
|
|
13600
13928
|
{
|
|
13601
13929
|
cssVar: "--tree-color-status-success-hover",
|
|
13602
13930
|
path: "color.status.success-hover",
|
|
13603
|
-
value: "#
|
|
13931
|
+
value: "#15672c",
|
|
13604
13932
|
category: "color",
|
|
13605
13933
|
derived: true,
|
|
13606
13934
|
description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
|
|
13607
13935
|
themeValues: {
|
|
13608
|
-
light: "#
|
|
13609
|
-
dark: "#
|
|
13936
|
+
light: "#15672c",
|
|
13937
|
+
dark: "#79bd7b"
|
|
13610
13938
|
}
|
|
13611
13939
|
},
|
|
13612
13940
|
{
|
|
13613
13941
|
cssVar: "--tree-color-status-success-press",
|
|
13614
13942
|
path: "color.status.success-press",
|
|
13615
|
-
value: "#
|
|
13943
|
+
value: "#115525",
|
|
13616
13944
|
category: "color",
|
|
13617
13945
|
derived: true,
|
|
13618
13946
|
description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
|
|
13619
13947
|
themeValues: {
|
|
13620
|
-
light: "#
|
|
13621
|
-
dark: "#
|
|
13948
|
+
light: "#115525",
|
|
13949
|
+
dark: "#8fc892"
|
|
13622
13950
|
}
|
|
13623
13951
|
},
|
|
13624
13952
|
{
|
|
@@ -13630,31 +13958,31 @@ var treeui_catalog_default = {
|
|
|
13630
13958
|
description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
|
|
13631
13959
|
themeValues: {
|
|
13632
13960
|
light: "#dfede3",
|
|
13633
|
-
dark: "#
|
|
13961
|
+
dark: "#2a3a35"
|
|
13634
13962
|
}
|
|
13635
13963
|
},
|
|
13636
13964
|
{
|
|
13637
13965
|
cssVar: "--tree-color-status-success-soft-hover",
|
|
13638
13966
|
path: "color.status.success-soft-hover",
|
|
13639
|
-
value: "#
|
|
13967
|
+
value: "#c3ddcb",
|
|
13640
13968
|
category: "color",
|
|
13641
13969
|
derived: true,
|
|
13642
13970
|
description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
|
|
13643
13971
|
themeValues: {
|
|
13644
|
-
light: "#
|
|
13645
|
-
dark: "#
|
|
13972
|
+
light: "#c3ddcb",
|
|
13973
|
+
dark: "#314a3b"
|
|
13646
13974
|
}
|
|
13647
13975
|
},
|
|
13648
13976
|
{
|
|
13649
13977
|
cssVar: "--tree-color-status-success-border",
|
|
13650
13978
|
path: "color.status.success-border",
|
|
13651
|
-
value: "#
|
|
13979
|
+
value: "#419359",
|
|
13652
13980
|
category: "color",
|
|
13653
13981
|
derived: true,
|
|
13654
13982
|
description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
|
|
13655
13983
|
themeValues: {
|
|
13656
|
-
light: "#
|
|
13657
|
-
dark: "#
|
|
13984
|
+
light: "#419359",
|
|
13985
|
+
dark: "#4f9154"
|
|
13658
13986
|
}
|
|
13659
13987
|
},
|
|
13660
13988
|
{
|
|
@@ -13672,49 +14000,49 @@ var treeui_catalog_default = {
|
|
|
13672
14000
|
{
|
|
13673
14001
|
cssVar: "--tree-color-status-success-on-soft",
|
|
13674
14002
|
path: "color.status.success-on-soft",
|
|
13675
|
-
value: "#
|
|
14003
|
+
value: "#187733",
|
|
13676
14004
|
category: "color",
|
|
13677
14005
|
derived: true,
|
|
13678
14006
|
description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
|
|
13679
14007
|
themeValues: {
|
|
13680
|
-
light: "#
|
|
13681
|
-
dark: "#
|
|
14008
|
+
light: "#187733",
|
|
14009
|
+
dark: "#63b266"
|
|
13682
14010
|
}
|
|
13683
14011
|
},
|
|
13684
14012
|
{
|
|
13685
14013
|
cssVar: "--tree-color-status-success-on-soft-hover",
|
|
13686
14014
|
path: "color.status.success-on-soft-hover",
|
|
13687
|
-
value: "#
|
|
14015
|
+
value: "#156b2e",
|
|
13688
14016
|
category: "color",
|
|
13689
14017
|
derived: true,
|
|
13690
14018
|
description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
|
|
13691
14019
|
themeValues: {
|
|
13692
|
-
light: "#
|
|
13693
|
-
dark: "#
|
|
14020
|
+
light: "#156b2e",
|
|
14021
|
+
dark: "#80c082"
|
|
13694
14022
|
}
|
|
13695
14023
|
},
|
|
13696
14024
|
{
|
|
13697
14025
|
cssVar: "--tree-color-status-warning-hover",
|
|
13698
14026
|
path: "color.status.warning-hover",
|
|
13699
|
-
value: "#
|
|
14027
|
+
value: "#795100",
|
|
13700
14028
|
category: "color",
|
|
13701
14029
|
derived: true,
|
|
13702
14030
|
description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
|
|
13703
14031
|
themeValues: {
|
|
13704
|
-
light: "#
|
|
13705
|
-
dark: "#
|
|
14032
|
+
light: "#795100",
|
|
14033
|
+
dark: "#d3a64e"
|
|
13706
14034
|
}
|
|
13707
14035
|
},
|
|
13708
14036
|
{
|
|
13709
14037
|
cssVar: "--tree-color-status-warning-press",
|
|
13710
14038
|
path: "color.status.warning-press",
|
|
13711
|
-
value: "#
|
|
14039
|
+
value: "#654300",
|
|
13712
14040
|
category: "color",
|
|
13713
14041
|
derived: true,
|
|
13714
14042
|
description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
|
|
13715
14043
|
themeValues: {
|
|
13716
|
-
light: "#
|
|
13717
|
-
dark: "#
|
|
14044
|
+
light: "#654300",
|
|
14045
|
+
dark: "#dab56c"
|
|
13718
14046
|
}
|
|
13719
14047
|
},
|
|
13720
14048
|
{
|
|
@@ -13744,13 +14072,13 @@ var treeui_catalog_default = {
|
|
|
13744
14072
|
{
|
|
13745
14073
|
cssVar: "--tree-color-status-warning-border",
|
|
13746
14074
|
path: "color.status.warning-border",
|
|
13747
|
-
value: "#
|
|
14075
|
+
value: "#a67e2c",
|
|
13748
14076
|
category: "color",
|
|
13749
14077
|
derived: true,
|
|
13750
14078
|
description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
|
|
13751
14079
|
themeValues: {
|
|
13752
|
-
light: "#
|
|
13753
|
-
dark: "#
|
|
14080
|
+
light: "#a67e2c",
|
|
14081
|
+
dark: "#a57b29"
|
|
13754
14082
|
}
|
|
13755
14083
|
},
|
|
13756
14084
|
{
|
|
@@ -13768,25 +14096,25 @@ var treeui_catalog_default = {
|
|
|
13768
14096
|
{
|
|
13769
14097
|
cssVar: "--tree-color-status-warning-on-soft",
|
|
13770
14098
|
path: "color.status.warning-on-soft",
|
|
13771
|
-
value: "#
|
|
14099
|
+
value: "#8d5e00",
|
|
13772
14100
|
category: "color",
|
|
13773
14101
|
derived: true,
|
|
13774
14102
|
description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
|
|
13775
14103
|
themeValues: {
|
|
13776
|
-
light: "#
|
|
13777
|
-
dark: "#
|
|
14104
|
+
light: "#8d5e00",
|
|
14105
|
+
dark: "#cc9732"
|
|
13778
14106
|
}
|
|
13779
14107
|
},
|
|
13780
14108
|
{
|
|
13781
14109
|
cssVar: "--tree-color-status-warning-on-soft-hover",
|
|
13782
14110
|
path: "color.status.warning-on-soft-hover",
|
|
13783
|
-
value: "#
|
|
14111
|
+
value: "#7f5500",
|
|
13784
14112
|
category: "color",
|
|
13785
14113
|
derived: true,
|
|
13786
14114
|
description: "Themed semantic color, resolved per [data-tree-theme]. Derived by the library from the semantic layer \u2014 read it, do not override it.",
|
|
13787
14115
|
themeValues: {
|
|
13788
|
-
light: "#
|
|
13789
|
-
dark: "#
|
|
14116
|
+
light: "#7f5500",
|
|
14117
|
+
dark: "#d5ab58"
|
|
13790
14118
|
}
|
|
13791
14119
|
},
|
|
13792
14120
|
{
|