@keboola/design 4.1.2 → 4.2.1

package/AGENTS.md

@@ -130,22 +130,29 @@ This file answers **which** component to use; [`COMPONENT-API.md`](./COMPONENT-A
 
 **No** `Stack` / `Flex` / `Box` component exists, by design — shadcn doesn't ship them, and adding wrappers creates a third way to do layout. Use Tailwind utility classes directly.
 
-| Use              | When                                                                     |
-| ---------------- | ------------------------------------------------------------------------ |
-| Tailwind classes | All ad-hoc layout: `tw-flex tw-flex-col tw-gap-4`, `tw-grid …`, `tw-p-6` |
-| `AppShell`       | App-root shell that follows the active brand (sidebar vs top-nav)        |
-| `PageLayout`     | Top-level page shape: header, tabs, toolbar, content, footer             |
-| `PageToolbar`    | Index-page toolbar: search + filters / sort / actions / view + chips row |
-| `Card`           | Semantic content surface with header / content / footer slots            |
-| `Sidebar`        | App-shell left navigation rail (host inside `AppShell.Sidebar`)          |
+| Use              | When                                                                                                                         |
+| ---------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| Tailwind classes | All ad-hoc layout: `tw-flex tw-flex-col tw-gap-4`, `tw-grid …`, `tw-p-6`                                                     |
+| `AppShell`       | App-root shell that follows the active brand (sidebar vs top-nav)                                                            |
+| `PageLayout`     | Top-level page shape: header, tabs, toolbar, content, footer                                                                 |
+| `PageToolbar`    | Index-page toolbar: search + filters / sort / actions / view + chips row                                                     |
+| `Card`           | Semantic content surface with header / content / footer slots                                                                |
+| `Sidebar`        | App-shell left navigation rail (host inside `AppShell.Sidebar`)                                                              |
+| `Navbar`         | Top navigation bar (host inside `AppShell.Header`) — brand mark, primary nav, search / account. Pairs with the top-nav shell |
 
 Vertical rhythm: prefer `tw-gap-*` on a flex column parent over `tw-mt-*` on children — avoids margin-collapse. Page-level max width: use `PageLayout`'s `maxWidth` prop (`narrow` / `default` / `wide` / `full`), not `tw-max-w-[…]` literals.
 
-**Page gutter is consumer-owned.** `AppShell.Main` and `PageLayout` impose **no** page gutter by design — content renders flush against the sidebar/header unless you add one. Put the padding on the content region yourself (the `AppShell` story wraps Main content in `tw-p-6`):
+**Page gutter: `AppShell.Main` owns it, with an opinionated default.** `AppShell.Main` applies a default page gutter (`tw-p-6`) so content looks right out of the box. Because `cn` is tailwind-merge, override it from the call site when the app owns its own gutter — e.g. `className="tw-p-0"` (kbc-ui does this; it centralizes the gutter on its own shell wrapper). `PageLayout` still adds **no** gutter of its own, so header and content align inside whatever gutter `AppShell.Main` provides.
 
 ```tsx
+// Default gutter — nothing to add:
 <AppShell.Main>
-  <div className="tw-flex tw-flex-col tw-gap-4 tw-px-6 tw-py-6">{/* page content */}</div>
+  <PageLayout>{/* header + content share the default gutter */}</PageLayout>
+</AppShell.Main>
+
+// Own your gutter — opt out and add your own:
+<AppShell.Main className="tw-p-0">
+  <div className="tw-px-8 tw-py-6">{/* custom gutter */}</div>
 </AppShell.Main>
 ```
 

package/dist/editors.cjs

@@ -363,9 +363,9 @@ var variants = classVarianceAuthority.cva(
     "focus-visible:tw-outline",
     "focus-visible:tw-outline-1",
     "focus-visible:-tw-outline-offset-1",
-    "focus-visible:tw-outline-secondary-500",
+    "focus-visible:tw-outline-ring",
     "focus-visible:tw-ring-4",
-    "focus-visible:tw-ring-secondary-200",
+    "focus-visible:tw-ring-ring/30",
     // disabled
     "disabled:tw-opacity-40",
     "disabled:tw-cursor-not-allowed",