@keboola/design 11.3.0 → 11.5.0

package/COMPONENT-API.md

@@ -319,37 +319,44 @@ Source: `src/blocks/Form/connectors/MultiComboboxField.tsx`
 
 > Several values from a searchable list — state is `string[]`, never objects, so the form value stays what gets submitted. Project labels with `itemToLabel`; add `allowCreate` for an enum the user may extend. Imported by name from `@keboola/design`, composed inside `form.AppField` — NOT reachable as `field.MultiComboboxField`.
 
-| Prop                 | Type                                                                                                                                                                                                               | Required | Default | Description                                                                                                                                                                                                                                                                                                     |
-| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `action`             | `ReactNode`                                                                                                                                                                                                        | no       | —       | Optional node rendered at the trailing edge of the label row (opposite the label) — e.g. a "Forgot password?" link beside a Password label. Presentational placement only; it is a sibling of the `<Label>`, not part of the field's accessible name. Provide an interactive element (`ButtonInline` / `Link`). |
-| `allowClear`         | `boolean`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `allowCreate`        | `boolean`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `allowSelectAll`     | `boolean`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `aria-describedby`   | `string`                                                                                                                                                                                                           | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `className`          | `string`                                                                                                                                                                                                           | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `empty`              | `ReactNode`                                                                                                                                                                                                        | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `focusVariant`       | `"off" \| "on" \| "default" \| null`                                                                                                                                                                               | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `groupToLabel`       | `((group: Group<string>) => ReactNode)`                                                                                                                                                                            | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `help`               | `ReactNode`                                                                                                                                                                                                        | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `indicator`          | `Indicator`                                                                                                                                                                                                        | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `inputClassName`     | `string`                                                                                                                                                                                                           | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `items`              | `readonly (string \| Group<string>)[]`                                                                                                                                                                             | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `itemToChipColor`    | `((item: unknown) => "gray" \| "gray-darker" \| "gray-inverse" \| "green" \| "green-darker" \| "green-inverse" \| "blue" \| "blue-inverse" \| "red" \| "orange" \| "orange-inverse" \| "amber" \| ... 9 more ...)` | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `itemToChipLabel`    | `((item: unknown) => ReactNode)`                                                                                                                                                                                   | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `itemToDisabled`     | `((item: string) => boolean)`                                                                                                                                                                                      | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `itemToIcon`         | `((item: string) => ReactNode)`                                                                                                                                                                                    | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `itemToLabel`        | `((item: string) => ReactNode)`                                                                                                                                                                                    | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `itemToStringLabel`  | `((itemValue: string) => string)`                                                                                                                                                                                  | no       | —       | When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for display in the input. If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.                  |
-| `itemToStringValue`  | `((itemValue: string) => string)`                                                                                                                                                                                  | no       | —       | When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for form submission. If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.                       |
-| `label`              | `ReactNode`                                                                                                                                                                                                        | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `maxVisible`         | `number`                                                                                                                                                                                                           | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `queryToCreateLabel` | `((query: string) => ReactNode)`                                                                                                                                                                                   | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `queryToCreateValue` | `((query: string) => string)`                                                                                                                                                                                      | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `required`           | `boolean`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `requiredMark`       | `RequiredMark`                                                                                                                                                                                                     | no       | —       | Which marker to show beside the label — gated by `required` so it never lies: `'required'` renders `*` only when the field is `required`; `'optional'` renders `(optional)` only when it is not; `'hidden'` renders neither. Defaults to `'required'`.                                                          |
-| `sizing`             | `"small" \| "medium" \| "default" \| null`                                                                                                                                                                         | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `tooltip`            | `ReactNode`                                                                                                                                                                                                        | no       | —       |                                                                                                                                                                                                                                                                                                                 |
-| `variant`            | `"primary" \| "secondary" \| null`                                                                                                                                                                                 | no       | —       |                                                                                                                                                                                                                                                                                                                 |
+| Prop                  | Type                                                                                                                                                                                                              | Required | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `action`              | `ReactNode`                                                                                                                                                                                                       | no       | —       | Optional node rendered at the trailing edge of the label row (opposite the label) — e.g. a "Forgot password?" link beside a Password label. Presentational placement only; it is a sibling of the `<Label>`, not part of the field's accessible name. Provide an interactive element (`ButtonInline` / `Link`).                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `allowClear`          | `boolean`                                                                                                                                                                                                         | no       | —       | Offer a clear-all button once something is selected. Defaults to **`true`**. - `BaseCombobox.Clear` only mounts while chips exist, so an empty control renders identically either way. Individual chips stay removable regardless. - Pass `false` where emptying the whole selection must not be one click away.                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `allowCreate`         | `boolean`                                                                                                                                                                                                         | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `allowSelectAll`      | `boolean`                                                                                                                                                                                                         | no       | —       | Adds a "Select All" row that selects the whole item set. - The row is hidden while a query narrows the list — it never means "everything matching". - Selecting it while everything is already selected clears the selection.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `aria-describedby`    | `string`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `canCreate`           | `((query: string) => boolean)`                                                                                                                                                                                    | no       | —       | Gate on each value the entry stands for, for `allowCreate`. - Returning `false` drops that value, so an entry left with none hides the create row and the empty state shows instead. - Only called for a value that matches no item and nothing already selected — one naming an item is selected rather than minted, so its format is not this gate's business. - Reach for it when a free-form value has a format (a column name, an email address).                                                                                                                                                                                                                                                                             |
+| `className`           | `string`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `createSeparator`     | `string \| RegExp \| null`                                                                                                                                                                                        | no       | —       | Separator that makes one creatable entry stand for several values. Defaults to **`','`**, so pasting `id1, id2, id3` adds three chips. - Pass a string or a non-capturing `RegExp` for another convention: `';'` for an Outlook address list, `/[\s,]+/` where a value can never contain a space. A capture group would be handed back as a value of its own — that is `String.prototype.split`'s own behaviour. - Pass `null` where a value legitimately contains the separator — a free-text label, a sentence — and one entry must stay one chip. - Whitespace is deliberately not part of the default: tags and column names contain spaces, and each part is trimmed anyway, so `id1, id2` needs nothing more than the comma. |
+| `empty`               | `ReactNode`                                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `focusVariant`        | `"off" \| "on" \| "default" \| null`                                                                                                                                                                              | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `groupToLabel`        | `((group: Group<string>) => ReactNode)`                                                                                                                                                                           | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `help`                | `ReactNode`                                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `indicator`           | `Indicator`                                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `inputClassName`      | `string`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `inputValueSanitizer` | `((input: string) => string)`                                                                                                                                                                                     | no       | —       | Rewrites what the user types before the control adopts it. - The query the list filters by is the rewritten text, and so is every value a created entry is split into — a character the user cannot type is one they cannot create. - Reach for it where a created value has a character set: a column name, a scope, an identifier. `canCreate` is the gate for a format the user must get right themselves. - It has to rewrite rather than drop: it sees the whole text on every keystroke, so one calling `trim()` swallows the space before the next word.                                                                                                                                                                    |
+| `isItemEqualToValue`  | `((itemValue: string, value: string) => boolean)`                                                                                                                                                                 | no       | —       | Custom comparison logic used to determine if a combobox item value matches the current selected value. Useful when item values are objects without matching referentially. Defaults to `Object.is` comparison.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `items`               | `readonly (string \| Group<string>)[]`                                                                                                                                                                            | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `itemToChipColor`     | `((item: string) => "gray" \| "gray-darker" \| "gray-inverse" \| "green" \| "green-darker" \| "green-inverse" \| "blue" \| "blue-inverse" \| "red" \| "orange" \| "orange-inverse" \| "amber" \| ... 9 more ...)` | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `itemToChipLabel`     | `((item: string) => ReactNode)`                                                                                                                                                                                   | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `itemToDisabled`      | `((item: string) => boolean)`                                                                                                                                                                                     | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `itemToIcon`          | `((item: string) => ReactNode)`                                                                                                                                                                                   | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `itemToLabel`         | `((item: string) => ReactNode)`                                                                                                                                                                                   | no       | —       | The item's row in the list, and its chip unless `itemToChipLabel` overrides it. - Defaults to `itemToStringLabel`, so a control that projects its items — ids carrying the selection, the label looked up beside them — states the projection once. - Pass it separately only where the row is richer than the input's own text.                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `itemToStringLabel`   | `((itemValue: string) => string)`                                                                                                                                                                                 | no       | —       | When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for display in the input. If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `itemToStringValue`   | `((itemValue: string) => string)`                                                                                                                                                                                 | no       | —       | When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for form submission. If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `label`               | `ReactNode`                                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `maxVisible`          | `number`                                                                                                                                                                                                          | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `onQueryChange`       | `((query: string) => void)`                                                                                                                                                                                       | no       | —       | Reports the query the list filters by, `inputValueSanitizer` already applied. - For an owner that needs the query for itself: a server-side search, an option order, the text a synthetic row is offered for. The mount render reports too, so a search driven by this needs no first fetch of its own. - Notification only, and deliberately not Base UI's own `onInputValueChange`: the control keeps ownership of the text — a pick clears it — so there is no controlled `inputValue` to hold in sync.                                                                                                                                                                                                                         |
+| `pinnedChipLabels`    | `ReactNode[]`                                                                                                                                                                                                     | no       | —       | Labels for chips the control shows but the user does not own — a pinned set the caller keeps. - Each label gets a chip of its own, ahead of the values and outside the `maxVisible` slice. - No remove button, and no entry in `value` — there is nothing for a removal to report.                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `queryToCreateLabel`  | `((query: string) => ReactNode)`                                                                                                                                                                                  | no       | —       | Words the create row. Receives the values committing the row will add — an entry standing for several values arrives trimmed and re-joined with its own separator, not as typed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `queryToCreateValue`  | `((query: string) => string)`                                                                                                                                                                                     | no       | —       | Projects one entered string into an item. Called once per value, so a split entry calls it several times, each with an already-trimmed part.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `renderChips`         | `((values: string[]) => ReactNode)`                                                                                                                                                                               | no       | —       | Renders the chip area from the selected values, in place of the default chips. - For the case no per-value accessor can express: one node standing for the whole selection ("3 tables selected"), or a chip count that is not the value count. - A chip that merely holds richer content — a link, an action of its own — needs no slot: `itemToChipLabel` returns a `ReactNode` and the chip lets it take the keyboard. - The chip props above go unused while this is set, `maxVisible` and its `+N` chip included. - `Combobox.Chip` builds a removable chip.                                                                                                                                                                   |
+| `required`            | `boolean`                                                                                                                                                                                                         | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `requiredMark`        | `RequiredMark`                                                                                                                                                                                                    | no       | —       | Which marker to show beside the label — gated by `required` so it never lies: `'required'` renders `*` only when the field is `required`; `'optional'` renders `(optional)` only when it is not; `'hidden'` renders neither. Defaults to `'required'`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `sizing`              | `"small" \| "medium" \| "default" \| null`                                                                                                                                                                        | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `tooltip`             | `ReactNode`                                                                                                                                                                                                       | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `variant`             | `"primary" \| "secondary" \| null`                                                                                                                                                                                | no       | —       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 
 ### `field.CheckboxField`
 
@@ -472,10 +479,11 @@ Source: `src/components/BrandLogo/BrandLogo.tsx`
 
 > Renders the active brand's logo from the nearest `<ThemeProvider>`. `variant` is `wordmark` (default) | `mark`; each falls back to the other and light↔dark. Inline SVG (a `currentColor` mark inherits text colour) or `<img>` per source. Size via `className` height. `Sidebar.Header` / `Navbar.Header` render it by default when given no children.
 
-| Prop        | Type                   | Required | Default    | Description                                                                            |
-| ----------- | ---------------------- | -------- | ---------- | -------------------------------------------------------------------------------------- |
-| `className` | `string`               | no       | —          | Sets the logo height; aspect ratio is preserved (e.g. `tw:h-7`).                       |
-| `variant`   | `"mark" \| "wordmark"` | no       | `wordmark` | `wordmark` (default, full logo) or `mark` (square icon); each falls back to the other. |
+| Prop        | Type                   | Required | Default    | Description                                                                                                                                                                                                                                                                                                                                                        |
+| ----------- | ---------------------- | -------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className` | `string`               | no       | —          | Sets the logo height; aspect ratio is preserved (e.g. `tw:h-7`).                                                                                                                                                                                                                                                                                                   |
+| `label`     | `string`               | no       | —          | The logo's accessible name. - Defaults to the brand's `name`, which is registry metadata: it labels the brand's row in a picker, so it carries whatever disambiguates it there (`Keboola (V2)`). - Pass the product's own name wherever the logo is what names something to a screen reader — a link around it most of all, which otherwise announces that suffix. |
+| `variant`   | `"mark" \| "wordmark"` | no       | `wordmark` | `wordmark` (default, full logo) or `mark` (square icon); each falls back to the other.                                                                                                                                                                                                                                                                             |
 
 ## Layout & shell
 
@@ -499,6 +507,19 @@ Source: `src/blocks/PageLayout/PageLayout.tsx`
 | ---------- | ------------------------------------------- | -------- | ------- | ----------- |
 | `maxWidth` | `"default" \| "full" \| "narrow" \| "wide"` | no       | `full`  |             |
 
+### `AuthLayout`
+
+Source: `src/blocks/AuthLayout/AuthLayout.tsx`
+
+> Compound signed-out page frame — sign-in, sign-up, password reset, MFA, project picker. Subcomponents: `AuthLayout.Header` (a `header`; pairs the active brand mark with the `productName` it is given unless children replace the lockup, and takes `actions` for theme / strategy controls), `AuthLayout.Content` (the `main` form column), `AuthLayout.Footer` (a `footer`). `width` is `form` (28rem) | `wide` (34rem). Pass `aside` (plus `asideSide`) for the split geometry: the form column becomes `bg-background` and the panel `bg-muted`; without one the page is `bg-muted` and the call site supplies the `Card`. Below `lg` the split collapses to one column and the panel is dropped — `asideCollapse='stack'` stacks it above or below the form instead, for a page whose pitch has to survive a phone. Deliberately does **not** own the card — two of the pages it frames have none. Native `<div>` attributes.
+
+| Prop            | Type                | Required | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| --------------- | ------------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `aside`         | `ReactNode`         | no       | —       | Marketing / illustration panel. Its presence switches the page to the split geometry.                                                                                                                                                                                                                                                                                                                                                                                      |
+| `asideCollapse` | `"hide" \| "stack"` | no       | `hide`  | What the `aside` does below `lg`, where the split collapses to one column. - `hide` (default) — the panel is dropped. Right for a page a signed-out _user_ asked for: they came to sign in, and the pitch is not why they are here. - `stack` — the panel keeps its `asideSide` order relative to the form and renders above or below it. Right for a page that has to sell: an acquisition funnel loses its social proof otherwise, on the devices most of it arrives on. |
+| `asideSide`     | `"start" \| "end"`  | no       | `end`   | Which side the `aside` takes on wide screens.                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| `width`         | `Width`             | no       | `form`  |                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+
 ### `PageHeader.Index`
 
 Source: `src/blocks/PageHeader/PageHeaderIndex.tsx`
@@ -523,10 +544,10 @@ Source: `src/blocks/PageHeader/PageHeaderDetail.tsx`
 
 | Prop                   | Type        | Required | Default | Description                                                                                                                                                                                                                                                                                                                   |
 | ---------------------- | ----------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `breadcrumbs`          | `ReactNode` | yes      | —       | `Breadcrumb` chain ending in the entity name (last item is not a link). Required.                                                                                                                                                                                                                                             |
+| `breadcrumbs`          | `ReactNode` | yes      | —       | `Breadcrumb` chain to the entity's parent list / hierarchy. Required. Never repeat the entity's own name as a final, non-link item — it's already the `title` below.                                                                                                                                                          |
 | `title`                | `ReactNode` | yes      | —       |                                                                                                                                                                                                                                                                                                                               |
 | `badges`               | `ReactNode` | no       | —       | Inline `Badge`s rendered next to the title (status, environment, version). Always rendered as pills.                                                                                                                                                                                                                          |
-| `compact`              | `boolean`   | no       | `false` | Compact title mode: renders a smaller title since the breadcrumb already shows the entity name. Default `false`.                                                                                                                                                                                                              |
+| `compact`              | `boolean`   | no       | `false` | Compact title mode: renders a smaller title for information-dense pages. Default `false`.                                                                                                                                                                                                                                     |
 | `description`          | `ReactNode` | no       | —       |                                                                                                                                                                                                                                                                                                                               |
 | `fullWidthDescription` | `boolean`   | no       | `false` | Opt into the responsive layout: the description spans its own full-width row below the title/actions row instead of sharing the title column. Defaults to `false` (description sits inside the title column). Enabled per the `sidebar-navigation` feature in kbc-ui; leaving it off keeps existing consumers byte-identical. |
 | `headerNav`            | `ReactNode` | no       | —       | Optional `Tabs` row below the title block.                                                                                                                                                                                                                                                                                    |
@@ -543,15 +564,16 @@ Source: `src/components/Sidebar/Sidebar.tsx`
 
 > App-shell left navigation rail (host inside `AppShell.Sidebar`). Compound: `Sidebar.Header`, `Sidebar.Content`, `Sidebar.Footer`, `Sidebar.Menu`, `Sidebar.Group`, `Sidebar.SearchInput` (concrete `<input>`, no `asChild`).
 
-| Prop          | Type            | Required | Default | Description |
-| ------------- | --------------- | -------- | ------- | ----------- |
-| `className`   | `string`        | no       | —       |             |
-| `container`   | `boolean`       | no       | `false` |             |
-| `id`          | `string`        | no       | —       |             |
-| `keepMounted` | `boolean`       | no       | —       |             |
-| `resizable`   | `boolean`       | no       | `false` |             |
-| `side`        | `SidebarSide`   | no       | `left`  |             |
-| `style`       | `CSSProperties` | no       | —       |             |
+| Prop              | Type            | Required | Default | Description                                                     |
+| ----------------- | --------------- | -------- | ------- | --------------------------------------------------------------- |
+| `className`       | `string`        | no       | —       |                                                                 |
+| `container`       | `boolean`       | no       | `false` |                                                                 |
+| `id`              | `string`        | no       | —       |                                                                 |
+| `keepMounted`     | `boolean`       | no       | —       |                                                                 |
+| `mountAfterEnter` | `boolean`       | no       | —       | Hold the panel's content back until it has finished sliding in. |
+| `resizable`       | `boolean`       | no       | `false` |                                                                 |
+| `side`            | `SidebarSide`   | no       | `left`  |                                                                 |
+| `style`           | `CSSProperties` | no       | —       |                                                                 |
 
 ### `SectionNav`