@keboola/design 11.9.0 → 13.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/AGENTS.md +45 -14
- package/CHANGELOG.md +246 -0
- package/COMPONENT-API.md +352 -294
- package/README.md +11 -1
- package/dist/{AIKit-ELIsegJz.js → AIKit-DcOlHIBr.js} +420 -247
- package/dist/AIKit-DcOlHIBr.js.map +1 -0
- package/dist/{Alert-BsIM_oFK.js → Alert-UI-CIs-1.js} +16 -16
- package/dist/Alert-UI-CIs-1.js.map +1 -0
- package/dist/{AlertModal-BGJdaRRj.js → AlertModal-mbSnuuka.js} +8 -8
- package/dist/AlertModal-mbSnuuka.js.map +1 -0
- package/dist/{AppShell-DRgJxpXW.js → AppShell-WSQabK8r.js} +15 -52
- package/dist/AppShell-WSQabK8r.js.map +1 -0
- package/dist/{AutoSaveTextarea-BeuWuszr.js → AutoSaveTextarea-C5iIr2Ts.js} +2 -2
- package/dist/{AutoSaveTextarea-BeuWuszr.js.map → AutoSaveTextarea-C5iIr2Ts.js.map} +1 -1
- package/dist/{Badge-o5jURtpB.js → Badge-DIjhwPvh.js} +4 -9
- package/dist/Badge-DIjhwPvh.js.map +1 -0
- package/dist/{BrandEditor-BsTBM3s6.js → BrandEditor-Bkd6dhb8.js} +7 -7
- package/dist/{BrandEditor-BsTBM3s6.js.map → BrandEditor-Bkd6dhb8.js.map} +1 -1
- package/dist/{BrandLogo-CoKBk4MI.js → BrandLogo-CKpVSZb6.js} +4 -4
- package/dist/BrandLogo-CKpVSZb6.js.map +1 -0
- package/dist/{Breadcrumb-xqEUxfwn.js → Breadcrumb-BUoAZyhO.js} +8 -14
- package/dist/Breadcrumb-BUoAZyhO.js.map +1 -0
- package/dist/{Button-DsRrU5F1.js → Button-B21oVcPU.js} +31 -14
- package/dist/Button-B21oVcPU.js.map +1 -0
- package/dist/{Calendar-cG5NIJ4O.js → Calendar-DFtmZzbF.js} +99 -99
- package/dist/Calendar-DFtmZzbF.js.map +1 -0
- package/dist/{Card-Dyo7055Q.js → Card-BQmBWHXl.js} +35 -7
- package/dist/Card-BQmBWHXl.js.map +1 -0
- package/dist/{Checkbox-Dq5fPNrO.js → Checkbox-8yIIgY7g.js} +4 -4
- package/dist/Checkbox-8yIIgY7g.js.map +1 -0
- package/dist/{Clipboard-BZitKiSA.js → Clipboard-_xf6hMDD.js} +2 -2
- package/dist/{Clipboard-BZitKiSA.js.map → Clipboard-_xf6hMDD.js.map} +1 -1
- package/dist/{ClipboardButton-KHQnPEh_.js → ClipboardButton-srUgWgwH.js} +4 -4
- package/dist/{ClipboardButton-KHQnPEh_.js.map → ClipboardButton-srUgWgwH.js.map} +1 -1
- package/dist/{CodeEditor-BJKJXA0c.js → CodeEditor-jZMw1ioj.js} +55 -165
- package/dist/CodeEditor-jZMw1ioj.js.map +1 -0
- package/dist/{ColorInput-Bj3dfPFA.js → ColorInput-B3gBZ8Ya.js} +12 -27
- package/dist/ColorInput-B3gBZ8Ya.js.map +1 -0
- package/dist/{ColorModeSwitch-CWt-DZGC.js → ColorModeSwitch-Bw9wMyoL.js} +7 -17
- package/dist/ColorModeSwitch-Bw9wMyoL.js.map +1 -0
- package/dist/Combobox-C_MTpQ1l.js +1081 -0
- package/dist/Combobox-C_MTpQ1l.js.map +1 -0
- package/dist/{Command-BDU3C1gg.js → Command-BQPiZCNz.js} +4 -4
- package/dist/{Command-BDU3C1gg.js.map → Command-BQPiZCNz.js.map} +1 -1
- package/dist/{CopyField-BHRQUyuF.js → CopyField-Ba7h8MqZ.js} +19 -55
- package/dist/{CopyField-BHRQUyuF.js.map → CopyField-Ba7h8MqZ.js.map} +1 -1
- package/dist/{DateInput-B6N8g0ra.js → DateInput-D0nWUasV.js} +6 -6
- package/dist/{DateInput-B6N8g0ra.js.map → DateInput-D0nWUasV.js.map} +1 -1
- package/dist/{DatePicker-nA8YdE84.js → DatePicker-CtSa9b3V.js} +3 -3
- package/dist/{DatePicker-nA8YdE84.js.map → DatePicker-CtSa9b3V.js.map} +1 -1
- package/dist/{DateRangeInput-7M9Z4cVO.js → DateRangeInput-i6wE45-V.js} +10 -14
- package/dist/DateRangeInput-i6wE45-V.js.map +1 -0
- package/dist/{DateRangePicker-DjSUFjh4.js → DateRangePicker-BAnuz6vO.js} +9 -13
- package/dist/DateRangePicker-BAnuz6vO.js.map +1 -0
- package/dist/DiffView-ppTIzh2h.js.map +1 -1
- package/dist/{DropdownMenu-CgVwhDvl.js → DropdownMenu-gRM-A8qU.js} +3 -3
- package/dist/DropdownMenu-gRM-A8qU.js.map +1 -0
- package/dist/{FieldItem-DZGIdiXE.js → FieldItem-BHViBJS3.js} +12 -25
- package/dist/FieldItem-BHViBJS3.js.map +1 -0
- package/dist/{FieldItem-vhIJW4pj.d.ts → FieldItem-CPN1xjN5.d.ts} +11 -25
- package/dist/{FileUpload-DYQCTGjU.js → FileUpload-Ch2hrIWq.js} +11 -16
- package/dist/{FileUpload-DYQCTGjU.js.map → FileUpload-Ch2hrIWq.js.map} +1 -1
- package/dist/{Form-CcK7dRrC.js → Form-VkzfVPyT.js} +15 -23
- package/dist/{Form-CcK7dRrC.js.map → Form-VkzfVPyT.js.map} +1 -1
- package/dist/{FormGroup-DR_gZ25-.js → FormGroup-CmCppxOn.js} +11 -17
- package/dist/FormGroup-CmCppxOn.js.map +1 -0
- package/dist/{FullScreenModal-CN9nAs72.js → FullScreenModal-Cwnm8WdM.js} +15 -29
- package/dist/FullScreenModal-Cwnm8WdM.js.map +1 -0
- package/dist/{HoverCard-B9ZMJxjn.js → HoverCard-B8OKu9XZ.js} +2 -2
- package/dist/{HoverCard-B9ZMJxjn.js.map → HoverCard-B8OKu9XZ.js.map} +1 -1
- package/dist/{InputGroup-Do8K2hvD.js → InputGroup-CrlMRz4X.js} +11 -13
- package/dist/InputGroup-CrlMRz4X.js.map +1 -0
- package/dist/{Kbd-LCFMumoq.js → Kbd-J4n1J6i4.js} +23 -13
- package/dist/Kbd-J4n1J6i4.js.map +1 -0
- package/dist/{MarkedText-DNGEUVWc.js → MarkedText-DlmlJO0u.js} +2 -2
- package/dist/{MarkedText-DNGEUVWc.js.map → MarkedText-DlmlJO0u.js.map} +1 -1
- package/dist/{MermaidDiagram-ZG0iiDV_.js → MermaidDiagram-B30x2yV7.js} +16 -34
- package/dist/MermaidDiagram-B30x2yV7.js.map +1 -0
- package/dist/{Modal-I3VWk2oo.js → Modal-BkSuS9Yz.js} +17 -34
- package/dist/Modal-BkSuS9Yz.js.map +1 -0
- package/dist/{ModalTitle-CeLM_mX9.js → ModalTitle-BxopkIoQ.js} +3 -3
- package/dist/ModalTitle-BxopkIoQ.js.map +1 -0
- package/dist/{MultiActionButtonGroup-CYZ8IgSf.js → MultiActionButtonGroup-AWLj1Tg7.js} +3 -3
- package/dist/{MultiActionButtonGroup-CYZ8IgSf.js.map → MultiActionButtonGroup-AWLj1Tg7.js.map} +1 -1
- package/dist/{Navbar-Liy1TPI7.js → Navbar-B_DNpv5s.js} +9 -13
- package/dist/{Navbar-Liy1TPI7.js.map → Navbar-B_DNpv5s.js.map} +1 -1
- package/dist/{OtpInput-CbbymqYs.js → OtpInput-I8B8Vjdl.js} +2 -2
- package/dist/{OtpInput-CbbymqYs.js.map → OtpInput-I8B8Vjdl.js.map} +1 -1
- package/dist/{PageHeader-Q3IpCnQd.js → PageHeader-CgfyXpf1.js} +13 -26
- package/dist/PageHeader-CgfyXpf1.js.map +1 -0
- package/dist/{PageLayout-DSVM-ASz.js → PageLayout-DiAAILuS.js} +12 -20
- package/dist/PageLayout-DiAAILuS.js.map +1 -0
- package/dist/{PageToolbar-BKVJiDAL.js → PageToolbar-CIW0VmKe.js} +12 -42
- package/dist/PageToolbar-CIW0VmKe.js.map +1 -0
- package/dist/{Pagination-C_b7Xhey.js → Pagination-DH3f6LN0.js} +3 -3
- package/dist/{Pagination-C_b7Xhey.js.map → Pagination-DH3f6LN0.js.map} +1 -1
- package/dist/{Popconfirm-5pBzT_HQ.js → Popconfirm-Dhzn7sy6.js} +3 -3
- package/dist/{Popconfirm-5pBzT_HQ.js.map → Popconfirm-Dhzn7sy6.js.map} +1 -1
- package/dist/{Popover-BEbQrC_P.js → Popover-CEk915I1.js} +4 -3
- package/dist/Popover-CEk915I1.js.map +1 -0
- package/dist/{RadioGroup-Byc2mym4.js → RadioGroup-CBPRLRN0.js} +4 -4
- package/dist/{RadioGroup-Byc2mym4.js.map → RadioGroup-CBPRLRN0.js.map} +1 -1
- package/dist/{Search-Dhig_hPD.js → Search-DmkQo716.js} +3 -3
- package/dist/{Search-Dhig_hPD.js.map → Search-DmkQo716.js.map} +1 -1
- package/dist/{SearchInput-92r2bkA7.js → SearchInput-D3qMkHaW.js} +8 -13
- package/dist/SearchInput-D3qMkHaW.js.map +1 -0
- package/dist/{SectionNav-CNLJsiVG.js → SectionNav-TU5i3JeM.js} +10 -42
- package/dist/SectionNav-TU5i3JeM.js.map +1 -0
- package/dist/{Select-DV3Hak_l.js → Select-B4uK0QVm.js} +10 -12
- package/dist/Select-B4uK0QVm.js.map +1 -0
- package/dist/{Sheet-OparjIi-.js → Sheet-D0fAE14T.js} +5 -9
- package/dist/Sheet-D0fAE14T.js.map +1 -0
- package/dist/{Sidebar-CLEbBtNY.js → Sidebar-ZLMNIbg5.js} +16 -33
- package/dist/Sidebar-ZLMNIbg5.js.map +1 -0
- package/dist/{Slider-DLclvRws.js → Slider-B0ou9r0B.js} +3 -3
- package/dist/{Slider-DLclvRws.js.map → Slider-B0ou9r0B.js.map} +1 -1
- package/dist/{Stepper-C8sm9ZFM.js → Stepper-BLkLhfnd.js} +6 -9
- package/dist/{Stepper-C8sm9ZFM.js.map → Stepper-BLkLhfnd.js.map} +1 -1
- package/dist/{Switch-B0WdGSjz.js → Switch-DZvNePOm.js} +2 -2
- package/dist/{Switch-B0WdGSjz.js.map → Switch-DZvNePOm.js.map} +1 -1
- package/dist/{Table-CvYuTuNU.js → Table-BaVT5Tkn.js} +6 -11
- package/dist/{Table-CvYuTuNU.js.map → Table-BaVT5Tkn.js.map} +1 -1
- package/dist/{Tabs-eB974xJf.js → Tabs-CTDmye1N.js} +3 -3
- package/dist/{Tabs-eB974xJf.js.map → Tabs-CTDmye1N.js.map} +1 -1
- package/dist/{TextInput-CFTf4Cz1.js → TextInput-BWYXbfs4.js} +10 -14
- package/dist/TextInput-BWYXbfs4.js.map +1 -0
- package/dist/{ThemeProvider-DAmNn9Sd.js → ThemeProvider-VF38VfUa.js} +13 -31
- package/dist/ThemeProvider-VF38VfUa.js.map +1 -0
- package/dist/{TimePicker-BGeqc-Ed.js → TimePicker-CDGYrRxi.js} +2 -2
- package/dist/{TimePicker-BGeqc-Ed.js.map → TimePicker-CDGYrRxi.js.map} +1 -1
- package/dist/{Timeline-C8-wnRRr.js → Timeline-B-I6sb0M.js} +2 -2
- package/dist/{Timeline-C8-wnRRr.js.map → Timeline-B-I6sb0M.js.map} +1 -1
- package/dist/{Toast-Dr6Uw7ao.js → Toast-PfQf3vj-.js} +2 -2
- package/dist/{Toast-Dr6Uw7ao.js.map → Toast-PfQf3vj-.js.map} +1 -1
- package/dist/{Workbench-UR2FBC7I.js → Workbench-DmZzpkj7.js} +2 -2
- package/dist/{Workbench-UR2FBC7I.js.map → Workbench-DmZzpkj7.js.map} +1 -1
- package/dist/{ZoomableSvg-BZlk3PFJ.js → ZoomableSvg-C65nta_r.js} +5 -19
- package/dist/ZoomableSvg-C65nta_r.js.map +1 -0
- package/dist/charts.d.ts +21 -52
- package/dist/charts.js +13 -39
- package/dist/charts.js.map +1 -1
- package/dist/{context-D7X470dy.js → context-U293r3v-.js} +5 -9
- package/dist/context-U293r3v-.js.map +1 -0
- package/dist/editors.d.ts +27 -124
- package/dist/editors.js +29 -71
- package/dist/editors.js.map +1 -1
- package/dist/{findLiteralMatches-BGBw8Vbl.js → findLiteralMatches-DgGLzyG0.js} +8 -20
- package/dist/findLiteralMatches-DgGLzyG0.js.map +1 -0
- package/dist/flint.d.ts +3 -6
- package/dist/flint.js +31 -80
- package/dist/flint.js.map +1 -1
- package/dist/{icons-Cek151jC.js → icons-wcA70iQx.js} +105 -2
- package/dist/icons-wcA70iQx.js.map +1 -0
- package/dist/icons.d.ts +2 -2
- package/dist/icons.js +2 -2
- package/dist/{index-m-kQEWiY.d.ts → index-B7k-09i1.d.ts} +14 -2
- package/dist/index.d.ts +1180 -1867
- package/dist/index.js +69 -68
- package/dist/internal/blocks/AIKit.js +2 -2
- package/dist/internal/blocks/AppShell.js +1 -1
- package/dist/internal/blocks/AuthLayout.js +7 -27
- package/dist/internal/blocks/AuthLayout.js.map +1 -1
- package/dist/internal/blocks/AutoSaveTextarea.js +1 -1
- package/dist/internal/blocks/BrandEditor.js +1 -1
- package/dist/internal/blocks/ChartPanel.js +4 -8
- package/dist/internal/blocks/ChartPanel.js.map +1 -1
- package/dist/internal/blocks/ChipEditor.js +13 -21
- package/dist/internal/blocks/ChipEditor.js.map +1 -1
- package/dist/internal/blocks/ClipboardButton.js +1 -1
- package/dist/internal/blocks/ColorInput.js +1 -1
- package/dist/internal/blocks/ColorModeSwitch.js +1 -1
- package/dist/internal/blocks/Command.js +1 -1
- package/dist/internal/blocks/CopyField.js +1 -1
- package/dist/internal/blocks/DashboardHero.js +4 -7
- package/dist/internal/blocks/DashboardHero.js.map +1 -1
- package/dist/internal/blocks/DateInput.js +1 -1
- package/dist/internal/blocks/DateRangeInput.js +1 -1
- package/dist/internal/blocks/EmptyConfigurationActionCard.js +1 -1
- package/dist/internal/blocks/EmptyState.js +5 -9
- package/dist/internal/blocks/EmptyState.js.map +1 -1
- package/dist/internal/blocks/ErrorState.js +5 -9
- package/dist/internal/blocks/ErrorState.js.map +1 -1
- package/dist/internal/blocks/ExportMenu.js +6 -10
- package/dist/internal/blocks/ExportMenu.js.map +1 -1
- package/dist/internal/blocks/Form/connectors/ComboboxField.js +40 -0
- package/dist/internal/blocks/Form/connectors/ComboboxField.js.map +1 -0
- package/dist/internal/blocks/Form/connectors/MultiComboboxField.js +5 -22
- package/dist/internal/blocks/Form/connectors/MultiComboboxField.js.map +1 -1
- package/dist/internal/blocks/Form.js +1 -1
- package/dist/internal/blocks/FormGroup.js +1 -1
- package/dist/internal/blocks/GoogleButton.js +1 -1
- package/dist/internal/blocks/MicrosoftButton.js +1 -1
- package/dist/internal/blocks/MultiActionButtonGroup.js +1 -1
- package/dist/internal/blocks/MultiCombobox.js +160 -154
- package/dist/internal/blocks/MultiCombobox.js.map +1 -1
- package/dist/internal/blocks/NumberInput.js +1 -1
- package/dist/internal/blocks/OtpInput.js +1 -1
- package/dist/internal/blocks/PageHeader.js +1 -1
- package/dist/internal/blocks/PageLayout.js +1 -1
- package/dist/internal/blocks/PageToolbar.js +1 -1
- package/dist/internal/blocks/PasswordInput.js +4 -4
- package/dist/internal/blocks/PasswordInput.js.map +1 -1
- package/dist/internal/blocks/SearchInput.js +1 -1
- package/dist/internal/blocks/SearchInputWithNavigation.js +4 -4
- package/dist/internal/blocks/SectionNav.js +1 -1
- package/dist/internal/blocks/SplitButton.js +3 -3
- package/dist/internal/blocks/StatCard.js +4 -8
- package/dist/internal/blocks/StatCard.js.map +1 -1
- package/dist/internal/blocks/TextInput.js +1 -1
- package/dist/internal/blocks/Textarea.js +2 -2
- package/dist/internal/blocks/TimeInput.js +5 -5
- package/dist/internal/blocks/TimeInput.js.map +1 -1
- package/dist/internal/components/Alert.js +1 -1
- package/dist/internal/components/AlertModal.js +1 -1
- package/dist/internal/components/Avatar.js +1 -1
- package/dist/internal/components/Badge.js +1 -1
- package/dist/internal/components/BrandLogo.js +1 -1
- package/dist/internal/components/Breadcrumb.js +1 -1
- package/dist/internal/components/Button.js +1 -1
- package/dist/internal/components/ButtonGroup.js.map +1 -1
- package/dist/internal/components/Calendar.js +1 -1
- package/dist/internal/components/Card.js +1 -1
- package/dist/internal/components/Checkbox.js +1 -1
- package/dist/internal/components/Clipboard.js +1 -1
- package/dist/internal/components/CollapsiblePanel.js +3 -3
- package/dist/internal/components/CollapsiblePanel.js.map +1 -1
- package/dist/internal/components/Combobox.js +2 -2
- package/dist/internal/components/DatePicker.js +1 -1
- package/dist/internal/components/DateRangePicker.js +1 -1
- package/dist/internal/components/DropdownMenu.js +1 -1
- package/dist/internal/components/FileUpload.js +1 -1
- package/dist/internal/components/FullScreenModal.js +1 -1
- package/dist/internal/components/HoverCard.js +1 -1
- package/dist/internal/components/InputGroup.js +1 -1
- package/dist/internal/components/Kbd.js +1 -1
- package/dist/internal/components/MarkedText.js +1 -1
- package/dist/internal/components/MergeEditor/ConflictStatus/ConflictStatusIndicator.js +1 -1
- package/dist/internal/components/Modal.js +1 -1
- package/dist/internal/components/Navbar.js +1 -1
- package/dist/internal/components/Pagination.js +1 -1
- package/dist/internal/components/PanelWithDetails.js +1 -1
- package/dist/internal/components/Popconfirm.js +1 -1
- package/dist/internal/components/Popover.js +1 -1
- package/dist/internal/components/RadioGroup.js +1 -1
- package/dist/internal/components/Search.js +1 -1
- package/dist/internal/components/Select.js +1 -1
- package/dist/internal/components/Separator.js.map +1 -1
- package/dist/internal/components/Sheet.js +1 -1
- package/dist/internal/components/Sidebar.js +1 -1
- package/dist/internal/components/Skeleton/Skeleton.js +5 -9
- package/dist/internal/components/Skeleton/Skeleton.js.map +1 -1
- package/dist/internal/components/Slider.js +1 -1
- package/dist/internal/components/SpotlightBackdrop.js +3 -8
- package/dist/internal/components/SpotlightBackdrop.js.map +1 -1
- package/dist/internal/components/Stepper.js +1 -1
- package/dist/internal/components/Switch.js +1 -1
- package/dist/internal/components/Table.js +1 -1
- package/dist/internal/components/Tabs.js +1 -1
- package/dist/internal/components/ThemeProvider.js +3 -3
- package/dist/internal/components/TimePicker.js +1 -1
- package/dist/internal/components/Timeline.js +1 -1
- package/dist/internal/components/Toast.js +2 -2
- package/dist/internal/components/Tooltip.js +1 -1
- package/dist/internal/components/Truncated.js +4 -8
- package/dist/internal/components/Truncated.js.map +1 -1
- package/dist/internal/components/Workbench.js +1 -1
- package/dist/internal/components/ZoomableSvg.js +1 -1
- package/dist/internal/hooks/useScrollbarPosition.js +1 -1
- package/dist/internal/hooks/useStableCallback.js +4 -13
- package/dist/internal/hooks/useStableCallback.js.map +1 -1
- package/dist/internal/utils/accessibleName.js +11 -0
- package/dist/internal/utils/accessibleName.js.map +1 -0
- package/dist/internal/utils.js +2 -2
- package/dist/markdown-editor.d.ts +15 -37
- package/dist/markdown-editor.js +17 -23
- package/dist/markdown-editor.js.map +1 -1
- package/dist/mermaid.d.ts +4 -6
- package/dist/mermaid.js +1 -1
- package/dist/rjsf.d.ts +9 -19
- package/dist/rjsf.js +44 -84
- package/dist/rjsf.js.map +1 -1
- package/dist/{styles-BAFscjSV.js → styles-gzcjOyKv.js} +6 -6
- package/dist/styles-gzcjOyKv.js.map +1 -0
- package/dist/styles.css +1 -1
- package/dist/svgTransforms-Dw2hRA-i.js +51 -0
- package/dist/svgTransforms-Dw2hRA-i.js.map +1 -0
- package/dist/testing.d.ts +3 -10
- package/dist/testing.js +7 -15
- package/dist/testing.js.map +1 -1
- package/dist/themeTokens-7DEab0kp.js +31 -0
- package/dist/themeTokens-7DEab0kp.js.map +1 -0
- package/dist/{toast-DIC0iNRf.js → toast-CyXEdaCZ.js} +3 -3
- package/dist/toast-CyXEdaCZ.js.map +1 -0
- package/dist/{themeScopeContext-D7fSyb06.js → useColorSchemeState-Cw4MCXUs.js} +14 -14
- package/dist/useColorSchemeState-Cw4MCXUs.js.map +1 -0
- package/dist/{useControllableState-M6494mCT.js → useControllableState-CUYXMsfz.js} +3 -7
- package/dist/useControllableState-CUYXMsfz.js.map +1 -0
- package/dist/useElement-D-RjrGa4.js +21 -0
- package/dist/useElement-D-RjrGa4.js.map +1 -0
- package/dist/useThemeAttributes-B199Regy.js +67 -0
- package/dist/useThemeAttributes-B199Regy.js.map +1 -0
- package/dist/{utils-BW4AE8VP.js → utils-Bd28bWgm.js} +31 -26
- package/dist/utils-Bd28bWgm.js.map +1 -0
- package/dist/vega.d.ts +8 -30
- package/dist/vega.js +5 -13
- package/dist/vega.js.map +1 -1
- package/dist/{vegaTheme-CSvFEMBl.js → vegaTheme-VQMWTlBw.js} +7 -21
- package/dist/vegaTheme-VQMWTlBw.js.map +1 -0
- package/package.json +28 -27
- package/src/styles.css +120 -14
- package/src/theme.css +130 -5
- package/dist/AIKit-ELIsegJz.js.map +0 -1
- package/dist/Alert-BsIM_oFK.js.map +0 -1
- package/dist/AlertModal-BGJdaRRj.js.map +0 -1
- package/dist/AppShell-DRgJxpXW.js.map +0 -1
- package/dist/Badge-o5jURtpB.js.map +0 -1
- package/dist/BrandLogo-CoKBk4MI.js.map +0 -1
- package/dist/Breadcrumb-xqEUxfwn.js.map +0 -1
- package/dist/Button-DsRrU5F1.js.map +0 -1
- package/dist/Calendar-cG5NIJ4O.js.map +0 -1
- package/dist/Card-Dyo7055Q.js.map +0 -1
- package/dist/Checkbox-Dq5fPNrO.js.map +0 -1
- package/dist/CodeEditor-BJKJXA0c.js.map +0 -1
- package/dist/ColorInput-Bj3dfPFA.js.map +0 -1
- package/dist/ColorModeSwitch-CWt-DZGC.js.map +0 -1
- package/dist/Combobox-D8PrEqTG.js +0 -619
- package/dist/Combobox-D8PrEqTG.js.map +0 -1
- package/dist/DateRangeInput-7M9Z4cVO.js.map +0 -1
- package/dist/DateRangePicker-DjSUFjh4.js.map +0 -1
- package/dist/DropdownMenu-CgVwhDvl.js.map +0 -1
- package/dist/FieldItem-DZGIdiXE.js.map +0 -1
- package/dist/FormGroup-DR_gZ25-.js.map +0 -1
- package/dist/FullScreenModal-CN9nAs72.js.map +0 -1
- package/dist/InputGroup-Do8K2hvD.js.map +0 -1
- package/dist/Kbd-LCFMumoq.js.map +0 -1
- package/dist/MermaidDiagram-ZG0iiDV_.js.map +0 -1
- package/dist/Modal-I3VWk2oo.js.map +0 -1
- package/dist/ModalTitle-CeLM_mX9.js.map +0 -1
- package/dist/PageHeader-Q3IpCnQd.js.map +0 -1
- package/dist/PageLayout-DSVM-ASz.js.map +0 -1
- package/dist/PageToolbar-BKVJiDAL.js.map +0 -1
- package/dist/Popover-BEbQrC_P.js.map +0 -1
- package/dist/SearchInput-92r2bkA7.js.map +0 -1
- package/dist/SectionNav-CNLJsiVG.js.map +0 -1
- package/dist/Select-DV3Hak_l.js.map +0 -1
- package/dist/Sheet-OparjIi-.js.map +0 -1
- package/dist/Sidebar-CLEbBtNY.js.map +0 -1
- package/dist/TextInput-CFTf4Cz1.js.map +0 -1
- package/dist/ThemeProvider-DAmNn9Sd.js.map +0 -1
- package/dist/ZoomableSvg-BZlk3PFJ.js.map +0 -1
- package/dist/context-D7X470dy.js.map +0 -1
- package/dist/findLiteralMatches-BGBw8Vbl.js.map +0 -1
- package/dist/icons-Cek151jC.js.map +0 -1
- package/dist/internal/components/StatusDot.js +0 -67
- package/dist/internal/components/StatusDot.js.map +0 -1
- package/dist/styles-BAFscjSV.js.map +0 -1
- package/dist/svgTransforms-CJAYPk7o.js +0 -81
- package/dist/svgTransforms-CJAYPk7o.js.map +0 -1
- package/dist/themeScopeContext-D7fSyb06.js.map +0 -1
- package/dist/themeTokens-qP1-55O7.js +0 -119
- package/dist/themeTokens-qP1-55O7.js.map +0 -1
- package/dist/toast-DIC0iNRf.js.map +0 -1
- package/dist/useControllableState-M6494mCT.js.map +0 -1
- package/dist/useElement-BK3AAiIf.js +0 -24
- package/dist/useElement-BK3AAiIf.js.map +0 -1
- package/dist/utils-BW4AE8VP.js.map +0 -1
- package/dist/vegaTheme-CSvFEMBl.js.map +0 -1
package/AGENTS.md
CHANGED
|
@@ -79,6 +79,8 @@ This file answers **which** component to use; [`COMPONENT-API.md`](./COMPONENT-A
|
|
|
79
79
|
|
|
80
80
|
**Never** use `Popover` for destructive confirmations (use `Popconfirm`) or hover-only previews (use `HoverCard`). **Never** hand-roll a confirmation from `Modal` + buttons — use `AlertModal`, which owns the confirm/cancel actions and the async loading state.
|
|
81
81
|
|
|
82
|
+
**Filters in a menu are menu items:** `DropdownMenu.RadioItem` for one value, `DropdownMenu.CheckboxItem` for several, both `indicator="check" indicatorAlign="end"`. Never `RadioGroup` or `Checkbox` in a `DropdownMenu` or `Popover`.
|
|
83
|
+
|
|
82
84
|
### Inputs
|
|
83
85
|
|
|
84
86
|
| Use | When |
|
|
@@ -93,7 +95,7 @@ This file answers **which** component to use; [`COMPONENT-API.md`](./COMPONENT-A
|
|
|
93
95
|
|
|
94
96
|
**Never** build custom label + input combinations — compose `Label` + `FormGroup.TextInput` + `FormGroup.Help` inside `FormGroup`.
|
|
95
97
|
|
|
96
|
-
|
|
98
|
+
**Every select-shaped control needs an accessible name, and it goes on the control itself** — pass `id` and point a `<Label htmlFor>` at it where the field has a visible label, `aria-labelledby` where that label is some other node, and `aria-label` for a bare control — a toolbar filter, a repeated row. A name set on a surrounding wrapper (an `InputGroup`, a `<div>`) reaches nothing: the role is on the trigger or the input. `Select`, `Select.Trigger`, `Combobox`, `Combobox.Input` and `MultiCombobox` **will not compile** without one of the three (the JSDoc on the prop says why); a component that wraps one passes it on — a required `id` where every caller renders a `<Label htmlFor>`, `WithAccessibleName<Props>` where some caller has no visible label. The `field.*` connectors need none of it: `FieldItem` owns the label and hands the control its `id`.
|
|
97
99
|
|
|
98
100
|
`FileUpload` composes `FileUpload.DropZone` (the dashed box, owning the drag / error visuals) with `FileUpload.FileList` (selected files; `invalid` tints the rows). It deliberately ships **no** rejection copy — the wording is product copy, so read the current rejections with `useFileUploadRejections()` inside `FileUpload` and write the sentence yourself. Reach for `useFileDropTarget` only when there is no box to render: it returns `getRootProps()` / `isDragActive` for an affordance you style, and `noClick` / `noKeyboard` keep an already-interactive subtree (a composer, a form) from opening the file dialog on every click.
|
|
99
101
|
|
|
@@ -107,15 +109,16 @@ This file answers **which** component to use; [`COMPONENT-API.md`](./COMPONENT-A
|
|
|
107
109
|
| `Toaster` | Mount once at app root |
|
|
108
110
|
| `Alert` | Persistent contextual message in page layout |
|
|
109
111
|
| `FormGroup state="error"` | Field-level validation errors inline below input |
|
|
110
|
-
| `StatusDot` | One entity's state as a coloured dot beside its name |
|
|
111
112
|
|
|
112
113
|
**Never** use `Alert` for ephemeral success (use `toast()`) or `toast()` for blocking errors (use `Alert`).
|
|
113
114
|
|
|
114
|
-
**Never** paint a state with a hue of your own — no `tw:
|
|
115
|
-
hue.
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
115
|
+
**Never** paint a state with a hue of your own — no `tw:text-amber-600`, no `color` prop taking a
|
|
116
|
+
hue. Use the status tokens (`success` / `warning` / `info` / `destructive`, `muted-foreground` for no
|
|
117
|
+
state yet), so a customer brand recolours every state at once. Colour never carries the meaning
|
|
118
|
+
alone: name the state in text, or in an `aria-label` where there is no room for text.
|
|
119
|
+
|
|
120
|
+
**Don't** put a dot or bullet before text that already names the state ("Failed", "Up to date") —
|
|
121
|
+
colour the text instead. A column of dots reads as a bulleted list.
|
|
119
122
|
|
|
120
123
|
### Loading
|
|
121
124
|
|
|
@@ -127,6 +130,10 @@ reader gets the state too.
|
|
|
127
130
|
| `DotsLoader` | Indeterminate background work without a layout slot (small inline progress signal) |
|
|
128
131
|
| `ThinkingIndicator` | An agent turn that is in flight with nothing to show yet — every Keboola chat says it the same way |
|
|
129
132
|
|
|
133
|
+
A `Combobox` or `MultiCombobox` whose options come from a request takes **`isLoading`**, never an
|
|
134
|
+
`empty` whose text switches to "Loading…". It does not disable the control — pass `disabled` too
|
|
135
|
+
only where the user must wait. `Select` has no counterpart: it is for a short, known enum.
|
|
136
|
+
|
|
130
137
|
**Never** build a new "Loader" / "BoxLoader" / "ActionLoader" wrapper component. Compose `Skeleton` directly into the slot the real content will occupy.
|
|
131
138
|
|
|
132
139
|
### Tooltips
|
|
@@ -248,6 +255,8 @@ Vertical rhythm: prefer `tw:gap-*` on a flex column parent over `tw:mt-*` on chi
|
|
|
248
255
|
|
|
249
256
|
The `label` prop implies `orientation="horizontal"` — labels are not rendered vertically.
|
|
250
257
|
|
|
258
|
+
**Separate inline items with `tw:gap-x-*`, not a typed `·` / `|` / `/` / `—`** — it wraps onto the wrong line and a screen reader reads it out.
|
|
259
|
+
|
|
251
260
|
### Date/time, color, multi-select, code
|
|
252
261
|
|
|
253
262
|
| Use | When |
|
|
@@ -283,7 +292,7 @@ whose empty state the surrounding form cannot represent. The button only mounts
|
|
|
283
292
|
value, so an empty control renders identically either way. A **required multi** field keeps
|
|
284
293
|
clear-all — the chips are individually removable, so the empty state is reachable regardless and
|
|
285
294
|
withholding the button removes convenience without preventing anything. That is why the schema-driven
|
|
286
|
-
`SelectWidget`
|
|
295
|
+
`SelectWidget` and `ComboboxField` derive `allowClear={!required}` while `MultiComboboxField` does not.
|
|
287
296
|
|
|
288
297
|
#### Chip content in a `MultiCombobox`
|
|
289
298
|
|
|
@@ -376,11 +385,12 @@ one of these instead:
|
|
|
376
385
|
Some predicates are about blankness itself: "this Storage column equals the empty string" versus
|
|
377
386
|
"equals a single space". Whether a control can carry those depends on the primitive under it.
|
|
378
387
|
|
|
379
|
-
| Control | `''` / `' '` as a value
|
|
380
|
-
| --------------- |
|
|
381
|
-
| `MultiCombobox` | **Genuine values** — the selection shows as chips, so a blank one is nameable
|
|
382
|
-
| `Combobox` | Genuine values; add `itemToSelectedLabel={namedLabel}` to name a blank selection in the closed control
|
|
383
|
-
| `
|
|
388
|
+
| Control | `''` / `' '` as a value |
|
|
389
|
+
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
390
|
+
| `MultiCombobox` | **Genuine values** — the selection shows as chips, so a blank one is nameable |
|
|
391
|
+
| `Combobox` | Genuine values; add `itemToSelectedLabel={namedLabel}` to name a blank selection in the closed control |
|
|
392
|
+
| `ComboboxField` | **`''` is no selection**, `' '` a genuine value — the form value maps `''` to an empty control, so a `withBlankValues` `[empty string]` row cannot be picked. Use a named sentinel item, as with `Select` |
|
|
393
|
+
| `Select` | **Impossible** — Radix reads an empty root value as "nothing selected", so an item carrying it renders a blank trigger. Use a named sentinel item (`'none'`) and map it at the call site |
|
|
384
394
|
|
|
385
395
|
`withBlankValues` offers both blanks ahead of a value list and collapses duplicates — a column's
|
|
386
396
|
distinct values can already hold a blank, and two `Object.is`-equal rows both report `aria-selected`
|
|
@@ -716,6 +726,27 @@ takes the node, and the chip lets it have the keyboard.
|
|
|
716
726
|
|
|
717
727
|
**Select All in a `MultiCombobox`** — `allowSelectAll` means the **whole item set**, never the filtered one, so the row hides itself as soon as a query narrows the list. Don't reach for it to mean "select the matches" — a filtered bulk select needs its own labelled affordance stating the count, not a row whose meaning changes with the input.
|
|
718
728
|
|
|
729
|
+
**Collapsible, selectable groups** — a two-level list where the parent is picked as well as its children (a bucket and its tables). `collapsibleGroups` turns each group's label into a row with a chevron that folds the group; `selectableGroups` (`MultiCombobox`) makes a press on that row select the group's items the query matches, and `groupToValue` (`Combobox`) makes the row a value of its own.
|
|
730
|
+
|
|
731
|
+
```tsx
|
|
732
|
+
<MultiCombobox
|
|
733
|
+
items={buckets} // [{ id, items: tableIds }]
|
|
734
|
+
value={tableIds}
|
|
735
|
+
onValueChange={setTableIds}
|
|
736
|
+
groupToLabel={(bucket) => bucket.id}
|
|
737
|
+
collapsibleGroups
|
|
738
|
+
selectableGroups
|
|
739
|
+
virtualized="auto"
|
|
740
|
+
/>
|
|
741
|
+
```
|
|
742
|
+
|
|
743
|
+
- A query overrides folding: every match shows, and a group with none disappears — so the group's row always stands for something the user can see.
|
|
744
|
+
- `value` holds items only. The row reads checked / mixed from them and never becomes a chip, so `allowSelectAll` and `renderChips` count what they always count.
|
|
745
|
+
- Without `selectableGroups` / `groupToValue` a press on the row folds the group; with them, the chevron and `ArrowRight` / `ArrowLeft` do.
|
|
746
|
+
- Don't hand-roll it from a flat list and an `onValueChange` that expands a parent into its children — the control owns the fold, the query override and the mixed state.
|
|
747
|
+
|
|
748
|
+
**Long lists** — a `Combobox` or `MultiCombobox` whose options can run into the hundreds (tables, configurations, users) takes `virtualized="auto"`: past 30 options, grouped or not, only the rows in view reach the DOM. It is opt-in because a test that clicks a far row needs every option rendered.
|
|
749
|
+
|
|
719
750
|
**Sheet** — use `Sheet.Header title="…" description="…"` for a styled title + close icon; do **not** hand-roll with the raw `Sheet.Title`, which renders an unstyled `<h2>`. `Sheet.Body` provides horizontal padding only (`tw:px-4`) — add your own vertical rhythm/gap:
|
|
720
751
|
|
|
721
752
|
```tsx
|
|
@@ -740,7 +771,7 @@ import { ChevronDown, Keboola, Loader2 } from '@keboola/design/icons';
|
|
|
740
771
|
```
|
|
741
772
|
|
|
742
773
|
- **One import surface**: Lucide icons and Keboola-custom icons (e.g. `Keboola`) both export from `@keboola/design/icons` and share the `LucideIcon` type, so they're interchangeable in any API typed `icon: LucideIcon` (Button, etc.).
|
|
743
|
-
- **Vendor marks** also ship from `@keboola/design/icons` — `Aws`, `Azure`, `ChatGpt`, `Claude`, `Cursor`, `Devin`, `Gcp`, `Google`, `Keboola`, `Make`, `Microsoft` — in their own brand colours by default; pass **`mono`** to render one in `currentColor` instead. The `Eu` / `Us` flags are colour-only.
|
|
774
|
+
- **Vendor marks** also ship from `@keboola/design/icons` — `Auth0`, `Aws`, `Azure`, `ChatGpt`, `Claude`, `Cursor`, `Devin`, `Gcp`, `GitHub`, `GitLab`, `Google`, `Keboola`, `Make`, `Microsoft`, `Okta` — in their own brand colours by default; pass **`mono`** to render one in `currentColor` instead. The `Eu` / `Us` flags are colour-only.
|
|
744
775
|
- **Sizing**: prefixed Tailwind `tw:size-*` utility — `tw:size-4` = 16px (default for inline icons), `tw:size-5` = 20px, `tw:size-6` = 24px.
|
|
745
776
|
- **Spinner animation**: explicit via `tw:animate-spin`.
|
|
746
777
|
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,251 @@
|
|
|
1
1
|
# @keboola/design
|
|
2
2
|
|
|
3
|
+
## 13.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- Remove the `keboolaLegacyTopnav` brand (`keboola-legacy-topnav`). No app renders the top-nav layout any more; use `keboolaLegacySidebar`. The `shell: 'topnav'` option stays: a brand that sets it still gets the `AppShell` top-bar geometry.
|
|
8
|
+
|
|
9
|
+
- Remove `StatusDot` and `statusDotVariants`
|
|
10
|
+
|
|
11
|
+
Nothing on the platform renders it. Colour the text that names the state with a status token (`tw:text-success`, `tw:text-destructive`, …) instead of putting a dot in front of it.
|
|
12
|
+
|
|
13
|
+
### Minor Changes
|
|
14
|
+
|
|
15
|
+
- `AlertModal.Content` takes `icon={false}` for a dialog that wants no glyph at all. The header's first column collapses rather than sitting empty, so the title and body start at the edge; `variant` still colours the confirm button.
|
|
16
|
+
|
|
17
|
+
- `Card` takes `asChild` and becomes the link it wraps — `<Card asChild><a href>…</a></Card>` or a router `<Link>`. An `<a href>` card lifts, steps its border and deepens its shadow on hover (no motion under `prefers-reduced-motion`), shows the focus ring on `focus-visible` and a pointer cursor; `interactive` opts any other card in, or an anchor card out. New `Card.Description` renders the muted line under `Card.Title`.
|
|
18
|
+
|
|
19
|
+
- `Combobox`, `MultiCombobox` and `Combobox.Input` require an accessible name — `aria-label`,
|
|
20
|
+
`aria-labelledby`, or an `id` a `<Label htmlFor>` points at — as `Select` does.
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
// A visible label — point it at the control.
|
|
24
|
+
<Label htmlFor="bucket">Bucket</Label>
|
|
25
|
+
<Combobox id="bucket" items={buckets} value={bucket} onValueChange={setBucket} />
|
|
26
|
+
|
|
27
|
+
// A bare control (toolbar filter, repeated row) — name it directly.
|
|
28
|
+
<MultiCombobox aria-label="Status" items={STATUSES} value={statuses} onValueChange={setStatuses} />
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
- The `placeholder` is not a name: the name calculation reaches it only as a last resort, and it
|
|
32
|
+
disappears once a value is picked.
|
|
33
|
+
- The requirement sits on the input, which carries the `combobox` role, so the compound
|
|
34
|
+
`Combobox.Input` has it too.
|
|
35
|
+
- `ComboboxField` and `MultiComboboxField` take no `id`, `aria-label` or `aria-labelledby`:
|
|
36
|
+
`FieldItem` renders the label and hands the control its `id`.
|
|
37
|
+
- `WithAccessibleName<Props>` is exported for a component that wraps one of these controls and
|
|
38
|
+
passes the requirement on.
|
|
39
|
+
|
|
40
|
+
- `forwardAccessibleName` is exported next to `WithAccessibleName`, for a component that wraps
|
|
41
|
+
`Combobox`, `MultiCombobox` or `Select` and passes their accessible-name requirement on.
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
const TablePicker = ({
|
|
45
|
+
tables,
|
|
46
|
+
value,
|
|
47
|
+
onChange,
|
|
48
|
+
...accessibleName
|
|
49
|
+
}: Props) => (
|
|
50
|
+
<Combobox
|
|
51
|
+
{...forwardAccessibleName(accessibleName)}
|
|
52
|
+
items={tables}
|
|
53
|
+
value={value}
|
|
54
|
+
onValueChange={onChange}
|
|
55
|
+
/>
|
|
56
|
+
);
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
- It returns the rest of the wrapper's destructure unchanged, for spreading onto the control.
|
|
60
|
+
- A prop left in that rest besides `id`, `aria-label` and `aria-labelledby` fails type-check,
|
|
61
|
+
where a plain spread would pass it to the control unnoticed.
|
|
62
|
+
|
|
63
|
+
### Patch Changes
|
|
64
|
+
|
|
65
|
+
- Filled `Button`s (`primary`, `secondary`, `danger`, `kai`) paint to their outer edge, so they line up with an `outline` Button beside them. `kai` drops its 1px outer ring and keeps the soft glow.
|
|
66
|
+
|
|
67
|
+
- `CopyField.Reveal` takes a `subject`, so the eye can say "Show password" instead of "Show value"
|
|
68
|
+
|
|
69
|
+
- `CollapsiblePanel` keeps its chevron inside the panel when the header holds long text.
|
|
70
|
+
- The header content can shrink, so a `truncate` inside it cuts the text instead of pushing the chevron out.
|
|
71
|
+
|
|
72
|
+
- `MultiCombobox` selected-value chips are back to the badge's own height; the truncation tooltip no
|
|
73
|
+
longer resets the chip label's line-height.
|
|
74
|
+
|
|
75
|
+
- `Combobox` and `MultiCombobox` option rows now wrap a long label onto more lines instead of
|
|
76
|
+
truncating it, and a selected-value chip whose label is cut off shows the full label in a tooltip
|
|
77
|
+
on hover.
|
|
78
|
+
|
|
79
|
+
- `dompurify` requires 3.4.16 or newer, the release that fixes event handlers left armed in subtrees an `afterSanitize` hook removes
|
|
80
|
+
|
|
81
|
+
- `AGENTS.md`: filters in a menu are `DropdownMenu.RadioItem` / `CheckboxItem` with `indicator="check"`, never `RadioGroup` or `Checkbox`.
|
|
82
|
+
|
|
83
|
+
- `PromptInput` leaves the controls in its slots alone: with `commands` or `mentions`, Enter on a
|
|
84
|
+
focused `prefix`/`suffix` button (or a button in a menu it portals out) clicks it, and a click in
|
|
85
|
+
such a layer keeps the focus there instead of moving it to the textarea.
|
|
86
|
+
|
|
87
|
+
- `AGENTS.md`: status text that already names its state takes a status colour, not a leading dot or bullet; inline items are separated by a `tw:gap-x-*` flex row, not a typed `·` / `|` / `/` / `—`.
|
|
88
|
+
|
|
89
|
+
- `ToolCallStatusHeader` shows its label in full foreground ink while `needsConfirmation` is set, so the name of the action being approved is as easy to see as the content below it. The warning tint, icon and "Confirmation required" chip still mark the state.
|
|
90
|
+
|
|
91
|
+
- Updated dependencies:
|
|
92
|
+
- @keboola/brand-registry@2.0.0
|
|
93
|
+
|
|
94
|
+
## 12.0.0
|
|
95
|
+
|
|
96
|
+
### Major Changes
|
|
97
|
+
|
|
98
|
+
- Remove the `break-anywhere` custom utility from `@keboola/design/theme`
|
|
99
|
+
|
|
100
|
+
Tailwind v4.1 shipped `wrap-anywhere` as a core utility emitting the same `overflow-wrap: anywhere`, and the repo compiles against v4.3. A custom utility that duplicates a core one only adds a second name for the same declaration.
|
|
101
|
+
|
|
102
|
+
Replace `tw:break-anywhere` with `tw:wrap-anywhere`. No other change — the emitted CSS is identical.
|
|
103
|
+
|
|
104
|
+
### Minor Changes
|
|
105
|
+
|
|
106
|
+
- `Combobox` and `MultiCombobox` give a group a row of its own that folds it and can select it.
|
|
107
|
+
- `collapsibleGroups` folds a group from its row's chevron, or with `ArrowRight` / `ArrowLeft` on the highlighted row. A query shows every match whatever is folded.
|
|
108
|
+
- `MultiCombobox` `selectableGroups` makes the row select the group's items the query matches, and reads checked, mixed or empty. `value` only ever holds items.
|
|
109
|
+
- `Combobox` `groupToValue` makes the row a value of its own, so a group is picked whole beside its items.
|
|
110
|
+
|
|
111
|
+
- `ComboboxField`: a `useAppForm` connector for the single `Combobox`, holding a `string` (`''` for no selection), imported by name and composed inside `form.AppField`. `Combobox` takes `name`, `onBlur`, `aria-invalid` and `aria-required` and forwards them to its input, and the rjsf `SelectWidget` / `DynamicSelectWidget` mark a field with errors through `aria-invalid` and revalidate on blur, so a fixed value clears its error.
|
|
112
|
+
|
|
113
|
+
- `MultiCombobox` takes `virtualized` like `Combobox`, and in both it now windows grouped lists too.
|
|
114
|
+
- `'auto'` windows a list of more than 30 options, grouped or not, collapsible and selectable groups included; `true` always does. The default stays `false`.
|
|
115
|
+
- A windowed option carries `aria-setsize` / `aria-posinset`, so the list's length stays known with most rows out of the DOM.
|
|
116
|
+
- A grouped `MultiCombobox` with `allowSelectAll` filters by the query; it used to show no match.
|
|
117
|
+
|
|
118
|
+
- `Combobox` and `MultiCombobox` take `isLoading` for options that are still arriving.
|
|
119
|
+
- The open button's chevron turns into a spinner, and the input reports `aria-busy`.
|
|
120
|
+
- The popup says "Loading…" where it would otherwise show `empty`, so a fetch no longer reads as an empty list.
|
|
121
|
+
- Items already present stay listed and selectable, and the control stays typeable and creatable — pass `disabled` as well where the user has to wait.
|
|
122
|
+
|
|
123
|
+
- `FileDownloadChip` offers a file an agent wrote, inside the answer that names it.
|
|
124
|
+
|
|
125
|
+
An agent that has just built a spreadsheet can otherwise only name it in prose, leaving the reader a filename and no way to reach it. The chip is the answer's own answer to "where did my report go": the file name, its size when the caller knows it, and a download, drawn where the sentence mentions the file. The whole chip is the control rather than an icon at the end of it — it sits in a transcript column, where a small target beside a truncating filename is the hardest thing on the page to hit — and it is named `Download <file>` rather than by the file alone, because a reader hearing only `revenue.csv` has no way to know that activating it takes the file. The path goes on `title`, which is what tells two `report.pdf`s in different folders apart, and stays a hover affordance rather than the accessible name. It neither fetches nor saves: the transport is the host's, which is what lets one chip serve two apps whose markdown stacks and auth pipelines are separate, and `isPending` is the only thing it says about a download in flight.
|
|
126
|
+
|
|
127
|
+
- `Auth0`, `GitHub`, `GitLab` and `Okta` join the vendor marks in `@keboola/design/icons`, so a sign-in or identity-provider picker can show each vendor by its own mark.
|
|
128
|
+
|
|
129
|
+
`Auth0` and `GitLab` render in their brand colours, and `mono` flattens them to `currentColor` like every vendor mark. `GitHub` and `Okta` draw in `currentColor` always: both vendors ship their marks in black and white only, so the text colour is the brand colour and keeps them visible on light and dark surfaces. Each comes from the vendor's own brand or press source — the Okta Aura lifted out of the lockup on okta.com — and is recorded with its restriction in `icons/vendors/README.md`.
|
|
130
|
+
|
|
131
|
+
- `Button` gains a `kai` variant: Kai's gradient with three light pools drifting behind the label, for Kai's own actions.
|
|
132
|
+
|
|
133
|
+
- The reading rhythm of an answer is one definition
|
|
134
|
+
- `tw:prose`'s `--tw-prose-*` slots point at theme tokens, so prose follows the colour scheme and the brand without a call site reaching for `prose-invert`. The `[data-theme='dark'] .tw:prose → prose-invert` patch is gone with them. This is not additive: every `.tw:prose` surface takes the new palette, tooltips and docs included.
|
|
135
|
+
- `tw:prose-answer` is the new measure, heading scale, heading margins and paragraph/list rhythm a Keboola answer reads on. `AIKit/Markdown` wears it, so every chat gets the same one.
|
|
136
|
+
- `Markdown` takes a `rhythm` prop: `answer` (the default) is the new rhythm, `chrome` is `tw:prose` on the dense `tw:prose-sm` scale for content a model did not write — a dashboard text widget, a vendor's app description.
|
|
137
|
+
- `tw:prose-code-chip` paints inline code as a chip on the `--muted` / `--foreground` pair, and both rhythms wear it. It is its own utility because it is palette, not rhythm: without it a surface keeps Typography's pinned `#c7254e`, which measures 3.36:1 on the dark page.
|
|
138
|
+
- `Markdown.Root` / `Markdown.Block` split one prose surface from the N blocks a streaming renderer paints into it — the rhythm then resolves `:first-child` / `:last-child` across the whole reply.
|
|
139
|
+
- `tw:prose-answer`'s wider values apply inside an `@container/messages` at 640px and up; where no consumer declares that container it keeps its narrow ones.
|
|
140
|
+
|
|
141
|
+
- Add `Popover.Anchor` to position a controlled popover against an element that is not its trigger.
|
|
142
|
+
|
|
143
|
+
- `PromptInput`: a `PromptCommand` may carry `onSelect` and act instead of inserting its value, and a `panel` takes the popup's place for a small form opened from such a row — Escape and the × close it. `commandsGroupAction` puts a control on a `/` group's heading line, for whatever that group's rows come from. A `PromptCommand` may also carry an `icon`, for a list whose rows are things rather than commands.
|
|
144
|
+
|
|
145
|
+
- `PromptInput`'s `/` menu is about the leading token, not the whole message: it opens while the caret is on a `/token` at the head of the text even when a message follows, and a pick replaces only that token. `findSlashToken` is exported for a host that needs the same reading.
|
|
146
|
+
|
|
147
|
+
- `PromptInput` takes `mentions` and `onMentionSelect`: an `@` typed anywhere in the message opens a
|
|
148
|
+
command popup filtered by the word after it. Picking an item removes the token and hands the pick to
|
|
149
|
+
the host, which attaches whatever it stands for — nothing is inserted as text. `findMentionToken` is
|
|
150
|
+
exported for a host that needs to reopen the menu at the caret.
|
|
151
|
+
|
|
152
|
+
- A status dot and a chip editor, so nobody paints a state or a chip row by hand
|
|
153
|
+
|
|
154
|
+
`StatusDot` is one entity's state as a coloured dot. `status` — `success`, `warning`, `info`,
|
|
155
|
+
`destructive`, `neutral` — is its whole colour API: there is no `color` prop taking a hue, so the
|
|
156
|
+
dot reads the themeable status tokens and a customer brand recolours every dot on the platform at
|
|
157
|
+
once. `pulse` says the work is still moving, and `label` names the dot for a screen reader where the
|
|
158
|
+
text beside it does not.
|
|
159
|
+
|
|
160
|
+
`ChipEditor` is the chip row without the popup — tags, feature flags, permitted email domains, any
|
|
161
|
+
list of strings the user writes rather than picks. Enter, the separator and blur each commit what is
|
|
162
|
+
typed; Backspace in an empty field removes the last chip. It shares `MultiCombobox`'s vocabulary, so
|
|
163
|
+
a pasted list becomes one chip per value (`separator`, `null` for a value that contains one) and
|
|
164
|
+
`canAdd` gates each value's format, keeping the ones that pass and leaving the rest in the field to
|
|
165
|
+
fix. Values are compared case-insensitively, so one already held is never added twice.
|
|
166
|
+
|
|
167
|
+
Reach for `MultiCombobox` the moment there is a list worth searching, even an open-ended one.
|
|
168
|
+
|
|
169
|
+
### Patch Changes
|
|
170
|
+
|
|
171
|
+
- Refresh AIKit Markdown visual baselines for the answer rhythm.
|
|
172
|
+
|
|
173
|
+
- Refresh AIKit PromptInput visual baselines for the compact composer.
|
|
174
|
+
|
|
175
|
+
- Make legacy Alert tints scheme-aware so dark mode uses legible semantic status tokens.
|
|
176
|
+
|
|
177
|
+
- Add two brands to the registry: `agnes` (the "paper" light theme shipped by the Agnes AI-analyst harness, with the emerald/navy dark palette such an instance actually renders) and `harbor` (a fictional consulting/advisory showcase brand, navy + steel blue + gold, clean against AA in both palettes). Both are re-exported from `@keboola/design`, offered in the Storybook brand toolbar, and available as theme-generator presets.
|
|
178
|
+
|
|
179
|
+
Also mark the frozen `brands` array `@__PURE__`. Without the annotation a bundler reads the top-level `Object.freeze(...)` as a side effect and keeps every brand — logo SVGs included — in any bundle that imports a single one; `@keboola/design/testing` shrinks from 88.27 kB to 86.31 kB as a result. Its budget moves 88 kB -> 92 KB so the next brand does not land on the limit again.
|
|
180
|
+
|
|
181
|
+
- `Button` honours an explicit `aria-disabled` instead of overwriting it.
|
|
182
|
+
|
|
183
|
+
The attribute was written from the `disabled` prop after the caller's own props were spread, so a button passing `aria-disabled` alone reported `aria-disabled="false"` — the opposite of what it asked for, and silently. That shape is the one a focus-preserving pending state needs: `disabled` removes the control from the tab order, so a reader who tabs to a button and activates it loses their place on the page for as long as the action runs. Passing `aria-disabled` and ignoring activation in the handler keeps the control focusable and still says it is unavailable. `disabled` alone behaves exactly as before.
|
|
184
|
+
|
|
185
|
+
- Card's border follows the theme in every brand, not only argo
|
|
186
|
+
|
|
187
|
+
- Seed ChipEditor and StatusDot visual baselines.
|
|
188
|
+
|
|
189
|
+
- `Combobox` and `MultiCombobox` forward `aria-label` and `aria-labelledby` to the input.
|
|
190
|
+
|
|
191
|
+
Both accepted the props and dropped them, so a control with no visible label had no accessible name — its `placeholder` was all a screen reader had to go on, and only as the last resort of the name calculation. The `combobox` role is on the input itself, so nothing set on the surrounding `InputGroup` would have reached assistive tech either. `Combobox` also forwards `name` and `aria-describedby`, which `MultiCombobox` already did. UT-5474.
|
|
192
|
+
|
|
193
|
+
- - `Combobox` rows show `itemToStringLabel`'s text, a blank one named, where no `itemToLabel` is passed — as `MultiCombobox` rows do. An item without a `label` field needs only `itemToStringLabel`.
|
|
194
|
+
- `MultiCombobox` without `value` holds its own selection: `defaultValue` seeds it, and `onValueChange` reports each change.
|
|
195
|
+
- In a grouped `Combobox` or `MultiCombobox` with `allowCreate`, `groupToLabel` receives only the groups in `items`. The created values sit in a group of their own with no label.
|
|
196
|
+
- `MultiCombobox`'s `itemToLabel` receives the typed query as its second argument, as `Combobox`'s does, so a row can mark the match with `MarkedText`. A chip receives `''`.
|
|
197
|
+
- `Combobox` and `MultiCombobox` label each group from its `label` field where no `groupToLabel` is passed, as `Select` does. A `label` that is not a string, a number or an element reads as none.
|
|
198
|
+
|
|
199
|
+
- `Combobox` shows an empty input for a selected item whose `label` and `value` are both `''`.
|
|
200
|
+
- Such an item reads as `''` for the input text, the default search text and the accessible value, like the string item `''`.
|
|
201
|
+
- Its row is still named `[empty string]`.
|
|
202
|
+
|
|
203
|
+
- `Combobox` with `allowCreate` lists a created value only while it is the selection and `items` does not hold it, so an adder pinned to `null`, a later pick, or an owner that adds the value to `items` leaves no extra created row.
|
|
204
|
+
|
|
205
|
+
- A collapsible group row in `Combobox` and `MultiCombobox` states its fold as the accessible description `Expanded` / `Collapsed`. It carries no `aria-expanded`, which `role="option"` does not allow.
|
|
206
|
+
|
|
207
|
+
- Add linux visual baselines for the Combobox and MultiCombobox loading and collapsible-group stories and the PromptInput attachments story.
|
|
208
|
+
|
|
209
|
+
- `Combobox` and `MultiCombobox` key the rows of a fully rendered list, so opening one logs no React "unique key" warning.
|
|
210
|
+
|
|
211
|
+
- `Combobox` and `MultiCombobox` without group rows (`collapsibleGroups`, `groupToValue`, `selectableGroups`) re-filter their list only when `items`, `filter`, a label accessor or, for `MultiCombobox`'s default filter, `value` changes. A caller that keeps those stable no longer re-filters on an unrelated re-render; a list with group rows still re-filters on every render.
|
|
212
|
+
|
|
213
|
+
- `FileDownloadChip` spins while a download is in flight.
|
|
214
|
+
|
|
215
|
+
It only greyed out before, so a slow or large file gave the reader nothing to watch and no way to tell a working download from a dead control. `Button` already owns the in-flight contract — `isLoading` draws the spinner and disables the control — so the chip passes it rather than inventing a second convention. Its own file and download glyphs are suppressed for that moment: `Button` renders the spinner _beside_ its children rather than in place of them, so leaving them in would stack three icons in a row barely wider than the filename.
|
|
216
|
+
|
|
217
|
+
- `FileDownloadChip` names the file by its path in the accessible name.
|
|
218
|
+
|
|
219
|
+
`aria-label` replaces a button's descendant text and `title` plays no part in the accessible name, so the label was the only thing a screen reader announced — and it carried the bare filename. Two files named `report.pdf` from different folders were announced identically, leaving no way to tell which download was about to be activated. The label now carries `filePath` when there is one, falling back to `fileName`. The visible chip is unchanged: it still shows the name alone, since the path is what truncates badly in a transcript column.
|
|
220
|
+
|
|
221
|
+
- Dark mode: text selection is a translucent primary wash instead of the browser's solid fill.
|
|
222
|
+
|
|
223
|
+
- InputGroup, Select/overlay triggers and base h1 use theme tokens so text and secondary controls stay readable in dark mode
|
|
224
|
+
|
|
225
|
+
- `MultiCombobox` works on React 19.3: a press beside the chips focuses the input and opens the list, and the chip row takes the toolbar role once it holds chips.
|
|
226
|
+
|
|
227
|
+
- A narrow `MultiCombobox` keeps its clear and open buttons inside its border.
|
|
228
|
+
- The input row wraps below the chips when there is less than 120px of room for the input beside them.
|
|
229
|
+
- On a row of its own it shrinks to the control's width, so a value field in a three-column filter row keeps both buttons reachable.
|
|
230
|
+
|
|
231
|
+
- `PromptInput` eases its height as attachments are added or removed.
|
|
232
|
+
|
|
233
|
+
- `PromptInput`'s `inline` row folds into the stacked layout below 480px of the container a host names with `PROMPT_INPUT_CONTAINER`, so a composer beside a panel that narrows it keeps its text on a line of its own instead of squeezing.
|
|
234
|
+
|
|
235
|
+
- `Question` renders its footer only when something would be in it, and drops the step widget on a one-question card. A single step showed "1 of 1" over a full progress bar with both chevrons dead, and a card with no Skip and no submit action was left with a bordered strip containing nothing — which reads as a control that failed to render.
|
|
236
|
+
|
|
237
|
+
- -
|
|
238
|
+
|
|
239
|
+
- Bound the SQL editor's active-query highlight to the document it highlights, so a splitter whose fragments do not re-join to the input can no longer crash the editor with `RangeError: Invalid position N in document of length M`.
|
|
240
|
+
|
|
241
|
+
- `Tooltip` renders the argo chrome when its trigger sits inside `Navbar` or `Sidebar` DOM, even under a legacy brand — those components exist only in the new design, so a black legacy tooltip inside them was the anomaly. The rule is keyed on the trigger's DOM ancestry, so an overlay a nav item portals out of the nav (a dialog, a menu) keeps following the brand. `chrome="argo" | "legacy"` forces one explicitly.
|
|
242
|
+
|
|
243
|
+
- `Tooltip` casing follows the chrome, not the brand: the legacy dark pill keeps its uppercase label, the argo popover reads standard case. `Kbd` renders its key uppercase by default; `casing="as-written"` keeps a layout-printed label as it is.
|
|
244
|
+
|
|
245
|
+
- Updated dependencies:
|
|
246
|
+
- @keboola/brand-registry@1.10.0
|
|
247
|
+
- @keboola/tailwind-config@1.2.0
|
|
248
|
+
|
|
3
249
|
## 11.9.0
|
|
4
250
|
|
|
5
251
|
### Minor Changes
|