@keboola/design 13.2.0 → 15.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 +16 -24
- package/CHANGELOG.md +194 -0
- package/COMPONENT-API.md +109 -105
- package/dist/{AIKit-C5FbKjwa.js → AIKit-CaAW4GLx.js} +2216 -307
- package/dist/AIKit-CaAW4GLx.js.map +1 -0
- package/dist/{Alert-DuAGeYyM.js → Alert-Chz6KZ7e.js} +11 -20
- package/dist/Alert-Chz6KZ7e.js.map +1 -0
- package/dist/{AlertModal-BDle9ZVQ.js → AlertModal-D4AtpvLS.js} +15 -35
- package/dist/AlertModal-D4AtpvLS.js.map +1 -0
- package/dist/{AppShell-B03fj1j7.js → AppShell-C8V1KRr_.js} +2 -2
- package/dist/{AppShell-B03fj1j7.js.map → AppShell-C8V1KRr_.js.map} +1 -1
- package/dist/{AutoSaveTextarea-jiqNeeE4.js → AutoSaveTextarea-BbMhC5Aq.js} +3 -3
- package/dist/AutoSaveTextarea-BbMhC5Aq.js.map +1 -0
- package/dist/{Badge-Ba3epgcI.js → Badge-5GHIsgRS.js} +14 -3
- package/dist/Badge-5GHIsgRS.js.map +1 -0
- package/dist/{BrandEditor-Dq168RJc.js → BrandEditor-CTGtQUFZ.js} +8 -10
- package/dist/BrandEditor-CTGtQUFZ.js.map +1 -0
- package/dist/{BrandLogo-BfITD0im.js → BrandLogo-DkESE19K.js} +2 -2
- package/dist/{BrandLogo-BfITD0im.js.map → BrandLogo-DkESE19K.js.map} +1 -1
- package/dist/{Breadcrumb-CUyYu5Bi.js → Breadcrumb-B2YSNON4.js} +55 -13
- package/dist/Breadcrumb-B2YSNON4.js.map +1 -0
- package/dist/{Button-D2JqBAq7.js → Button-BNkyYU8u.js} +9 -185
- package/dist/Button-BNkyYU8u.js.map +1 -0
- package/dist/{Card-Bpc_ZlL4.js → Card-DxjGiqH8.js} +11 -18
- package/dist/Card-DxjGiqH8.js.map +1 -0
- package/dist/{Checkbox-D9rafoKh.js → Checkbox-CHDDJyAA.js} +20 -45
- package/dist/Checkbox-CHDDJyAA.js.map +1 -0
- package/dist/{Clipboard-BHWUodAx.js → Clipboard-DlwVZS1P.js} +2 -2
- package/dist/{Clipboard-BHWUodAx.js.map → Clipboard-DlwVZS1P.js.map} +1 -1
- package/dist/{ClipboardButton-Urg-kZbh.js → ClipboardButton-B1Hr_n_Z.js} +3 -3
- package/dist/{ClipboardButton-Urg-kZbh.js.map → ClipboardButton-B1Hr_n_Z.js.map} +1 -1
- package/dist/{CodeEditor-Y0iE-SwV.js → CodeEditor-DVSPdfdo.js} +24 -31
- package/dist/CodeEditor-DVSPdfdo.js.map +1 -0
- package/dist/{ColorInput-D1nC0X6i.js → ColorInput-B_eZIu39.js} +5 -7
- package/dist/ColorInput-B_eZIu39.js.map +1 -0
- package/dist/{ColorModeSwitch-Cxee8jnB.js → ColorModeSwitch-B6UEzG0H.js} +3 -3
- package/dist/{ColorModeSwitch-Cxee8jnB.js.map → ColorModeSwitch-B6UEzG0H.js.map} +1 -1
- package/dist/{Combobox-B1Kjoy5J.js → Combobox-CaKqgstG.js} +250 -56
- package/dist/Combobox-CaKqgstG.js.map +1 -0
- package/dist/{Command-BuOA3V18.js → Command-DhXmqFLT.js} +51 -33
- package/dist/Command-DhXmqFLT.js.map +1 -0
- package/dist/{CopyField-DsOVtV2Q.js → CopyField-D0Pg4Z0R.js} +2 -2
- package/dist/{CopyField-DsOVtV2Q.js.map → CopyField-D0Pg4Z0R.js.map} +1 -1
- package/dist/{DateInput-BlKkequE.js → DateInput-BgbMDJkm.js} +5 -7
- package/dist/DateInput-BgbMDJkm.js.map +1 -0
- package/dist/{DatePicker-CgHAu9KX.js → DatePicker-BXpDRo-R.js} +2 -2
- package/dist/{DatePicker-CgHAu9KX.js.map → DatePicker-BXpDRo-R.js.map} +1 -1
- package/dist/{DateRangeInput-DOxJHw8V.js → DateRangeInput-BW0-_jV0.js} +5 -7
- package/dist/DateRangeInput-BW0-_jV0.js.map +1 -0
- package/dist/{DateRangePicker-CXpXPMoh.js → DateRangePicker-C4-DoWac.js} +7 -12
- package/dist/DateRangePicker-C4-DoWac.js.map +1 -0
- package/dist/{DropdownMenu-DtRYcKEx.js → DropdownMenu-CcVbZ_5u.js} +35 -64
- package/dist/DropdownMenu-CcVbZ_5u.js.map +1 -0
- package/dist/{FieldItem-Cf1E3rfQ.js → FieldItem-BHUqgSO1.js} +3 -3
- package/dist/{FieldItem-Cf1E3rfQ.js.map → FieldItem-BHUqgSO1.js.map} +1 -1
- package/dist/{FileUpload-D6vPG3WB.js → FileUpload-BYFONpEl.js} +3 -3
- package/dist/FileUpload-BYFONpEl.js.map +1 -0
- package/dist/{Form-CuaAn-lR.js → Form-CAofWyMI.js} +8 -8
- package/dist/{Form-CuaAn-lR.js.map → Form-CAofWyMI.js.map} +1 -1
- package/dist/{FormGroup-D4O96YPm.js → FormGroup-V5kIgQRN.js} +3 -3
- package/dist/{FormGroup-D4O96YPm.js.map → FormGroup-V5kIgQRN.js.map} +1 -1
- package/dist/{FullScreenModal-CUuAakh3.js → FullScreenModal-DAvvlGOz.js} +2 -5
- package/dist/FullScreenModal-DAvvlGOz.js.map +1 -0
- package/dist/HoverCard-Cv5rmvJq.js +26 -0
- package/dist/HoverCard-Cv5rmvJq.js.map +1 -0
- package/dist/{InlineEdit-DSMIEUUa.js → InlineEdit-D4P0SvCB.js} +5 -9
- package/dist/InlineEdit-D4P0SvCB.js.map +1 -0
- package/dist/{InputGroup-Dm014ruw.js → InputGroup-CZv_7QlM.js} +39 -146
- package/dist/InputGroup-CZv_7QlM.js.map +1 -0
- package/dist/{Kbd-Du93F3o4.js → Kbd-CflKthfu.js} +5 -14
- package/dist/Kbd-CflKthfu.js.map +1 -0
- package/dist/MermaidDiagram-Te-5gOCU.js +199 -0
- package/dist/MermaidDiagram-Te-5gOCU.js.map +1 -0
- package/dist/{Modal-DQIauzar.js → Modal-CbUz-5YH.js} +19 -37
- package/dist/Modal-CbUz-5YH.js.map +1 -0
- package/dist/{ModalTitle-CTECVgL8.js → ModalTitle-cy0Ht9VY.js} +2 -2
- package/dist/{ModalTitle-CTECVgL8.js.map → ModalTitle-cy0Ht9VY.js.map} +1 -1
- package/dist/{MultiActionButtonGroup-xKqiucAN.js → MultiActionButtonGroup-Dzig87s1.js} +3 -3
- package/dist/{MultiActionButtonGroup-xKqiucAN.js.map → MultiActionButtonGroup-Dzig87s1.js.map} +1 -1
- package/dist/{Navbar-CtVYcRFn.js → Navbar-DHUS7XiU.js} +2 -2
- package/dist/{Navbar-CtVYcRFn.js.map → Navbar-DHUS7XiU.js.map} +1 -1
- package/dist/OtpInput-CY8yCaJk.js.map +1 -1
- package/dist/{PageToolbar-B_e7HGva.js → PageToolbar-DJ5tdYla.js} +4 -4
- package/dist/{PageToolbar-B_e7HGva.js.map → PageToolbar-DJ5tdYla.js.map} +1 -1
- package/dist/{Pagination-DDp6PRqf.js → Pagination-D27x5KmH.js} +2 -2
- package/dist/{Pagination-DDp6PRqf.js.map → Pagination-D27x5KmH.js.map} +1 -1
- package/dist/{Popconfirm-BgV6a0sl.js → Popconfirm-DwLCYNaF.js} +3 -3
- package/dist/{Popconfirm-BgV6a0sl.js.map → Popconfirm-DwLCYNaF.js.map} +1 -1
- package/dist/{Popover-BU7nGOv-.js → Popover-DtUDwUVO.js} +24 -37
- package/dist/Popover-DtUDwUVO.js.map +1 -0
- package/dist/{RadioGroup-C2vk5acr.js → RadioGroup-B0TwHjBb.js} +9 -13
- package/dist/RadioGroup-B0TwHjBb.js.map +1 -0
- package/dist/{Search-CVrv3hqf.js → Search-vyZwGKMU.js} +3 -3
- package/dist/{Search-CVrv3hqf.js.map → Search-vyZwGKMU.js.map} +1 -1
- package/dist/{SearchInput-BnU6YHgT.js → SearchInput-DyYXyw3u.js} +4 -6
- package/dist/SearchInput-DyYXyw3u.js.map +1 -0
- package/dist/{SectionNav-XlhvXXdF.js → SectionNav-tLK3iF6c.js} +5 -5
- package/dist/{SectionNav-XlhvXXdF.js.map → SectionNav-tLK3iF6c.js.map} +1 -1
- package/dist/{Select-CjQgU_6K.js → Select-B22hB_-w.js} +11 -25
- package/dist/Select-B22hB_-w.js.map +1 -0
- package/dist/{Sheet-utw4_rUa.js → Sheet-0TWKTqid.js} +12 -15
- package/dist/Sheet-0TWKTqid.js.map +1 -0
- package/dist/{Sidebar-CKaxOPwY.js → Sidebar-C5hdANBU.js} +11 -11
- package/dist/Sidebar-C5hdANBU.js.map +1 -0
- package/dist/{Slider-Rcc2qVct.js → Slider-DrcsM8_G.js} +4 -4
- package/dist/Slider-DrcsM8_G.js.map +1 -0
- package/dist/{Stepper-BBPembeK.js → Stepper-CQrUPVFL.js} +2 -2
- package/dist/Stepper-CQrUPVFL.js.map +1 -0
- package/dist/Switch-DccpSpzC.js +66 -0
- package/dist/Switch-DccpSpzC.js.map +1 -0
- package/dist/{Table-CgSC-fSo.js → Table-CilEvpMq.js} +62 -3
- package/dist/Table-CilEvpMq.js.map +1 -0
- package/dist/{Tabs-C0uvkPHc.js → Tabs-Ck4uWf8U.js} +2 -2
- package/dist/{Tabs-C0uvkPHc.js.map → Tabs-Ck4uWf8U.js.map} +1 -1
- package/dist/{TextInput-B5TDDOty.js → TextInput-CR0_USaY.js} +4 -7
- package/dist/TextInput-CR0_USaY.js.map +1 -0
- package/dist/{ThemeProvider-Dt9b67sW.js → ThemeProvider-BTK7AL-T.js} +21 -8
- package/dist/ThemeProvider-BTK7AL-T.js.map +1 -0
- package/dist/{TimePicker-DyyV3nw8.js → TimePicker-CoRpiEM3.js} +2 -2
- package/dist/{TimePicker-DyyV3nw8.js.map → TimePicker-CoRpiEM3.js.map} +1 -1
- package/dist/{Toast-BGnUL4jV.js → Toast-937n7n8i.js} +2 -2
- package/dist/{Toast-BGnUL4jV.js.map → Toast-937n7n8i.js.map} +1 -1
- package/dist/ToggleAllTooltip-DEjbWFoj.js +37 -0
- package/dist/ToggleAllTooltip-DEjbWFoj.js.map +1 -0
- package/dist/{ZoomableSvg-D8sXKpoV.js → ZoomableSvg-DnFXo2L4.js} +85 -81
- package/dist/ZoomableSvg-DnFXo2L4.js.map +1 -0
- package/dist/editors.js +4 -4
- package/dist/flint.js +10 -45
- package/dist/flint.js.map +1 -1
- package/dist/highlightCode-D354tCXO.js +81 -0
- package/dist/highlightCode-D354tCXO.js.map +1 -0
- package/dist/index.d.ts +843 -443
- package/dist/index.js +62 -63
- package/dist/internal/blocks/AIKit.js +2 -2
- package/dist/internal/blocks/AppShell.js +1 -1
- package/dist/internal/blocks/AuthLayout.js +1 -1
- package/dist/internal/blocks/AutoSaveTextarea.js +1 -1
- package/dist/internal/blocks/BrandEditor.js +1 -1
- package/dist/internal/blocks/ChartPanel.js +1 -1
- package/dist/internal/blocks/ChipEditor.js +5 -9
- 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/DateInput.js +1 -1
- package/dist/internal/blocks/DateRangeInput.js +1 -1
- package/dist/internal/blocks/DiagramShared/DiagramSkeleton.js.map +1 -1
- package/dist/internal/blocks/EmptyConfigurationActionCard.js +1 -1
- package/dist/internal/blocks/ErrorState.js +18 -29
- package/dist/internal/blocks/ErrorState.js.map +1 -1
- package/dist/internal/blocks/ExportMenu.js +3 -3
- package/dist/internal/blocks/ExportMenu.js.map +1 -1
- package/dist/internal/blocks/Form/connectors/ComboboxField.js +2 -2
- package/dist/internal/blocks/Form/connectors/MultiComboboxField.js +1 -1
- package/dist/internal/blocks/Form.js +1 -1
- package/dist/internal/blocks/FormGroup.js +1 -1
- package/dist/internal/blocks/InlineEdit.js +1 -1
- package/dist/internal/blocks/MultiActionButtonGroup.js +1 -1
- package/dist/internal/blocks/MultiCombobox.js +202 -70
- package/dist/internal/blocks/MultiCombobox.js.map +1 -1
- package/dist/internal/blocks/NumberInput.js +2 -4
- package/dist/internal/blocks/NumberInput.js.map +1 -1
- package/dist/internal/blocks/PageToolbar.js +1 -1
- package/dist/internal/blocks/PasswordInput.js +3 -5
- package/dist/internal/blocks/PasswordInput.js.map +1 -1
- package/dist/internal/blocks/SearchInput.js +1 -1
- package/dist/internal/blocks/SearchInputWithNavigation.js +6 -7
- package/dist/internal/blocks/SearchInputWithNavigation.js.map +1 -1
- package/dist/internal/blocks/SectionNav.js +1 -1
- package/dist/internal/blocks/SplitButton.js +2 -2
- package/dist/internal/blocks/StatCard.js +1 -1
- package/dist/internal/blocks/TextInput.js +1 -1
- package/dist/internal/blocks/Textarea.js +3 -8
- package/dist/internal/blocks/Textarea.js.map +1 -1
- package/dist/internal/blocks/TimeInput.js +4 -6
- 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 +2 -2
- package/dist/internal/components/ButtonGroup.js +1 -1
- package/dist/internal/components/ButtonGroup.js.map +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 +1 -1
- package/dist/internal/components/Combobox.js +1 -1
- 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/Modal.js +1 -1
- package/dist/internal/components/Navbar.js +1 -1
- package/dist/internal/components/Pagination.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/Sheet.js +1 -1
- package/dist/internal/components/Sidebar.js +1 -1
- package/dist/internal/components/Skeleton/Skeleton.js +2 -2
- package/dist/internal/components/Skeleton/Skeleton.js.map +1 -1
- package/dist/internal/components/Slider.js +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 -4
- package/dist/internal/components/TimePicker.js +1 -1
- package/dist/internal/components/Toast.js +2 -2
- package/dist/internal/components/Toggle.js +13 -3
- package/dist/internal/components/Toggle.js.map +1 -1
- package/dist/internal/components/Tooltip.js +1 -1
- package/dist/internal/components/Truncated.js +1 -1
- package/dist/internal/components/ZoomableSvg.js +1 -1
- package/dist/internal/utils.js +1 -1
- package/dist/markdown-editor.js +16 -18
- package/dist/markdown-editor.js.map +1 -1
- package/dist/mermaid.d.ts +1 -2
- package/dist/mermaid.js +1 -1
- package/dist/rjsf.js +121 -43
- package/dist/rjsf.js.map +1 -1
- package/dist/styles-DxazJ8Mz.js +81 -0
- package/dist/styles-DxazJ8Mz.js.map +1 -0
- package/dist/styles-T8xwr0sR.js +73 -0
- package/dist/styles-T8xwr0sR.js.map +1 -0
- package/dist/styles.css +1 -1
- package/dist/svgCache-Dhmbe-7i.js +26 -0
- package/dist/svgCache-Dhmbe-7i.js.map +1 -0
- package/dist/svgTransforms-Hnvev3Vs.js +38 -0
- package/dist/svgTransforms-Hnvev3Vs.js.map +1 -0
- package/dist/testing.d.ts +0 -2
- package/dist/testing.js +3 -10
- package/dist/testing.js.map +1 -1
- package/dist/{useColorSchemeState-Cw4MCXUs.js → themeScopeContext-CEVXbYvZ.js} +43 -15
- package/dist/themeScopeContext-CEVXbYvZ.js.map +1 -0
- package/dist/{useThemeAttributes-B199Regy.js → themeTokens-DCeb62ap.js} +22 -4
- package/dist/themeTokens-DCeb62ap.js.map +1 -0
- package/dist/{toast-D6Z6MOB5.js → toast-Y3cTMBW8.js} +7 -10
- package/dist/toast-Y3cTMBW8.js.map +1 -0
- package/dist/{utils-p6tjltbX.js → utils-DwC9u0tM.js} +39 -49
- package/dist/utils-DwC9u0tM.js.map +1 -0
- package/dist/vega.js +2 -2
- package/dist/vegaTheme-ISwGXvof.js +49 -0
- package/dist/vegaTheme-ISwGXvof.js.map +1 -0
- package/dist/{vegaTheme-VQMWTlBw.js → vegaTokens-DCkvpIVE.js} +36 -44
- package/dist/vegaTokens-DCkvpIVE.js.map +1 -0
- package/package.json +3 -4
- package/src/styles.css +4 -39
- package/src/theme.css +42 -0
- package/dist/AIKit-C5FbKjwa.js.map +0 -1
- package/dist/Alert-DuAGeYyM.js.map +0 -1
- package/dist/AlertModal-BDle9ZVQ.js.map +0 -1
- package/dist/AutoSaveTextarea-jiqNeeE4.js.map +0 -1
- package/dist/Badge-Ba3epgcI.js.map +0 -1
- package/dist/BrandEditor-Dq168RJc.js.map +0 -1
- package/dist/Breadcrumb-CUyYu5Bi.js.map +0 -1
- package/dist/Button-D2JqBAq7.js.map +0 -1
- package/dist/Card-Bpc_ZlL4.js.map +0 -1
- package/dist/Checkbox-D9rafoKh.js.map +0 -1
- package/dist/CodeEditor-Y0iE-SwV.js.map +0 -1
- package/dist/ColorInput-D1nC0X6i.js.map +0 -1
- package/dist/Combobox-B1Kjoy5J.js.map +0 -1
- package/dist/Command-BuOA3V18.js.map +0 -1
- package/dist/DateInput-BlKkequE.js.map +0 -1
- package/dist/DateRangeInput-DOxJHw8V.js.map +0 -1
- package/dist/DateRangePicker-CXpXPMoh.js.map +0 -1
- package/dist/DiagramSource-jTwmmi9g.js +0 -11
- package/dist/DiagramSource-jTwmmi9g.js.map +0 -1
- package/dist/DropdownMenu-DtRYcKEx.js.map +0 -1
- package/dist/FileUpload-D6vPG3WB.js.map +0 -1
- package/dist/FullScreenModal-CUuAakh3.js.map +0 -1
- package/dist/HoverCard-Cy6nhg4u.js +0 -31
- package/dist/HoverCard-Cy6nhg4u.js.map +0 -1
- package/dist/InlineEdit-DSMIEUUa.js.map +0 -1
- package/dist/InputGroup-Dm014ruw.js.map +0 -1
- package/dist/Kbd-Du93F3o4.js.map +0 -1
- package/dist/MermaidDiagram-D2ThT8Q-.js +0 -302
- package/dist/MermaidDiagram-D2ThT8Q-.js.map +0 -1
- package/dist/Modal-DQIauzar.js.map +0 -1
- package/dist/Popover-BU7nGOv-.js.map +0 -1
- package/dist/RadioGroup-C2vk5acr.js.map +0 -1
- package/dist/SearchInput-BnU6YHgT.js.map +0 -1
- package/dist/Select-CjQgU_6K.js.map +0 -1
- package/dist/Sheet-utw4_rUa.js.map +0 -1
- package/dist/Sidebar-CKaxOPwY.js.map +0 -1
- package/dist/Slider-Rcc2qVct.js.map +0 -1
- package/dist/Stepper-BBPembeK.js.map +0 -1
- package/dist/Switch-Dw4tvQls.js +0 -201
- package/dist/Switch-Dw4tvQls.js.map +0 -1
- package/dist/Table-CgSC-fSo.js.map +0 -1
- package/dist/TextInput-B5TDDOty.js.map +0 -1
- package/dist/ThemeProvider-Dt9b67sW.js.map +0 -1
- package/dist/ZoomableSvg-D8sXKpoV.js.map +0 -1
- package/dist/context-U293r3v-.js +0 -29
- package/dist/context-U293r3v-.js.map +0 -1
- package/dist/defaults-i_xG2F_1.js +0 -32
- package/dist/defaults-i_xG2F_1.js.map +0 -1
- package/dist/styles-BDA5rQz3.js +0 -127
- package/dist/styles-BDA5rQz3.js.map +0 -1
- package/dist/styles-YQdM7G8c.js +0 -159
- package/dist/styles-YQdM7G8c.js.map +0 -1
- package/dist/svgTransforms-Dw2hRA-i.js +0 -51
- package/dist/svgTransforms-Dw2hRA-i.js.map +0 -1
- package/dist/themeTokens-7DEab0kp.js +0 -31
- package/dist/themeTokens-7DEab0kp.js.map +0 -1
- package/dist/toast-D6Z6MOB5.js.map +0 -1
- package/dist/useColorSchemeState-Cw4MCXUs.js.map +0 -1
- package/dist/useThemeAttributes-B199Regy.js.map +0 -1
- package/dist/utils-p6tjltbX.js.map +0 -1
- package/dist/vegaTheme-VQMWTlBw.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
|
+
**`Modal.Content` is centred by default.** Pass `align="top"` when the content changes height while in use (fields appear or drop as the user picks), so the modal stops re-centring and moving the field under the pointer. The legacy brand ignores it: its modals are always top-anchored.
|
|
83
|
+
|
|
82
84
|
**Filters in a menu are menu items:** `DropdownMenu.RadioItem indicator="check"` for one value, `DropdownMenu.CheckboxItem indicator="checkbox"` for several, both `indicatorAlign="end"`. Never `RadioGroup` or `Checkbox` in a `DropdownMenu` or `Popover`.
|
|
83
85
|
|
|
84
86
|
### Inputs
|
|
@@ -236,12 +238,12 @@ Vertical rhythm: prefer `tw:gap-*` on a flex column parent over `tw:mt-*` on chi
|
|
|
236
238
|
|
|
237
239
|
### Navigation / flow
|
|
238
240
|
|
|
239
|
-
| Use | When
|
|
240
|
-
| ---------- |
|
|
241
|
-
| `Stepper` | Linear progress through an ordered, finite sequence (multi-step form / wizard / pipeline).
|
|
242
|
-
| `Tabs` | Switching between sibling views of the same context
|
|
243
|
-
| `Timeline` | Unordered chronological log of events
|
|
244
|
-
| `Progress` | Single percentage value of an in-flight task
|
|
241
|
+
| Use | When |
|
|
242
|
+
| ---------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
|
243
|
+
| `Stepper` | Linear progress through an ordered, finite sequence (multi-step form / wizard / pipeline). Set `onStepClick` for navigable flows |
|
|
244
|
+
| `Tabs` | Switching between sibling views of the same context |
|
|
245
|
+
| `Timeline` | Unordered chronological log of events |
|
|
246
|
+
| `Progress` | Single percentage value of an in-flight task |
|
|
245
247
|
|
|
246
248
|
**Never** use `Stepper` for branching navigation (use `Tabs`) or an unordered status list (use `Timeline`).
|
|
247
249
|
|
|
@@ -743,10 +745,12 @@ takes the node, and the chip lets it have the keyboard.
|
|
|
743
745
|
/>
|
|
744
746
|
```
|
|
745
747
|
|
|
746
|
-
- A query
|
|
748
|
+
- A query opens every group with a match, and a group with none disappears — so the group's row always stands for something the user can see. A fold made under a query lasts until the query changes.
|
|
747
749
|
- `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.
|
|
748
750
|
- Without `selectableGroups` / `groupToValue` a press on the row folds the group; with them, the chevron and `ArrowRight` / `ArrowLeft` do.
|
|
749
751
|
- 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.
|
|
752
|
+
- An item the user picked elsewhere and can't remove here (a table another mapping uses) is `itemToLocked`, not `itemToDisabled`: a locked row looks disabled but still takes the highlight, so `renderAside` describes it and its group still folds; a disabled row takes neither.
|
|
753
|
+
- `renderAside={(highlighted) => …}` adds an inspector beside the list about the last row the pointer or the arrow keys were on — `{ kind: 'item' }`, `{ kind: 'group' }` or `null` before any. A button in the popup hides it (`asideOpen` / `onAsideOpenChange` to persist that), and it stays hidden while the popup is under 40rem. Reach for it when a row needs more detail than fits on it.
|
|
750
754
|
|
|
751
755
|
**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.
|
|
752
756
|
|
|
@@ -794,9 +798,11 @@ An **opacity modifier composites over `transparent`, not over the element's own
|
|
|
794
798
|
|
|
795
799
|
A tint also cannot carry a **state change** on a light surface — a brand-primary tint stays within ~1.5:1 of the surface at any opacity that still reads as a tint. Step the border for that, and keep the roles apart: hover steps the chrome border (`border-input` → `border-muted-foreground`), `focus-visible` owns the brand border.
|
|
796
800
|
|
|
797
|
-
**Status — themeable
|
|
801
|
+
**Status — themeable, with AA-legible defaults.** The four semantic states — `success`, `warning`, `info`, and `destructive` (used for "error") — are brand-overridable tokens, not fixed scales. Alert `variant`, `HelpBlock` / field-error state, `ErrorState`, and `Stepper` status read them, so a brand recolours every status surface at once. **Rule:** consume the token as **tint + text/icon** — `tw:bg-<role>/10` for the surface, `tw:text-<role>` / `tw:border-<role>/25` for the mark. The default token values ship dark enough to be AA (≥4.5:1) as text/icon on their own tint, in light **and** dark mode — a brand overriding them should preserve that. Avoid solid fills with a white foreground (`tw:bg-<role>` + white): the token flips light in dark mode, so white-on-token fails there. A brand _can_ recolour "error" away from red — that is now allowed; the accessible-on-tint contract is what must hold, not the hue.
|
|
802
|
+
|
|
803
|
+
**Status pastels.** Each state also has a pastel pair — `tw:bg-<role>-subtle` + `tw:text-<role>-subtle-foreground`, for `success` / `warning` / `info` / `destructive` and `neutral`. Unset, the fill is the status token at 10% and the text is the token 30% towards `foreground` (`neutral`: `muted` + `muted-foreground`), so the pair follows the brand and dark mode with no work and stays AA at badge size. A brand or app that wants its own pastel sets `--<role>-subtle` / `--<role>-subtle-foreground` to any CSS colour. `Badge color="<role>-subtle"` reads them.
|
|
798
804
|
|
|
799
|
-
**Decorative — stays fixed across brands.** The non-semantic palette that encodes category rather than state: `Badge`
|
|
805
|
+
**Decorative — stays fixed across brands.** The non-semantic palette that encodes category rather than state: `Badge` `color` hues (`purple`, `cyan`, `teal`, `blue`, …) — a state badge takes a status `color` (`success`, `warning-subtle`, …) instead — chart colours, decorative tag palette. **Rule:** keep using primitive scales (`purple-500`, `cyan-500`, …). These are an identity/category contract with the consumer and do not re-skin.
|
|
800
806
|
|
|
801
807
|
**Heuristic.** A `variant` / `status` prop encoding one of the four states → **status token**. A `color` prop picking an arbitrary hue for categorisation → **decorative, fixed scale**. Everything else → **chrome, semantic token**.
|
|
802
808
|
|
|
@@ -829,20 +835,6 @@ import { keboola } from '@keboola/brand-registry';
|
|
|
829
835
|
|
|
830
836
|
Read the resolved values with `useTheme()` (`brandId`, `currentTheme`, `themes`, `scheme`, `resolvedScheme`, and the setters). With no provider above it, it answers the defaults rather than throwing.
|
|
831
837
|
|
|
832
|
-
### The argo/legacy switch is separate from the brand
|
|
833
|
-
|
|
834
|
-
`ThemeProvider` does **not** decide whether a subtree renders the argo design language — that is a kbc-ui migration concern, so it rides its own context:
|
|
835
|
-
|
|
836
|
-
```tsx
|
|
837
|
-
import { ArgoDesignContext, useArgoDesign } from '@keboola/design';
|
|
838
|
-
|
|
839
|
-
<ArgoDesignContext value={false}>{/* legacy chrome for this subtree */}</ArgoDesignContext>;
|
|
840
|
-
```
|
|
841
|
-
|
|
842
|
-
`ArgoDesignContext` defaults to `true` (argo — the modern default; legacy chrome is the exception), so an app that never provides it gets argo everywhere. kbc-ui provides `false` for its legacy brands and overrides per subtree as pages are migrated; components read it with `useArgoDesign()`. It is **temporary** and will be deleted once every kbc-ui surface is migrated — don't build on it in a new app.
|
|
843
|
-
|
|
844
|
-
Because the value is read from the nearest provider, a nested override scopes to that subtree. The build ships a single instance of both contexts across every subpath entry, so a provider mounted from the root barrel is visible to components that ship in `@keboola/design/rjsf`, `/markdown-editor`, `/mermaid` and `/editors` too.
|
|
845
|
-
|
|
846
838
|
Define a custom brand with `@keboola/brand-registry`'s `brandSchema` (Zod) and pass it in `brands`; or override the `--color-*` / `--radius-*` CSS variables directly on `:root`.
|
|
847
839
|
|
|
848
840
|
**Interaction states and surface corners** are part of the same theme. Every one is optional and, unset, keeps the look the package ships:
|
|
@@ -865,7 +857,7 @@ Define a custom brand with `@keboola/brand-registry`'s `brandSchema` (Zod) and p
|
|
|
865
857
|
- The state colours take **any CSS colour**, not the `R G B` channels the other colours use, so a wash can be translucent.
|
|
866
858
|
- Each scheme falls back on its own: a value set in `colors` does not reach dark mode. Set `colorsDark` too.
|
|
867
859
|
- Set `hover` and `hoverForeground` together, and `selected` and `selectedForeground`. Several components change the label on hover, and an unset foreground keeps the `accent-foreground` blue over whatever wash you chose.
|
|
868
|
-
- Unset, a few components keep a hover or selected look of their own rather than `accent`:
|
|
860
|
+
- Unset, a few components keep a hover or selected look of their own rather than `accent`: `DropdownMenu` (a `primary` tint), `Table` rows and `SectionNav` (`muted`). Once a theme sets the token, they follow it like the rest.
|
|
869
861
|
- `Sidebar` and `Navbar` sit on their own surface, so they take their own pair: `sidebarHover` for a hovered or open item, `sidebarSelected` for the current page. Set them inside `colors.sidebar` (and `colorsDark.sidebar`).
|
|
870
862
|
- The fallbacks resolve where each class is used, so a brand that only re-points `accent` still moves hover and selected with it.
|
|
871
863
|
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,199 @@
|
|
|
1
1
|
# @keboola/design
|
|
2
2
|
|
|
3
|
+
## 15.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- Text inputs, `Select` and `DateRangePicker` take no `variant` or `sizing` props: every field and trigger is 36 px tall in the same chrome.
|
|
8
|
+
- `InputGroup`, `TextInput`, `SearchInput`, `SearchInputWithNavigation`, `PasswordInput`, `NumberInput`, `Textarea`, `AutoSaveTextarea`, `DateInput`, `TimeInput`, `ColorInput`, `DateRangeInput`, `ChipEditor`, `Combobox`, `MultiCombobox`, the `FormGroup.*` inputs and the `field.*` connectors drop `variant` and `sizing`.
|
|
9
|
+
- `Select` and `Select.Trigger` drop `variant` and `sizing`; `inline` renders the text-like trigger with no field chrome.
|
|
10
|
+
- `DateRangePicker` drops `variant`.
|
|
11
|
+
|
|
12
|
+
- Every component renders one design language — the one `useArgoDesign()` used to opt into — whatever the brand or context.
|
|
13
|
+
- `Button`'s `argoVariants` export is `buttonVariants`.
|
|
14
|
+
- `Tooltip` drops `chrome` and `Tooltip.Content` drops `argo`; tooltips are the light popover chrome.
|
|
15
|
+
- `Command` drops `variant`; `compact` keeps the dense search row and list padding for a menu inside a popover.
|
|
16
|
+
- `Switch` drops `size`.
|
|
17
|
+
- The `data-argo`, `data-design` and argo `data-variant` attributes are gone from Modal, AlertModal, Sheet, Toast, HoverCard, Tooltip, DropdownMenu, Command, Alert, Card and ErrorState.
|
|
18
|
+
- `ArgoDesignContext` and `useArgoDesign` are removed.
|
|
19
|
+
- `AlertModal`'s icon sits on its status token's tint (`info`, `warning`, `destructive`, `success`), so it follows the brand and dark mode.
|
|
20
|
+
- Kai's `Button variant="kai"` and `Toggle variant="ai-vivid"` take their label from `primary-foreground`; in dark their gradients are lighter, so a near-black label stays AA across the whole fill.
|
|
21
|
+
- Text, borders and surfaces in the form, editor, sidebar and input blocks use theme tokens, and `ModalIcon`, `Skeleton` and `Toggle variant="ai"` carry dark variants of their tints, so they stay legible in dark mode.
|
|
22
|
+
|
|
23
|
+
- `kbcUi` (`kbc-ui`) is kbc-ui's brand, in place of `keboolaLegacySidebar` (`keboola-legacy-sidebar`).
|
|
24
|
+
- Light: the colours `keboola-legacy-sidebar` had — brand-blue `31 143 255`, bright status hues, a white sidebar.
|
|
25
|
+
- Dark: the `keboola` dark palette, pinned in full and tuned to WCAG AA — near-black labels on the bright primary and status fills, an input border at 3:1.
|
|
26
|
+
- Typography and radii: the `keboola` brand's.
|
|
27
|
+
- `@keboola/design` re-exports it under the same name.
|
|
28
|
+
|
|
29
|
+
### Patch Changes
|
|
30
|
+
|
|
31
|
+
- A pressed `Toggle variant="ai-vivid"` keeps its navy gradient in dark mode, so its white label stays legible.
|
|
32
|
+
|
|
33
|
+
- Updated dependencies:
|
|
34
|
+
- @keboola/brand-registry@3.0.0
|
|
35
|
+
|
|
36
|
+
## 14.0.0
|
|
37
|
+
|
|
38
|
+
### Major Changes
|
|
39
|
+
|
|
40
|
+
- `ToolCallApproval` v2 — redesigned around what an agent chat's approval card needs. It had no consumers, so the old API is replaced outright.
|
|
41
|
+
- Removed: `enableShortcuts` (Enter approve / Escape reject) and the `actions` override; `toolName` is now optional.
|
|
42
|
+
- Actions: `approveLabel` / `rejectLabel`, `approveVariant` (`'primary' | 'danger'`), an optional `extraAction` (e.g. "Always allow"), `pendingAction` (that button spins, every action disables), `isDisabled`.
|
|
43
|
+
- Header: `eyebrow` slot, optional `toolName`, `title`.
|
|
44
|
+
- Terminal states: `approved`, `rejected`, `expired`, `timed-out`, `cancelled`, `unattended`, with `statusLabel` / `statusMessage`, `resolvedBy` / `resolvedAt`, and `density="record"` for a one-line resolved record.
|
|
45
|
+
- Body: `children`, `notices` (warning / destructive / info rows), `aside` (beside the detail, stacked in a narrow container), `error`.
|
|
46
|
+
- Keyboard: `shortcutKey` (`'enter' | 'mod-enter' | 'none'`) approves from anywhere and shows the key on the button; `isShortcutHintOnly` shows it for an app that owns the shortcut.
|
|
47
|
+
- Stable test ids: `tool-call-approval`, `tool-approve-button`, `tool-decline-button`, `tool-extra-action-button`.
|
|
48
|
+
|
|
49
|
+
### Minor Changes
|
|
50
|
+
|
|
51
|
+
- `AnswerSources` and `SourceChip`: the provenance row under an answer. Chips carry a `verified` / `unverified` / `neutral` verdict and render as a link, button or label; the row collapses past six chips, summarises unverified ones once, states when none were declared and takes a `footnote` slot.
|
|
52
|
+
|
|
53
|
+
- `ChatNotice`: a transcript notice row over `Alert` with `tone` (`error` / `warn` / `info`), an `action` slot, collapsible "Technical details" and an optional `retryAfter` countdown.
|
|
54
|
+
|
|
55
|
+
- AI Kit composer chips: `AttachmentChip` (uploading / ready / error file chip with remove), `ContextChip` (quoted excerpt with "Show all" and images), `ModeChip` (removable animated mode pill) and `JumpToLatest` (scroll-to-latest button that pulses while the agent is working).
|
|
56
|
+
|
|
57
|
+
- `SuggestedPrompt` takes `description` (a secondary line under the label), `trailing` (content pinned to the row's end, e.g. a badge) and `aria-label`. Without them it renders as before.
|
|
58
|
+
|
|
59
|
+
- `PlanApproval` and `AnswerSummary` take an `expired` state for a card closed with no decision.
|
|
60
|
+
- `PlanApproval`: `status="expired"` (orange `Expired` pill, no actions), plus `statusLabel` to rename the pill and `statusMessage` shown under the title.
|
|
61
|
+
- `AnswerSummary`: `variant="expired"` (header ends `Expired`), plus `statusLabel` and a `statusMessage` shown first once expanded.
|
|
62
|
+
|
|
63
|
+
- `PromptInput` takes `allowSendWhileBusy`: with it, a non-empty box sends while the conversation is `streaming` or `submitted` instead of refusing the keystroke, and Stop moves to a control of its own so cancelling never means emptying the box first. Off by default, so every existing composer behaves exactly as before.
|
|
64
|
+
|
|
65
|
+
Kai's composer turns that on. A message typed while Kai is working is queued and shown waiting rather than silently dropped, and a message typed under an open question answers it.
|
|
66
|
+
|
|
67
|
+
- `AnswerActions` takes opt-in `onDownComment` (+ `commentPlaceholder`), a one-line comment input after a thumbs-down, and `onRegenerate` (+ `regenerateLabel`), an "Ask again" button; both are off by default
|
|
68
|
+
|
|
69
|
+
- `FileDownloadChip` takes opt-in `onPreview` (split chip) and `actions`; new `FileGallery` block for image thumbnails (lazy, host-owned URLs and loading, capped with "+N more"). The default chip renders as before
|
|
70
|
+
|
|
71
|
+
- `MessageBubble` takes opt-in `timestamp="visible"`, `quote`, `status` + `onRetry`, `author`, `collapseAfterPx` and `avatar`; without them it renders as before
|
|
72
|
+
|
|
73
|
+
- `Modal.Content` takes `align="top"`: a new-design modal pinned to the top instead of centred, for a form whose height changes while it is in use. The legacy modal is always top-anchored.
|
|
74
|
+
|
|
75
|
+
- `MultiCombobox` takes `renderAside`, a pane beside the list that describes the highlighted row, a group's own row included.
|
|
76
|
+
|
|
77
|
+
A combobox row's label fills the row, so content inside it can align to the row's end.
|
|
78
|
+
|
|
79
|
+
`MultiCombobox` takes `groupAppearance="banded"`, which puts each group, its row and open items, on a white card over a grey list.
|
|
80
|
+
|
|
81
|
+
A selectable group row reads checked or mixed from its locked items that are already selected.
|
|
82
|
+
|
|
83
|
+
`MultiCombobox` takes `collapseSelectedGroups`: each time the popup opens, a group whose items are all selected starts folded. A disabled group row still folds from its chevron.
|
|
84
|
+
|
|
85
|
+
`MultiCombobox` takes `asideOpen` and `onAsideOpenChange`: a button with a tooltip in the popup's bottom-right corner hides and shows the `renderAside` inspector. It is a grid column going from `0fr` to `1fr`, so the list narrows beside it rather than being covered, it keeps describing the last highlighted row until the popup closes, and it stays hidden, button included, while the popup is under 40rem wide.
|
|
86
|
+
|
|
87
|
+
A collapsible group's items fade and slide in as it unfolds and out as it folds, except under reduced motion. Banded rows are square inside their card, the first and last taking its corners, and enabled rows show a pointer.
|
|
88
|
+
|
|
89
|
+
`MultiCombobox` takes `defaultOpen` and `onOpenChange`, for a picker shown on demand with its list already open.
|
|
90
|
+
|
|
91
|
+
`MultiCombobox` takes `anchor`: with it there is no field, and the popup opens against that element with its search at the top. A banded popup is grey throughout, inspector included, with 8px of real space between group cards.
|
|
92
|
+
|
|
93
|
+
`MultiCombobox` takes `query`: search text typed elsewhere. With `anchor`, the popup then has no search of its own, and the host forwards the list keys to its hidden combobox input.
|
|
94
|
+
|
|
95
|
+
`Breadcrumb.Dropdown` takes `panelClassName`, for a panel background its search row shares with the list; the search row carries `data-slot="breadcrumb-dropdown-search"`.
|
|
96
|
+
|
|
97
|
+
A collapsible group's chevron, in `Combobox` / `MultiCombobox` and in `Breadcrumb.Dropdown.Group`, has a tooltip, and Cmd-click (Ctrl elsewhere) expands or collapses every group at once.
|
|
98
|
+
|
|
99
|
+
When a combobox group folds or unfolds, including all at once, the groups under it slide to their new place, and a windowed list keeps each row's measured height across a fold.
|
|
100
|
+
|
|
101
|
+
A query opens every collapsible group with a match, in `Combobox` / `MultiCombobox` and `Breadcrumb.Dropdown.Group`; a group folded under it stays folded until the query changes.
|
|
102
|
+
|
|
103
|
+
`MultiCombobox` takes `itemToLocked`: a selected item the user cannot remove looks disabled but still takes the highlight, so `renderAside` describes it and its group still folds; a group of only locked items locks its row.
|
|
104
|
+
|
|
105
|
+
An open `Combobox` / `MultiCombobox` popup marks `<body>` with `data-combobox-open`, counted across popups, so an app can lift the tooltips of the rows it lists. Combobox row labels carry `data-slot="combobox-item-label"`.
|
|
106
|
+
|
|
107
|
+
- `PromptInput` takes `canSubmitEmpty`, so a composer whose attachments are the message can send with no text. Off by default.
|
|
108
|
+
|
|
109
|
+
- `PromptInput` takes `blurOnEscape`, an `onKeyDown` that runs after its own key handling, `onPasteFiles` for files on the clipboard, and `busy` to hold the composer read-only while keeping focus. All opt-in.
|
|
110
|
+
|
|
111
|
+
- `PromptInput`'s `/` menu picks the highlighted command on Tab, and opens with an empty or loading row (`commandsLoading`, `commandsEmptyText`) when `commands` is an empty list. New opt-in `slashTrigger="typed"` opens it only for a `/` typed into an empty composer.
|
|
112
|
+
|
|
113
|
+
- Interaction-state and surface-corner tokens, so a theme can tell a hovered item from a selected one and round cards, menus and dialogs apart from controls. Unset, every token resolves to the value it replaced, so nothing changes until a theme sets one.
|
|
114
|
+
- `tw:bg-hover` / `tw:text-hover-foreground` (`--hover`, `--hover-foreground`) paint hover and keyboard highlight in Select, Combobox, Command, Breadcrumb, RadioGroup, Toggle, Calendar, DiffView, FileUpload, the markdown toolbar and AIKit. Unset: `accent` / `accent-foreground`. Argo `DropdownMenu` items, `Table` rows and `SectionNav` follow `--hover` too and, unset, keep their own `primary` / `muted` tint.
|
|
115
|
+
- `tw:bg-selected` / `tw:text-selected-foreground` (`--selected`, `--selected-foreground`) paint selected, checked and current in Table, Pagination, a checked `FieldBox`, the Calendar range, the active Breadcrumb item, SectionNav and a checked Command item. Unset: `accent` / `accent-foreground`. A checked argo `DropdownMenu` item follows `--selected` and, unset, keeps its `primary` tint.
|
|
116
|
+
- `tw:bg-pressed` (`--pressed`) is available for a pressed wash; no component paints it yet. Unset: `accent` a step towards its foreground.
|
|
117
|
+
- `tw:bg-scrim` (`--scrim`) is the `Modal`, `AlertModal` and `Sheet` backdrop. Unset: black at 50%.
|
|
118
|
+
- `tw:opacity-disabled` (`--disabled-opacity`) replaces every disabled `opacity-50`, `FieldBox` labels and `InputGroup` included. Unset: `0.5`. Controls disabled at 30%, 40% or 60% keep their own value.
|
|
119
|
+
- `--radius-card` rounds `Card`, `DashboardHero` and `tw:rounded-card`; unset, `Card` keeps `--radius-lg` and `rounded-card` keeps 10px. `--radius-popover` (`tw:rounded-popover`) rounds argo menus, popovers, hover cards and tooltips (unset 1rem). `--radius-modal` (`tw:rounded-modal`) rounds argo `Modal` and `AlertModal` (unset 1.5rem). `--radius-sheet` (`tw:rounded-sheet`) rounds the inner edge of an argo `Sheet` and `--radius-toast` (`tw:rounded-toast`) a `Toast`; unset, both keep `--radius-lg`.
|
|
120
|
+
- `tw:bg-sidebar-hover` / `tw:bg-sidebar-selected` (+ `-foreground`) split the `Sidebar` and `Navbar` hover from the current page, which both painted `sidebar-accent`. Unset, both are `sidebar-accent`; a current item keeps its selected fill while hovered.
|
|
121
|
+
- `ThemeProvider` emits all of them from a brand's `colors` / `colorsDark`, `radii` and `opacity`, and `BrandEditor` edits them.
|
|
122
|
+
|
|
123
|
+
- `InlineStepLabel` takes opt-in `meta`, and `detail` + `defaultExpanded` for a collapsible per-row detail; `InlineStepGroup` takes an opt-in `footer`. Both render as before without them
|
|
124
|
+
|
|
125
|
+
- `Tooltip.Title` heads a rich tooltip, and every floating overlay carries its own layer.
|
|
126
|
+
- `Tooltip.Title` is a small uppercase heading in the tooltip's text colour.
|
|
127
|
+
- `Tooltip` content spaces a nested `hr` and drops the last paragraph's bottom margin; on the legacy chrome a link takes the tooltip's text colour.
|
|
128
|
+
- `Tooltip` sits above `Modal` and every popup (1060); `HoverCard` sits with `Modal` (1051); a `DropdownMenu` submenu sits with its menu (1055).
|
|
129
|
+
- `Combobox` leaves `<body>` untouched while its popup is open.
|
|
130
|
+
|
|
131
|
+
- `Markdown` gains opt-in streaming and code features; every default renders as before:
|
|
132
|
+
- `splitSealedBlocks(text)` and `withholdOpenTail(text, { diagram, tableHead })` — pure helpers for streaming an answer through `Markdown.Root` / memoised `Markdown.Block`s.
|
|
133
|
+
- `highlight` — colours fenced SQL, Python, JS/TS, JSON, shell and YAML through a lazily loaded highlighter.
|
|
134
|
+
- `sortable` (also on `MarkdownTable`) — header presses sort rows, numeric-aware, with `aria-sort`.
|
|
135
|
+
- `diagramActions` and `diagramDownload` — extra diagram toolbar controls and a built-in "Download SVG" action; `DiagramBlock` forwards `renderActions`.
|
|
136
|
+
- `ChatInlineIcon` also draws Lucide names (`icon:info`, `icon:trash-2`, …).
|
|
137
|
+
|
|
138
|
+
- `Markdown` takes an opt-in `allowSvgFences`: an `svg fence, or an `xml / ```html fence whose body is a single SVG document, renders as a responsive chart instead of code. The SVG is sanitized with DOMPurify's SVG profile and loses scripts, event handlers, `foreignObject`, SMIL animation, `<style>` elements and every non-`#` reference. Raw inline HTML stays escaped, and the default is unchanged.
|
|
139
|
+
|
|
140
|
+
`ZoomableSvg` takes an opt-in `allowUse` to keep `<use>` (matplotlib draws every glyph with it) for markup whose `href`s are already limited to `#` references.
|
|
141
|
+
|
|
142
|
+
- `PromptInput` takes `history`: the prompts already sent, oldest first. ↑ with the caret at the start of the text recalls them, newest first; ↓ steps back to the draft. Open `/` and `@` menus keep the arrows.
|
|
143
|
+
|
|
144
|
+
- `Question` takes what an agent chat's question card needs. Additive; existing callers are unchanged.
|
|
145
|
+
- `isSubmitDisabled` keeps the answer from being sent, by click or ⌘/Ctrl+Enter.
|
|
146
|
+
- `isSubmitting` spins Submit and disables Skip.
|
|
147
|
+
- `error` shows why the last send failed, above the footer.
|
|
148
|
+
- `customAnswerMaxLength` caps the "Other" answer.
|
|
149
|
+
- An option's `badge` (e.g. `Recommended`) follows its label.
|
|
150
|
+
- `skipTooltip` replaces the Skip button's `Space` hint; `null` drops it.
|
|
151
|
+
|
|
152
|
+
- `Table.Header` puts its row on the card surface, and `Table.SkeletonRows` draws placeholder rows in a table's own columns while its rows load.
|
|
153
|
+
- The header is `bg-card` with an `h-11` row and a border under it; `withShadow` and `className` work as before.
|
|
154
|
+
- The surface sits on `thead`, so `className="tw:bg-table-header"` (the former default tint) or any other `bg-*` replaces it at rest and on hover.
|
|
155
|
+
- `Table.SkeletonRows` takes `columns`, `noun` and `rows` (5 by default); the first row announces `Loading {noun}` to screen readers.
|
|
156
|
+
- Each column takes the real cell's `className` and `colSpan` and draws a `text` line, a `name` (icon, name and description lines) or nothing (`empty`).
|
|
157
|
+
- A width class can be a list, cycled over the rows; the name line varies in width from row to row unless given one.
|
|
158
|
+
|
|
159
|
+
- `MermaidDiagram` renders with Pele, a dependency-free Mermaid renderer, in place of `mermaid` and `beautiful-mermaid`.
|
|
160
|
+
- Every Mermaid 12.1 diagram type; each type's code loads on first use, after which a diagram renders synchronously.
|
|
161
|
+
- Colours and font come from the DS tokens for the active scheme and are written into the SVG, so an exported SVG or PNG keeps them.
|
|
162
|
+
- `lucide:<name>` icons draw from the bundled Lucide pack; other icon packs draw no icon.
|
|
163
|
+
- A diagram cut off mid-stream shows the skeleton, and its source after 2 s without more input; invalid syntax shows the source.
|
|
164
|
+
- Layout and look follow Pele, not Mermaid.
|
|
165
|
+
|
|
166
|
+
- `Table` puts its body on the card surface, the same `bg-card` as `Table.Header`.
|
|
167
|
+
- The fill sits on `<table>`, so a caller's `bg-*` in `className` replaces it.
|
|
168
|
+
- Row hover and selection tints draw over it as before.
|
|
169
|
+
|
|
170
|
+
- `RjsfSchemaEditor` draws a `format: 'checkbox'` array as a group of DS `Checkbox`es.
|
|
171
|
+
- Each option toggles its value in the array; `readOnly` and `options.enumDisabled` disable them.
|
|
172
|
+
- `options.inline` lays the options out in a wrapping row.
|
|
173
|
+
|
|
174
|
+
- `RjsfSchemaEditor` renders an array of enum values (`uniqueItems` + `items.enum`, no `format: 'checkbox'`) as a `MultiCombobox`.
|
|
175
|
+
- The default `async-multi-select` widget offers the `items.enum` options, labelled by `items.options.enum_titles`, and writes the selection back as an array of the typed enum values.
|
|
176
|
+
- A stored value outside `items.enum` shows as a chip labelled by the value and survives an edit.
|
|
177
|
+
- `readOnly` and `ui:disabled` disable it; options in `ui:enumDisabled` cannot be picked.
|
|
178
|
+
- It does not load `async` options, create `tags` / `creatable` values or read `enumSource`; a host widget passed under `async-multi-select` replaces it for that.
|
|
179
|
+
|
|
180
|
+
### Patch Changes
|
|
181
|
+
|
|
182
|
+
- `MultiCombobox`: while nothing matches, the inspector and its button go at once and the list takes the whole width, so the inspector never describes a row the list no longer shows.
|
|
183
|
+
|
|
184
|
+
- `MultiCombobox`: with the inspector hidden, the list ends above the inspector button, so the button never covers a row at any scroll position.
|
|
185
|
+
|
|
186
|
+
- `Markdown`'s `allowSvgFences` keeps only an allowlist of paint and text declarations in a fenced chart's `style` attributes, so `image-set()` can no longer load a URL and `position: fixed` can no longer lay an overlay over the page.
|
|
187
|
+
|
|
188
|
+
- `Markdown`'s `allowSvgFences` caps the nodes a fence's `<use>` elements clone (20,000), not their count, so a few `<use>` aimed at a large group can no longer multiply into millions of rendered nodes.
|
|
189
|
+
|
|
190
|
+
- `Table.SkeletonRows` takes `gapClassName` on a `name` column, the gap between its icon and lines (`tw:gap-3.5` by default), so a table's placeholder name starts where its real name does.
|
|
191
|
+
|
|
192
|
+
- `Command.Item`'s keyboard highlight is the only row fill: a `checked` row shows a trailing check (or its checkbox / radio indicator), and rows no longer cross-fade on ↑/↓. The project switcher and Kai's chat history mark the current row this way (UT-5894)
|
|
193
|
+
|
|
194
|
+
- Updated dependencies:
|
|
195
|
+
- @keboola/brand-registry@2.1.0
|
|
196
|
+
|
|
3
197
|
## 13.2.0
|
|
4
198
|
|
|
5
199
|
### Minor Changes
|