@acronis-platform/ui-react 5.5.8 → 6.0.0
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/components/ui/chart/chart.js +14 -11
- package/dist/components/ui/chart/chart.js.map +1 -1
- package/dist/components/ui/chart-state/chart-state.js +47 -37
- package/dist/components/ui/chart-state/chart-state.js.map +1 -1
- package/dist/components/ui/chart-widget/chart-widget.js +21 -23
- package/dist/components/ui/chart-widget/chart-widget.js.map +1 -1
- package/dist/components/ui/data-table/data-table-column-header.js +22 -14
- package/dist/components/ui/data-table/data-table-column-header.js.map +1 -1
- package/dist/components/ui/data-table/data-table.js +137 -137
- package/dist/components/ui/data-table/data-table.js.map +1 -1
- package/dist/components/ui/dialog/dialog.js +45 -32
- package/dist/components/ui/dialog/dialog.js.map +1 -1
- package/dist/components/ui/pie-chart/pie-chart.js +88 -84
- package/dist/components/ui/pie-chart/pie-chart.js.map +1 -1
- package/dist/index.js +86 -87
- package/dist/llms/chart-state.md +81 -164
- package/dist/llms/chart-widget.md +27 -25
- package/dist/llms/dialog-root.md +40 -13
- package/dist/llms/dialog.md +26 -1
- package/dist/llms.txt +3 -3
- package/dist/react.js +86 -87
- package/dist/src/components/ui/chart/chart.d.ts +3 -3
- package/dist/src/components/ui/chart-state/chart-state.d.ts +5 -14
- package/dist/src/components/ui/chart-state/index.d.ts +0 -1
- package/dist/src/components/ui/chart-widget/chart-widget.d.ts +10 -15
- package/dist/src/components/ui/data-table/data-table.d.ts +2 -2
- package/dist/src/components/ui/dialog/dialog.d.ts +9 -0
- package/dist/src/components/ui/dialog/dialog.docs.d.ts +5 -1
- package/dist/src/components/ui/pie-chart/pie-chart.d.ts +1 -1
- package/dist/ui-react.css +1 -1
- package/package.json +13 -13
- package/dist/components/ui/chart-state/chart-state-illustrations.js +0 -412
- package/dist/components/ui/chart-state/chart-state-illustrations.js.map +0 -1
- package/dist/src/components/ui/chart-state/chart-state-illustrations.d.ts +0 -6
package/dist/index.js
CHANGED
|
@@ -36,93 +36,92 @@ import { CardSection as sn, cardSectionVariants as cn } from "./components/ui/ca
|
|
|
36
36
|
import { CardWidgetCarousel as ln } from "./components/ui/card-widget-carousel/card-widget-carousel.js";
|
|
37
37
|
import { CardWidget as un } from "./components/ui/card-widget-carousel/card-widget.js";
|
|
38
38
|
import { CategoryBar as dn, categoryBarVariants as fn } from "./components/ui/category-bar/category-bar.js";
|
|
39
|
-
import {
|
|
40
|
-
import {
|
|
41
|
-
import {
|
|
42
|
-
import {
|
|
43
|
-
import {
|
|
44
|
-
import {
|
|
45
|
-
import {
|
|
46
|
-
import {
|
|
47
|
-
import {
|
|
48
|
-
import {
|
|
49
|
-
import {
|
|
50
|
-
import {
|
|
51
|
-
import {
|
|
52
|
-
import {
|
|
53
|
-
import {
|
|
54
|
-
import {
|
|
55
|
-
import {
|
|
56
|
-
import {
|
|
57
|
-
import {
|
|
58
|
-
import {
|
|
59
|
-
import {
|
|
60
|
-
import { FilterSearch as wr, FilterSearchActions as Tr, FilterSearchAppliedFilters as Er, FilterSearchFilters as Dr, useFilterSearchFilters as Or } from "./components/ui/filter-search/filter-search.js";
|
|
39
|
+
import { ChartState as pn } from "./components/ui/chart-state/chart-state.js";
|
|
40
|
+
import { ChartWidget as mn } from "./components/ui/chart-widget/chart-widget.js";
|
|
41
|
+
import { Checkbox as hn } from "./components/ui/checkbox/checkbox.js";
|
|
42
|
+
import { Chip as gn, chipVariants as _n } from "./components/ui/chip/chip.js";
|
|
43
|
+
import { Combobox as vn, ComboboxContent as yn, ComboboxEmpty as bn, ComboboxGroup as xn, ComboboxGroupLabel as Sn, ComboboxInput as Cn, ComboboxItem as wn, ComboboxList as Tn } from "./components/ui/combobox/combobox.js";
|
|
44
|
+
import { ComposedChart as En, composedChartVariants as Dn } from "./components/ui/composed-chart/composed-chart.js";
|
|
45
|
+
import { ConfidenceCone as On } from "./components/ui/confidence-cone/confidence-cone.js";
|
|
46
|
+
import { DropdownMenu as kn, DropdownMenuCheckboxItem as An, DropdownMenuContent as jn, DropdownMenuGroup as Mn, DropdownMenuItem as Nn, DropdownMenuLabel as Pn, DropdownMenuPortal as Fn, DropdownMenuRadioGroup as In, DropdownMenuRadioItem as Ln, DropdownMenuSeparator as Rn, DropdownMenuShortcut as zn, DropdownMenuSub as Bn, DropdownMenuSubContent as Vn, DropdownMenuSubTrigger as Hn, DropdownMenuTrigger as Un } from "./components/ui/dropdown-menu/dropdown-menu.js";
|
|
47
|
+
import { Table as Wn, TableActionsCell as Gn, TableBody as Kn, TableCaption as qn, TableCell as Jn, TableFooter as Yn, TableHead as Xn, TableHeader as Zn, TableRow as Qn, TableSelectCell as $n, TableSettingsCell as er } from "./components/ui/table/table.js";
|
|
48
|
+
import { TablePagination as tr } from "./components/ui/table/table-pagination.js";
|
|
49
|
+
import { TableViewOptions as nr } from "./components/ui/table/table-view-options.js";
|
|
50
|
+
import { isBulkSelectionActive as rr } from "./components/ui/data-table/data-table-selection.js";
|
|
51
|
+
import { DataTableViewOptions as ir } from "./components/ui/data-table/data-table-view-options.js";
|
|
52
|
+
import { DataTable as ar, getCellStyle as or, getColumnWidth as sr, getPinnedStyle as cr, reorderColumn as lr } from "./components/ui/data-table/data-table.js";
|
|
53
|
+
import { DataTableBulkActionsBar as ur } from "./components/ui/data-table/data-table-bulk-actions-bar.js";
|
|
54
|
+
import { DataTableColumnHeader as dr } from "./components/ui/data-table/data-table-column-header.js";
|
|
55
|
+
import { DataTableExpandTrigger as fr } from "./components/ui/data-table/data-table-expand-trigger.js";
|
|
56
|
+
import { DataTablePagination as pr } from "./components/ui/data-table/data-table-pagination.js";
|
|
57
|
+
import { FilterChips as mr, FilterChipsList as hr, FilterChipsReset as gr } from "./components/ui/filter-chips/filter-chips.js";
|
|
58
|
+
import { Popover as _r, PopoverBody as vr, PopoverContent as yr, PopoverFooter as br, PopoverPortal as xr, PopoverTrigger as Sr } from "./components/ui/popover/popover.js";
|
|
59
|
+
import { FilterSearch as Cr, FilterSearchActions as wr, FilterSearchAppliedFilters as Tr, FilterSearchFilters as Er, useFilterSearchFilters as Dr } from "./components/ui/filter-search/filter-search.js";
|
|
61
60
|
import { InputSearch as L } from "./components/ui/input-search/input-search.js";
|
|
62
|
-
import { DataTableToolbar as
|
|
63
|
-
import { InputDatePicker as
|
|
64
|
-
import { DateRangePicker as
|
|
65
|
-
import { DescriptionList as
|
|
66
|
-
import { InputBox as
|
|
61
|
+
import { DataTableToolbar as Or } from "./components/ui/data-table/data-table-toolbar.js";
|
|
62
|
+
import { InputDatePicker as R } from "./components/ui/input-date-picker/input-date-picker.js";
|
|
63
|
+
import { DateRangePicker as kr } from "./components/ui/date-range-picker/date-range-picker.js";
|
|
64
|
+
import { DescriptionList as Ar, DescriptionListActions as jr, DescriptionListItem as Mr, DescriptionListLabel as Nr, DescriptionListValue as Pr, DescriptionListValueDescription as Fr } from "./components/ui/description-list/description-list.js";
|
|
65
|
+
import { InputBox as Ir } from "./components/ui/input/input.js";
|
|
67
66
|
import { InputText as z } from "./components/ui/input-text/input-text.js";
|
|
68
|
-
import { Loading as
|
|
69
|
-
import { Dialog as
|
|
70
|
-
import { DialogFooterCarousel as
|
|
71
|
-
import { DialogWelcome as
|
|
72
|
-
import { Empty as
|
|
73
|
-
import { EmptyOverlay as
|
|
74
|
-
import { labelClassName as
|
|
75
|
-
import { Separator as
|
|
76
|
-
import { Field as
|
|
77
|
-
import { FittedActions as
|
|
78
|
-
import { FilterCards as
|
|
79
|
-
import { FUNNEL_CHART_DEFAULT_PALETTE as
|
|
80
|
-
import { Grid as
|
|
81
|
-
import { Histogram as
|
|
82
|
-
import { Form as
|
|
83
|
-
import { RadarChart as
|
|
84
|
-
import { RadialBarChart as
|
|
85
|
-
import { Radio as
|
|
86
|
-
import { InputNumPicker as
|
|
87
|
-
import { InputOTP as
|
|
88
|
-
import { InputPassword as
|
|
67
|
+
import { Loading as Lr, loadingVariants as Rr } from "./components/ui/loading/loading.js";
|
|
68
|
+
import { Dialog as zr, DialogClose as Br } from "./components/ui/dialog/dialog.js";
|
|
69
|
+
import { DialogFooterCarousel as Vr } from "./components/ui/dialog-footer-carousel/dialog-footer-carousel.js";
|
|
70
|
+
import { DialogWelcome as Hr } from "./components/ui/dialog-welcome/dialog-welcome.js";
|
|
71
|
+
import { Empty as Ur, EmptyActions as Wr, EmptyDescription as Gr, EmptyHeader as Kr, EmptyIcon as qr, EmptyLinks as Jr, EmptyTitle as Yr } from "./components/ui/empty/empty.js";
|
|
72
|
+
import { EmptyOverlay as Xr, emptyOverlayIconVariants as Zr } from "./components/ui/empty-overlay/empty-overlay.js";
|
|
73
|
+
import { labelClassName as Qr } from "./components/ui/label/label.js";
|
|
74
|
+
import { Separator as $r } from "./components/ui/separator/separator.js";
|
|
75
|
+
import { Field as ei, FieldContent as ti, FieldControl as ni, FieldDescription as ri, FieldError as ii, FieldGroup as ai, FieldLabel as oi, FieldLegend as si, FieldSeparator as ci, FieldSet as li, FieldTitle as ui } from "./components/ui/field/field.js";
|
|
76
|
+
import { FittedActions as di, computeFittedVisibleCount as fi } from "./components/ui/fitted-actions/fitted-actions.js";
|
|
77
|
+
import { FilterCards as pi } from "./components/ui/filter-cards/filter-cards.js";
|
|
78
|
+
import { FUNNEL_CHART_DEFAULT_PALETTE as mi, FunnelChart as hi, funnelChartPercent as gi, funnelChartVariants as _i } from "./components/ui/funnel-chart/funnel-chart.js";
|
|
79
|
+
import { Grid as vi, gridVariants as yi } from "./components/ui/grid/grid.js";
|
|
80
|
+
import { Histogram as bi } from "./components/ui/histogram/histogram.js";
|
|
81
|
+
import { Form as xi } from "./components/ui/form/form.js";
|
|
82
|
+
import { RadarChart as Si, radarChartVariants as Ci } from "./components/ui/radar-chart/radar-chart.js";
|
|
83
|
+
import { RadialBarChart as wi } from "./components/ui/radial-bar-chart/radial-bar-chart.js";
|
|
84
|
+
import { Radio as Ti, RadioGroup as Ei } from "./components/ui/radio/radio.js";
|
|
85
|
+
import { InputNumPicker as Di } from "./components/ui/input-num-picker/input-num-picker.js";
|
|
86
|
+
import { InputOTP as Oi } from "./components/ui/input-otp/input-otp.js";
|
|
87
|
+
import { InputPassword as ki } from "./components/ui/input-password/input-password.js";
|
|
89
88
|
import { InputTextArea as B } from "./components/ui/input-text-area/input-text-area.js";
|
|
90
|
-
import { LineChart as
|
|
91
|
-
import { Link as
|
|
92
|
-
import { Skeleton as
|
|
93
|
-
import { TrendIndicator as
|
|
94
|
-
import { Metric as
|
|
95
|
-
import { NumberField as
|
|
96
|
-
import { PageContent as
|
|
97
|
-
import { Tag as V, tagVariants as
|
|
98
|
-
import { PageHeader as
|
|
99
|
-
import { Pagination as
|
|
100
|
-
import { PieChart as
|
|
101
|
-
import { Progress as
|
|
102
|
-
import { ProgressCircle as
|
|
103
|
-
import { SankeyChart as
|
|
104
|
-
import { ScatterChart as
|
|
105
|
-
import { ScrollArea as
|
|
106
|
-
import { Section as
|
|
107
|
-
import { SegmentControl as
|
|
108
|
-
import { Sheet as H, SheetBody as U, SheetClose as W, SheetCloseButton as G, SheetContent as K, SheetDescription as q, SheetFooter as J, SheetHeader as Y, SheetOverlay as X, SheetPortal as Z, SheetTitle as Q, SheetTrigger as $, sheetVariants as
|
|
109
|
-
import { SheetDetails as
|
|
110
|
-
import { Slider as
|
|
111
|
-
import { Stack as
|
|
112
|
-
import { Stepper as
|
|
113
|
-
import { StepperItem as
|
|
114
|
-
import { ResizableHandle as
|
|
115
|
-
import { SidebarPrimary as
|
|
116
|
-
import { SidebarSecondary as
|
|
117
|
-
import { ButtonIconMenu as
|
|
118
|
-
import { Tabs as
|
|
119
|
-
import { Toaster as
|
|
120
|
-
import { Toggle as
|
|
121
|
-
import { Toolbar as
|
|
122
|
-
import { Timeline as
|
|
123
|
-
import { Timer as
|
|
124
|
-
import { TreeItem as
|
|
125
|
-
import { Treemap as
|
|
126
|
-
import { WidgetPlaceholder as
|
|
127
|
-
import { Wizard as
|
|
128
|
-
export { _e as Accordion, xe as AccordionContainer, Se as AccordionContainerContent, Ce as AccordionContainerTrigger, ve as AccordionContent, ye as AccordionItem, be as AccordionTrigger, n as Alert, r as AlertActions, i as AlertClose, a as AlertContent, o as AlertDescription, s as AlertIcon, c as AlertText, l as AlertTitle, h as AppShellChat, g as AppShellChatChat, _ as AppShellChatChatBody, v as AppShellChatChatHeader, y as AppShellChatContent, b as AppShellChatContentBody, x as AppShellChatContentHeader, S as AppShellChatSidebar, dt as AreaChart, pt as Avatar, mt as AvatarFallback, ht as AvatarGroup, gt as AvatarImage, ce as BREAKPOINT_2XL, le as BREAKPOINT_3XL, ue as BREAKPOINT_4XL, de as BREAKPOINT_LG, fe as BREAKPOINT_XL, V as Badge, vt as BarChart, bt as Breadcrumb, xt as BreadcrumbEllipsis, St as BreadcrumbItem, Ct as BreadcrumbLink, wt as BreadcrumbList, Tt as BreadcrumbPage, Et as BreadcrumbSeparator, Dt as Button, kt as ButtonGroup, At as ButtonGroupItem, e as ButtonIcon, Xt as ButtonIconInput,
|
|
89
|
+
import { LineChart as Ai, lineChartVariants as ji } from "./components/ui/line-chart/line-chart.js";
|
|
90
|
+
import { Link as Mi, linkVariants as Ni } from "./components/ui/link/link.js";
|
|
91
|
+
import { Skeleton as Pi } from "./components/ui/skeleton/skeleton.js";
|
|
92
|
+
import { TrendIndicator as Fi, trendIndicatorVariants as Ii } from "./components/ui/trend-indicator/trend-indicator.js";
|
|
93
|
+
import { Metric as Li } from "./components/ui/metric/metric.js";
|
|
94
|
+
import { NumberField as Ri, NumberFieldDecrement as zi, NumberFieldGroup as Bi, NumberFieldIncrement as Vi, NumberFieldInput as Hi } from "./components/ui/number-field/number-field.js";
|
|
95
|
+
import { PageContent as Ui } from "./components/ui/page-content/page-content.js";
|
|
96
|
+
import { Tag as V, tagVariants as Wi } from "./components/ui/tag/tag.js";
|
|
97
|
+
import { PageHeader as Gi, PageHeaderActions as Ki, PageHeaderDescription as qi, PageHeaderDescriptionRow as Ji, PageHeaderRow as Yi, PageHeaderTags as Xi, PageHeaderTitle as Zi } from "./components/ui/page-header/page-header.js";
|
|
98
|
+
import { Pagination as Qi, PaginationContent as $i, PaginationEllipsis as ea, PaginationItem as ta, PaginationLink as na, PaginationNext as ra, PaginationPrevious as ia } from "./components/ui/pagination/pagination.js";
|
|
99
|
+
import { PieChart as aa, pieChartVariants as oa } from "./components/ui/pie-chart/pie-chart.js";
|
|
100
|
+
import { Progress as sa } from "./components/ui/progress/progress.js";
|
|
101
|
+
import { ProgressCircle as ca, progressCircleVariants as la } from "./components/ui/progress-circle/progress-circle.js";
|
|
102
|
+
import { SankeyChart as ua } from "./components/ui/sankey-chart/sankey-chart.js";
|
|
103
|
+
import { ScatterChart as da } from "./components/ui/scatter-chart/scatter-chart.js";
|
|
104
|
+
import { ScrollArea as fa, ScrollBar as pa } from "./components/ui/scroll-area/scroll-area.js";
|
|
105
|
+
import { Section as ma, SectionContent as ha, SectionHeader as ga, sectionVariants as _a, useSectionContext as va } from "./components/ui/section/section.js";
|
|
106
|
+
import { SegmentControl as ya, SegmentControlItem as ba, segmentControlVariants as xa } from "./components/ui/segment-control/segment-control.js";
|
|
107
|
+
import { Sheet as H, SheetBody as U, SheetClose as W, SheetCloseButton as G, SheetContent as K, SheetDescription as q, SheetFooter as J, SheetHeader as Y, SheetOverlay as X, SheetPortal as Z, SheetTitle as Q, SheetTrigger as $, sheetVariants as Sa } from "./components/ui/sheet/sheet.js";
|
|
108
|
+
import { SheetDetails as Ca } from "./components/ui/sheet/sheet-details.js";
|
|
109
|
+
import { Slider as wa } from "./components/ui/slider/slider.js";
|
|
110
|
+
import { Stack as Ta, stackVariants as Ea } from "./components/ui/stack/stack.js";
|
|
111
|
+
import { Stepper as Da } from "./components/ui/stepper/stepper.js";
|
|
112
|
+
import { StepperItem as Oa, stepperItemVariants as ka } from "./components/ui/stepper-item/stepper-item.js";
|
|
113
|
+
import { ResizableHandle as Aa, ResizablePanel as ja, ResizablePanelGroup as Ma } from "./components/ui/resizable/resizable.js";
|
|
114
|
+
import { SidebarPrimary as Na, SidebarPrimaryCollapseTrigger as Pa, SidebarPrimaryContent as Fa, SidebarPrimaryFooter as Ia, SidebarPrimaryHeader as La, SidebarPrimaryMenu as Ra, SidebarPrimaryMenuItem as za, SidebarPrimaryMenuItemExtras as Ba, SidebarPrimarySection as Va, sidebarPrimaryMenuItemVariants as Ha } from "./components/ui/sidebar-primary/sidebar-primary.js";
|
|
115
|
+
import { SidebarSecondary as Ua, SidebarSecondaryCollapseTrigger as Wa, SidebarSecondaryContent as Ga, SidebarSecondaryFooter as Ka, SidebarSecondaryHeader as qa, SidebarSecondaryMenu as Ja, SidebarSecondaryMenuItem as Ya, SidebarSecondaryMenuItemExtras as Xa, SidebarSecondarySection as Za, SidebarSecondarySectionLabel as Qa, sidebarSecondaryMenuItemVariants as $a } from "./components/ui/sidebar-secondary/sidebar-secondary.js";
|
|
116
|
+
import { ButtonIconMenu as eo } from "./components/ui/button-icon-menu/button-icon-menu.js";
|
|
117
|
+
import { Tabs as to, TabsContent as no, TabsList as ro, TabsTrigger as io } from "./components/ui/tabs/tabs.js";
|
|
118
|
+
import { Toaster as ao, toast as oo, toastVariants as so } from "./components/ui/toast/toast.js";
|
|
119
|
+
import { Toggle as co, ToggleGroup as lo, ToggleGroupItem as uo } from "./components/ui/toggle-group/toggle-group.js";
|
|
120
|
+
import { Toolbar as fo, ToolbarActionList as po, ToolbarActions as mo } from "./components/ui/toolbar/toolbar.js";
|
|
121
|
+
import { Timeline as ho, TimelineItem as go } from "./components/ui/timeline/timeline.js";
|
|
122
|
+
import { Timer as _o } from "./components/ui/timer/timer.js";
|
|
123
|
+
import { TreeItem as vo } from "./components/ui/tree-item/tree-item.js";
|
|
124
|
+
import { Treemap as yo } from "./components/ui/treemap/treemap.js";
|
|
125
|
+
import { WidgetPlaceholder as bo, WidgetPlaceholderAction as xo, WidgetPlaceholderContent as So, WidgetPlaceholderFooter as Co, WidgetPlaceholderHeader as wo, WidgetPlaceholderIcon as To, WidgetPlaceholderImage as Eo, WidgetPlaceholderText as Do, WidgetPlaceholderTitle as Oo } from "./components/ui/widget-placeholder/widget-placeholder.js";
|
|
126
|
+
import { Wizard as ko, WizardBody as Ao, WizardHeader as jo, WizardSubtitle as Mo } from "./components/ui/wizard/wizard.js";
|
|
127
|
+
export { _e as Accordion, xe as AccordionContainer, Se as AccordionContainerContent, Ce as AccordionContainerTrigger, ve as AccordionContent, ye as AccordionItem, be as AccordionTrigger, n as Alert, r as AlertActions, i as AlertClose, a as AlertContent, o as AlertDescription, s as AlertIcon, c as AlertText, l as AlertTitle, h as AppShellChat, g as AppShellChatChat, _ as AppShellChatChatBody, v as AppShellChatChatHeader, y as AppShellChatContent, b as AppShellChatContentBody, x as AppShellChatContentHeader, S as AppShellChatSidebar, dt as AreaChart, pt as Avatar, mt as AvatarFallback, ht as AvatarGroup, gt as AvatarImage, ce as BREAKPOINT_2XL, le as BREAKPOINT_3XL, ue as BREAKPOINT_4XL, de as BREAKPOINT_LG, fe as BREAKPOINT_XL, V as Badge, vt as BarChart, bt as Breadcrumb, xt as BreadcrumbEllipsis, St as BreadcrumbItem, Ct as BreadcrumbLink, wt as BreadcrumbList, Tt as BreadcrumbPage, Et as BreadcrumbSeparator, Dt as Button, kt as ButtonGroup, At as ButtonGroupItem, e as ButtonIcon, Xt as ButtonIconInput, eo as ButtonIconMenu, Nt as ButtonMenu, Be as CHART_BRUSH_ARIA_LABEL, Ve as CHART_BRUSH_HEIGHT, O as CHART_CATEGORICAL_TOKENS, k as CHART_DEFAULT_PALETTE, Te as CHART_DIVERGING_TOKENS, He as CHART_LABEL_FILL_CLASS, Ue as CHART_LABEL_FILL_ON_SERIES_CLASS, We as CHART_LABEL_FONT_SIZE, Ge as CHART_LABEL_MARGIN, Ke as CHART_REFERENCE_LINE_STROKE, Ee as CHART_SEQUENTIAL_TOKENS, De as CHART_STATUS_TOKENS, Ft as Calendar, It as CalendarDayButton, qt as CalendarHeader, Jt as CalendarItem, Yt as CalendarPanel, $t as Card, en as CardContent, an as CardFilter, tn as CardFooter, nn as CardHeader, sn as CardSection, un as CardWidget, ln as CardWidgetCarousel, dn as CategoryBar, Me as ChartContainer, Ne as ChartLegend, Pe as ChartLegendContent, pn as ChartState, Fe as ChartStyle, Ie as ChartTooltip, Le as ChartTooltipContent, mn as ChartWidget, hn as Checkbox, gn as Chip, vn as Combobox, yn as ComboboxContent, bn as ComboboxEmpty, xn as ComboboxGroup, Sn as ComboboxGroupLabel, Cn as ComboboxInput, wn as ComboboxItem, Tn as ComboboxList, En as ComposedChart, On as ConfidenceCone, re as DEFAULT_TABLE_URL_PARAM_KEYS, ar as DataTable, ur as DataTableBulkActionsBar, dr as DataTableColumnHeader, fr as DataTableExpandTrigger, pr as DataTablePagination, Or as DataTableToolbar, ir as DataTableViewOptions, kr as DateRangePicker, Ar as DescriptionList, jr as DescriptionListActions, Mr as DescriptionListItem, Nr as DescriptionListLabel, Pr as DescriptionListValue, Fr as DescriptionListValueDescription, H as Details, U as DetailsBody, W as DetailsClose, G as DetailsCloseButton, K as DetailsContent, q as DetailsDescription, J as DetailsFooter, Y as DetailsHeader, X as DetailsOverlay, Z as DetailsPortal, Q as DetailsTitle, $ as DetailsTrigger, zr as Dialog, Br as DialogClose, Vr as DialogFooterCarousel, Lt as DialogFooterDefault, Hr as DialogWelcome, kn as DropdownMenu, An as DropdownMenuCheckboxItem, jn as DropdownMenuContent, Mn as DropdownMenuGroup, Nn as DropdownMenuItem, Pn as DropdownMenuLabel, Fn as DropdownMenuPortal, In as DropdownMenuRadioGroup, Ln as DropdownMenuRadioItem, Rn as DropdownMenuSeparator, zn as DropdownMenuShortcut, Bn as DropdownMenuSub, Vn as DropdownMenuSubContent, Hn as DropdownMenuSubTrigger, Un as DropdownMenuTrigger, Ur as Empty, Wr as EmptyActions, Gr as EmptyDescription, Kr as EmptyHeader, qr as EmptyIcon, Jr as EmptyLinks, Xr as EmptyOverlay, Yr as EmptyTitle, mi as FUNNEL_CHART_DEFAULT_PALETTE, ei as Field, ti as FieldContent, ni as FieldControl, ri as FieldDescription, ii as FieldError, ai as FieldGroup, oi as FieldLabel, si as FieldLegend, ci as FieldSeparator, li as FieldSet, ui as FieldTitle, pi as FilterCards, mr as FilterChips, hr as FilterChipsList, gr as FilterChipsReset, Cr as FilterSearch, wr as FilterSearchActions, Tr as FilterSearchAppliedFilters, Er as FilterSearchFilters, di as FittedActions, xi as Form, hi as FunnelChart, vi as Grid, bi as Histogram, z as Input, Ir as InputBox, R as InputDatePicker, Di as InputNumPicker, Oi as InputOTP, ki as InputPassword, L as InputSearch, A as InputSelect, j as InputSelectContent, Rt as InputSelectDescription, zt as InputSelectError, Bt as InputSelectExpander, Vt as InputSelectField, Ht as InputSelectGroup, M as InputSelectItem, Ut as InputSelectLabel, Wt as InputSelectSearch, N as InputSelectSection, P as InputSelectSectionLabel, Gt as InputSelectStatus, F as InputSelectTrigger, I as InputSelectValue, z as InputText, B as InputTextArea, Ai as LineChart, Mi as Link, Lr as Loading, Li as Metric, Ri as NumberField, zi as NumberFieldDecrement, Bi as NumberFieldGroup, Vi as NumberFieldIncrement, Hi as NumberFieldInput, Ui as PageContent, Gi as PageHeader, Ki as PageHeaderActions, qi as PageHeaderDescription, Ji as PageHeaderDescriptionRow, Yi as PageHeaderRow, Xi as PageHeaderTags, Zi as PageHeaderTitle, Qi as Pagination, $i as PaginationContent, ea as PaginationEllipsis, ta as PaginationItem, na as PaginationLink, ra as PaginationNext, ia as PaginationPrevious, aa as PieChart, _r as Popover, vr as PopoverBody, yr as PopoverContent, br as PopoverFooter, xr as PopoverPortal, Sr as PopoverTrigger, he as PortalContainerProvider, sa as Progress, ca as ProgressCircle, pe as ROOT_FONT_SIZE_PX, Si as RadarChart, wi as RadialBarChart, Ti as Radio, Ei as RadioGroup, Aa as ResizableHandle, ja as ResizablePanel, Ma as ResizablePanelGroup, ua as SankeyChart, da as ScatterChart, fa as ScrollArea, pa as ScrollBar, L as Search, ma as Section, ha as SectionContent, ga as SectionHeader, ya as SegmentControl, ba as SegmentControlItem, A as Select, j as SelectContent, N as SelectGroup, P as SelectGroupLabel, M as SelectItem, F as SelectTrigger, I as SelectValue, $r as Separator, H as Sheet, U as SheetBody, W as SheetClose, G as SheetCloseButton, K as SheetContent, q as SheetDescription, Ca as SheetDetails, J as SheetFooter, Y as SheetHeader, X as SheetOverlay, Z as SheetPortal, Q as SheetTitle, $ as SheetTrigger, Na as SidebarPrimary, Pa as SidebarPrimaryCollapseTrigger, Fa as SidebarPrimaryContent, Ia as SidebarPrimaryFooter, La as SidebarPrimaryHeader, Ra as SidebarPrimaryMenu, za as SidebarPrimaryMenuItem, Ba as SidebarPrimaryMenuItemExtras, Va as SidebarPrimarySection, Ua as SidebarSecondary, Wa as SidebarSecondaryCollapseTrigger, Ga as SidebarSecondaryContent, Ka as SidebarSecondaryFooter, qa as SidebarSecondaryHeader, Ja as SidebarSecondaryMenu, Ya as SidebarSecondaryMenuItem, Xa as SidebarSecondaryMenuItemExtras, Za as SidebarSecondarySection, Qa as SidebarSecondarySectionLabel, Pi as Skeleton, wa as Slider, Ta as Stack, Da as Stepper, Oa as StepperItem, Qt as Switch, Wn as Table, Gn as TableActionsCell, Kn as TableBody, qn as TableCaption, Jn as TableCell, Yn as TableFooter, Xn as TableHead, Zn as TableHeader, tr as TablePagination, Qn as TableRow, $n as TableSelectCell, er as TableSettingsCell, nr as TableViewOptions, to as Tabs, no as TabsContent, ro as TabsList, io as TabsTrigger, V as Tag, B as Textarea, ho as Timeline, go as TimelineItem, _o as Timer, ao as Toaster, co as Toggle, lo as ToggleGroup, uo as ToggleGroupItem, fo as Toolbar, po as ToolbarActionList, mo as ToolbarActions, d as Tooltip, f as TooltipContent, p as TooltipProvider, m as TooltipTrigger, vo as TreeItem, yo as Treemap, Fi as TrendIndicator, D as TruncateText, bo as WidgetPlaceholder, xo as WidgetPlaceholderAction, So as WidgetPlaceholderContent, Co as WidgetPlaceholderFooter, wo as WidgetPlaceholderHeader, To as WidgetPlaceholderIcon, Eo as WidgetPlaceholderImage, Do as WidgetPlaceholderText, Oo as WidgetPlaceholderTitle, ko as Wizard, Ao as WizardBody, jo as WizardHeader, Mo as WizardSubtitle, u as alertVariants, ft as areaChartVariants, _t as avatarVariants, yt as barChartVariants, jt as buttonGroupItemVariants, Mt as buttonGroupVariants, Zt as buttonIconInputVariants, t as buttonIconVariants, Pt as buttonMenuVariants, Ot as buttonVariants, on as cardFilterVariants, cn as cardSectionVariants, rn as cardVariants, fn as categoryBarVariants, _n as chipVariants, ee as cn, Dn as composedChartVariants, fi as computeFittedVisibleCount, qe as createTickFormatter, Je as dropProjectionPayload, Zr as emptyOverlayIconVariants, Oe as findDuplicateTones, Ye as formatCompactNumber, Xe as formatPercent, gi as funnelChartPercent, _i as funnelChartVariants, C as getAppShellChatInitialLayout, or as getCellStyle, sr as getColumnWidth, cr as getPinnedStyle, me as getViewportWidth, yi as gridVariants, rr as isBulkSelectionActive, Qr as labelClassName, ji as lineChartVariants, Ni as linkVariants, ke as listPaletteChoices, Ae as listPaletteStops, Rr as loadingVariants, E as measureTextWidth, T as middleTruncate, ie as parseTableUrlState, oa as pieChartVariants, la as progressCircleVariants, Ci as radarChartVariants, lr as reorderColumn, Ze as resolveAnimation, Qe as resolveAxisDomain, $e as resolveBrushProps, et as resolveCartesianLabelPosition, tt as resolveCategoryRange, Re as resolveChartColors, nt as resolveChartReferenceValue, rt as resolveLabelFillClass, it as resolveReferenceLineProps, at as resolveRotatedTickAnchor, je as resolveSeriesColor, ot as resolveXAxisHeight, st as resolveXAxisTitle, ct as resolveYAxisTitle, _a as sectionVariants, xa as segmentControlVariants, ae as serializeTableUrlState, Sa as sheetVariants, Ha as sidebarPrimaryMenuItemVariants, $a as sidebarSecondaryMenuItemVariants, Ea as stackVariants, ka as stepperItemVariants, Wi as tagVariants, ze as toCssKey, lt as toLabelFormatter, ut as toReferenceLineList, oo as toast, so as toastVariants, Ii as trendIndicatorVariants, we as useAccordionContainerContext, w as useAppShellChatInitialLayout, Dr as useFilterSearchFilters, Kt as useInputSelectFilter, ne as useIntersectionObserver, ge as usePortalContainer, va as useSectionContext, te as useSortState, oe as useTableUrlState, se as useWizard };
|
package/dist/llms/chart-state.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# ChartState
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> Shared loading / empty / warning / error / number visuals for a chart slot. Empty, warning, and error use the Breakpoints visual treatment: a 64px status circle with a 24px glyph and centered message. Number shows a centered KPI value; loading uses the shared spinner. Consumers select the state and may localize its content through `description`. Distinct from `WidgetPlaceholder`, which is the composable skeleton for a non-chart widget.
|
|
4
4
|
|
|
5
5
|
**Status:** draft · **Category:** data-display · **Since:** v0.58.0
|
|
6
6
|
|
|
@@ -14,190 +14,107 @@ import { ChartState } from '@acronis-platform/ui-react'
|
|
|
14
14
|
|
|
15
15
|
```tsx
|
|
16
16
|
<ChartState state="loading" />
|
|
17
|
-
<ChartState state="empty"
|
|
18
|
-
<ChartState
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
/>
|
|
17
|
+
<ChartState state="empty" description={t('chart.noData')} />
|
|
18
|
+
<ChartState state="warning" description={t('chart.partialData')} />
|
|
19
|
+
<ChartState state="error" description={t('chart.loadError')} />
|
|
20
|
+
<ChartState state="number" description="0 GB" />
|
|
22
21
|
```
|
|
23
22
|
|
|
24
|
-
A shared
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
A shared visual state for one chart slot. Use it while chart data is loading,
|
|
24
|
+
missing, incomplete, or has failed, or when a KPI should show its numeric empty
|
|
25
|
+
value. Empty, warning, and error share the Breakpoints state circles; number
|
|
26
|
+
uses the centered disabled-style KPI value; loading uses the shared spinner.
|
|
27
27
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
> `InputSelectStatus`. There is no `--ui-chart-*` token tier yet, so it themes
|
|
31
|
-
> from existing semantic tokens directly.
|
|
32
|
-
|
|
33
|
-
## When to use
|
|
34
|
-
|
|
35
|
-
- A chart cannot render yet (data in flight), has no data to plot, or failed to
|
|
36
|
-
load — swap the chart for the matching `ChartState`.
|
|
37
|
-
- You want the same placeholder across every chart type, rather than each chart
|
|
38
|
-
hand-rolling its own.
|
|
39
|
-
|
|
40
|
-
## When not to use
|
|
41
|
-
|
|
42
|
-
- A full-page empty state (illustration, title, description, primary action) —
|
|
43
|
-
use the larger `Empty` component instead.
|
|
44
|
-
- A bare loading indicator with no surrounding message — use `Spinner` directly.
|
|
45
|
-
|
|
46
|
-
## Example
|
|
28
|
+
Consumers select the semantic state and pass localized or context-specific
|
|
29
|
+
content through `description`. `ChartState` does not infer the state from data.
|
|
47
30
|
|
|
48
31
|
```tsx
|
|
49
|
-
import { ChartState
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
Try again
|
|
60
|
-
</Button>
|
|
61
|
-
}
|
|
62
|
-
/>
|
|
63
|
-
);
|
|
64
|
-
if (!data.length) return <ChartState state="empty" />;
|
|
65
|
-
|
|
66
|
-
return (
|
|
67
|
-
<ChartContainer config={config} className="h-[300px] w-[500px]">
|
|
68
|
-
{/* …the chart… */}
|
|
69
|
-
</ChartContainer>
|
|
70
|
-
);
|
|
71
|
-
}
|
|
32
|
+
import { ChartState } from '@acronis-platform/ui-react';
|
|
33
|
+
|
|
34
|
+
if (status === 'loading') return <ChartState state="loading" />;
|
|
35
|
+
if (status === 'warning')
|
|
36
|
+
return <ChartState state="warning" description={t('chart.partialData')} />;
|
|
37
|
+
if (status === 'error')
|
|
38
|
+
return <ChartState state="error" description={t('chart.loadError')} />;
|
|
39
|
+
if (isEmptyKpi) return <ChartState state="number" description="0 GB" />;
|
|
40
|
+
if (!data.length)
|
|
41
|
+
return <ChartState state="empty" description={t('chart.noData')} />;
|
|
72
42
|
```
|
|
73
43
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
label, and `action` to add a retry affordance to the error state. Long unbroken
|
|
77
|
-
error descriptions (CTI paths, API URLs) wrap at word boundaries and scroll
|
|
78
|
-
vertically when they exceed the slot height.
|
|
44
|
+
`ChartState` fills the chart's slot. It does not own the containing widget card
|
|
45
|
+
or dashboard composition; see `ChartWidget` for a single chart card.
|
|
79
46
|
|
|
80
47
|
## Props
|
|
81
48
|
|
|
82
49
|
| Prop | Type | Default | Required | Description |
|
|
83
50
|
|------|------|---------|----------|-------------|
|
|
84
|
-
| `state` | `'loading' | 'empty' | 'error'` | — | yes | Which
|
|
85
|
-
| `
|
|
86
|
-
| `description` | `ReactNode` | — | no | Text shown below the illustration or glyph. Defaults to `"Data is loading…"` / `"No data found"` / `"Something went wrong"` based on `state`. Pass a value to override for any state. |
|
|
87
|
-
| `action` | `ReactNode` | — | no | Trailing action rendered for the `error` state only (e.g. a "Try again" button). |
|
|
51
|
+
| `state` | `'loading' | 'empty' | 'warning' | 'error' | 'number'` | — | yes | Which state to show. Loading uses the shared spinner; empty, warning, and error use the shared circular status icon; number shows a centered disabled-style KPI value. Error is an assertive alert; other states are polite status messages. |
|
|
52
|
+
| `description` | `ReactNode` | — | no | Localized or context-specific content. For `number`, this is the numeric readout. Defaults to "Data is loading…", "No data found", "Data may be incomplete", "Something went wrong", or "0". |
|
|
88
53
|
|
|
89
54
|
## Behavior
|
|
90
55
|
|
|
91
56
|
### Rendering per state
|
|
92
57
|
|
|
93
58
|
- **Given** `state="loading"`, **when** rendered, **then** it shows the shared
|
|
94
|
-
`Spinner`
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
- **Given**
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
`empty` is the one state the design draws per chart type: an area silhouette for
|
|
134
|
-
an area chart, a ring for a donut, a funnel for a funnel. An empty widget then
|
|
135
|
-
still says what it _would_ have shown, which a single generic glyph can't.
|
|
136
|
-
|
|
137
|
-
`variant` selects it. `donut` and `radial` share one ring — a radial-bar widget
|
|
138
|
-
with no data has nothing to tell it apart. Without a `variant` the empty state
|
|
139
|
-
shows no artwork — just the text.
|
|
140
|
-
|
|
141
|
-
The geometry is exported from the Figma instances rather than redrawn, and every
|
|
142
|
-
path is `currentColor`: the tone is set once on the container, so brand and theme
|
|
143
|
-
overrides reach the artwork. Two of the eleven silhouettes use a second, fainter
|
|
144
|
-
tone (the table and metric-list ones tint their header row darker than the body
|
|
145
|
-
rows); that hierarchy is kept as `fill-opacity` on the same colour rather than a
|
|
146
|
-
second token.
|
|
147
|
-
|
|
148
|
-
The caption is **one line, in one style**. Figma styles it `body/default` on
|
|
149
|
-
`text/onSurface/primary` — 14/24, centred, _not_ muted — which is what the root
|
|
150
|
-
already applies, so the description and the fallback status label read
|
|
151
|
-
identically. For a per-type empty state that line is the `description`: the mockups draw the silhouette over "Widget description" with no
|
|
152
|
-
status label, because the artwork already says "no data" and the sentence worth
|
|
153
|
-
the space is what the widget _would_ show. With no `description` it falls back to
|
|
154
|
-
the status label, so a caller that only sets `variant` still reads sensibly.
|
|
155
|
-
|
|
156
|
-
`loading` and `error` deliberately keep one shared treatment — the design only
|
|
157
|
-
redesigned `empty`.
|
|
158
|
-
|
|
159
|
-
### Not `WidgetPlaceholder`
|
|
160
|
-
|
|
161
|
-
Two components, two jobs, and they are not interchangeable:
|
|
162
|
-
|
|
163
|
-
- **`ChartState`** is the placeholder _inside_ a chart's slot. It fills whatever
|
|
164
|
-
gives the slot its height, renders one of three states, and is what a chart
|
|
165
|
-
widget swaps in for its plot.
|
|
166
|
-
- **`WidgetPlaceholder`** is a composable skeleton with its own header, footer
|
|
167
|
-
and action parts, plus an `interactive` affordance — for a dashboard widget
|
|
168
|
-
that isn't a chart, or a whole tile that is still being set up.
|
|
169
|
-
|
|
170
|
-
`WidgetPlaceholder` predates the per-type empty states and is used by consuming
|
|
171
|
-
MFEs, so it stays.
|
|
59
|
+
large `Spinner` and the default message "Data is loading…".
|
|
60
|
+
- **Given** `state="empty"`, **when** rendered, **then** it shows the neutral
|
|
61
|
+
circle with the `CircleMinusGray` glyph and the default message "No data
|
|
62
|
+
found".
|
|
63
|
+
- **Given** `state="warning"`, **when** rendered, **then** it shows the warning
|
|
64
|
+
circle with the `TriangleWarningYellow` glyph and the default message "Data
|
|
65
|
+
may be incomplete".
|
|
66
|
+
- **Given** `state="error"`, **when** rendered, **then** it shows the critical
|
|
67
|
+
circle with the `DiamondWarningRed` glyph and the default message "Something
|
|
68
|
+
went wrong".
|
|
69
|
+
- **Given** `state="number"`, **when** rendered, **then** it shows the centered
|
|
70
|
+
disabled-style numeric value "0" without a state icon.
|
|
71
|
+
- **Given** empty, warning, or error, **when** rendered, **then** the group is
|
|
72
|
+
centered and uses a 64px state circle, a 24px glyph, 12px separation, and
|
|
73
|
+
centered 14px / 24px text.
|
|
74
|
+
|
|
75
|
+
### Copy
|
|
76
|
+
|
|
77
|
+
- **Given** a `description`, **when** rendered in any state, **then** the supplied
|
|
78
|
+
content replaces that state's fallback message. Consumers provide localized
|
|
79
|
+
or context-specific copy.
|
|
80
|
+
|
|
81
|
+
### Layout and overflow
|
|
82
|
+
|
|
83
|
+
- **Given** any state, **when** placed in a chart slot, **then** the block fills
|
|
84
|
+
the slot without forcing a minimum height beyond its content.
|
|
85
|
+
- **Given** loading, empty, or warning, **when** rendered, **then** the content
|
|
86
|
+
is centered in the slot.
|
|
87
|
+
- **Given** `state="error"` with a short message, **when** rendered, **then**
|
|
88
|
+
the icon and message are vertically centered.
|
|
89
|
+
- **Given** an error with a long message, **when** it exceeds the slot height,
|
|
90
|
+
**then** the icon remains fully visible, the state scrolls vertically, and
|
|
91
|
+
unbroken strings wrap within the available width.
|
|
92
|
+
|
|
93
|
+
### Composition boundary
|
|
94
|
+
|
|
95
|
+
`ChartState` controls the state visuals inside one chart slot. It does not set
|
|
96
|
+
the chart-widget card border or arrange a group of widgets; those belong to
|
|
97
|
+
their respective component or consuming application.
|
|
172
98
|
|
|
173
99
|
## Accessibility
|
|
174
100
|
|
|
175
|
-
- The root is
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
- The live-region attributes (`role` / `aria-live`) are applied after the prop
|
|
189
|
-
spread, so the state's a11y contract is not clobbered by a consumer-passed
|
|
190
|
-
attribute.
|
|
191
|
-
- The label text is a real `<p>`, so the state message is always in the
|
|
192
|
-
accessible tree — the glyph is decorative and does not need its own label.
|
|
193
|
-
- **Do not rely on the glyph color alone** to convey the state — the label
|
|
194
|
-
carries the meaning. Icon colors (`--ui-glyph-on-status-info` /
|
|
195
|
-
`--ui-glyph-on-status-warning`) and the label (`--ui-text-on-surface-primary`)
|
|
196
|
-
resolve to semantic tokens that meet contrast in both themes.
|
|
197
|
-
- If the error state offers a retry, pass an actual interactive control as
|
|
198
|
-
`action` (a `Button`) so it is focusable and keyboard-operable.
|
|
101
|
+
- The root is the live region: loading, empty, warning, and number use
|
|
102
|
+
`role="status"` with `aria-live="polite"`; error uses `role="alert"` with
|
|
103
|
+
`aria-live="assertive"`.
|
|
104
|
+
- The root live-region attributes are applied after the prop spread, so the
|
|
105
|
+
selected state's announcement semantics cannot be overwritten by consumer
|
|
106
|
+
props.
|
|
107
|
+
- The loading Spinner and state glyphs are decorative. The displayed content
|
|
108
|
+
supplies the state meaning independently of icon color.
|
|
109
|
+
- The root does not carry `aria-busy`. This placeholder is unmounted when the
|
|
110
|
+
chart replaces it, and some screen readers defer announcements inside a busy
|
|
111
|
+
region. Put `aria-busy` on the chart-slot container if a busy signal is needed.
|
|
112
|
+
- Long error text can scroll vertically, and long unbroken strings wrap within
|
|
113
|
+
the available width.
|
|
199
114
|
|
|
200
115
|
## Contrast
|
|
201
116
|
|
|
202
|
-
|
|
203
|
-
|
|
117
|
+
Message text uses `--ui-text-on-surface-primary`. The state glyphs are the
|
|
118
|
+
multi-color design assets, placed on semantic neutral, warning, and critical
|
|
119
|
+
background tokens. The textual message communicates meaning without relying on
|
|
120
|
+
color.
|