@ngrr/ds 0.1.18 → 0.1.21

package/AI.md

@@ -112,7 +112,7 @@ Always use these exact identifiers. Never use `base`, `normal`, or `rest`.
 `AppShell` is the only permitted root layout wrapper. Every page must be inside it. Do not invent wrapper divs or custom layouts.
 ```tsx
 import { AppShell, Navbar, Sidebar, Button, SearchBar, Avatar } from '@ngrr/ds';
-// Icons come from lucide-react — install separately: npm install lucide-react
+// Icons come from lucide-react — bundled inside @ngrr/ds, no separate install needed
 import { LayoutDashboard, FolderKanban, CheckSquare, Users, FileText, Settings } from 'lucide-react';
 
 <AppShell
@@ -234,7 +234,7 @@ import { LayoutDashboard, FolderKanban, CheckSquare, Users, FileText, Settings }
 - No back arrow on top-level pages: Dashboard, Projects, Tasks, People, Notes
 - CTA hierarchy: Primary (object creation, rightmost in Navbar) → Secondary → Ghost (Export, Share, Edit)
 - All labels and copy: sentence case always ("New project" not "New Project")
-- Icons: from `lucide-react` — install with `npm install lucide-react`
+- Icons: from `lucide-react` — bundled inside `@ngrr/ds`, no separate install needed
 - Tag variants: `success` = completed, `progress` = in progress, `warning` = at risk, `neutral` = not started
 - Settings and User Name always pinned to sidebar bottom via `bottomContent`
 - Sidebar always full viewport height — guaranteed by AppShell CSS rules above
@@ -310,7 +310,7 @@ There are two breadcrumb sizes and they serve different purposes:
 
 | Variant | Where | Purpose |
 |---|---|---|
-| **Large** (`BreadcrumbsController`) | Navbar | Main navigation hierarchy — replaces page title on detail views |
+| **Large** (`BreadcrumbsLarge`) | Navbar | Main navigation hierarchy — replaces page title on detail views |
 | **Small** (`Breadcrumbs`) | Inside page content | Sub-section hierarchy within a detail page |
 
 NEVER use small breadcrumbs for main navigation.
@@ -437,27 +437,45 @@ Never use hardcoded hex values or generic semantic tokens for dataviz color.
 ---
 
 ### LCB-03: Horizontal spacing — always use `--page-margin-x`
-All horizontal spacing in the content area must use `var(--page-margin-x)`.
-This applies to every container without exception: pages, cards, modals, drawers, tables, lists, and form sections.
-Never introduce independent `padding-left`, `padding-right`, `margin-left`, or `margin-right` values that deviate from this token.
+`var(--page-margin-x)` is the horizontal breathing room for page content. Apply it as `padding-inline` on your own layout wrapper elements inside the content area. Never apply it directly to DS-Nagarro components — they manage their own internal spacing.
 
-✅ `padding-inline: var(--page-margin-x)` on content areas, modals, drawers, cards
-❌ `padding: 24px` or `margin: 0 16px` hardcoded on any container
-❌ Different horizontal spacing values across containers causing misalignment
+```tsx
+// CORRECT — applied to your own wrapper div inside AppShell's content slot
+<AppShell ...>
+  <div style={{ paddingInline: 'var(--page-margin-x)' }}>
+    {/* page content here */}
+  </div>
+</AppShell>
+
+// WRONG
+<Navbar style={{ paddingInline: 'var(--page-margin-x)' }} />  // DS-Nagarro component — never
+padding: 24px  // hardcoded value — never
+margin: 0 16px  // hardcoded value — never
+```
 
 ---
 
 ### LCB-04: Card internal padding — content must never touch card edges
-Every card must apply internal padding using the correct inset token.
-Content must never touch the card border.
+`Card` has three areas: an optional header (`SectionHeader`), a content area (`children`), and an optional bottom bar (`Toolbar`). The header and bottom bar are pre-built component instances — never add padding, margin, or gap to them. The content area has no built-in padding — always wrap `children` in a div with `padding: var(--inset-large)` so content never touches the card edges.
 
-✅ `padding: var(--inset-large)` inside every card
-❌ Card content flush with card edges
+```tsx
+// CORRECT
+<Card title="Team members">
+  <div style={{ padding: 'var(--inset-large)' }}>
+    {/* content here */}
+  </div>
+</Card>
+
+// WRONG
+<SectionHeader style={{ padding: 'var(--inset-small)' }} />  // pre-built instance — never
+<Toolbar style={{ padding: 'var(--inset-small)' }} />        // pre-built instance — never
+// Card children with no padding wrapper — content touches card edges
+```
 
 ---
 
 ### LCB-05: Icons — always use Lucide, never system icons
-The only permitted icon library is Lucide (`lucide-react`).
+The only permitted icon library is Lucide (`lucide-react`). It is bundled inside `@ngrr/ds` — no separate install is needed.
 Never use browser/OS-native icons, emoji, or icons from any other library.
 This applies everywhere: tables, buttons, inputs, menus, empty states, and all other components.
 
@@ -476,6 +494,42 @@ Never let list items float at an arbitrary width or leave unexplained whitespace
 
 ---
 
+### LCB-06b: DataTable multi-selection — BulkActionBar placement
+When a DataTable supports row selection, selecting one or more rows must show a `BulkActionBar` fixed at the bottom center of the table's container. The bar is dismissed via its × button, which must clear the entire selection.
+
+`BulkActionBar` only accepts a `className` prop for styling — it has no `style` prop. Positioning must go on a wrapper div around the component.
+
+```tsx
+// Table container must be position: relative
+<div style={{ position: 'relative' }}>
+  <DataTable ... />
+  {selectedCount > 0 && (
+    <div style={{
+      position: 'absolute',
+      bottom: 'var(--inset-large)',
+      left: '50%',
+      transform: 'translateX(-50%)',
+    }}>
+      <BulkActionBar
+        selectedCount={selectedCount}
+        actions={actions}
+        onDismiss={handleClearSelection}
+      />
+    </div>
+  )}
+</div>
+```
+
+Rules:
+- Only render when `selectedCount > 0` — never mount with zero selected items
+- Always centered horizontally: `left: 50%` + `transform: translateX(-50%)`
+- Always `var(--inset-large)` from the bottom of the table container
+- Table container must be `position: relative` — never position relative to the viewport
+- Action labels must be count-aware: `"Delete 3"` not `"Delete"`
+- `onDismiss` must clear the entire selection, not just hide the bar
+
+---
+
 ### LCB-07: Placeholder content — never leave it in place
 Component slots for icons, help text, and hint icons must never contain placeholder values.
 Either replace with real, meaningful content or hide the slot entirely.
@@ -2066,9 +2120,11 @@ export const DisabledVariant: Story = {
 ### Layout and placement
 - ❌ Build page layout manually with divs — always use `AppShell`.
 - ❌ Apply scroll to the full page or AppShell root — only the content area scrolls.
-- ❌ Use hardcoded `padding-left`, `padding-right`, `margin-left`, or `margin-right` on any container — always use `var(--page-margin-x)`.
+- ❌ Apply `padding-inline: var(--page-margin-x)` to a DS-Nagarro component — only to your own wrapper div inside the content area.
+- ❌ Use hardcoded `padding-left`, `padding-right`, `margin-left`, or `margin-right` — always use `var(--page-margin-x)` on your own wrapper elements.
 - ❌ Add padding, margin, gap, or any spacing override directly to a DS-Nagarro component element. All components have internal spacing built in — overriding it breaks their proportions. To space components relative to each other, apply spacing tokens to wrapper/container elements only.
-- ❌ Allow card content to touch card edges — always apply `padding: var(--inset-large)`.
+- ❌ Add padding, margin, or gap to the Card header (`SectionHeader`) or bottom bar (`Toolbar`) — they are pre-built component instances with their own spacing.
+- ❌ Leave Card `children` without a padding wrapper — always wrap in a div with `padding: var(--inset-large)`.
 - ❌ Leave list items undersized — always stretch to full container width.
 - ❌ Mix Tab and CustomView tab types in the same row.
 - ❌ Nest tabs within tabs.

package/dist/23c7085d7b3822576b1824d3a25f84b78c7c8d8d.svg

@@ -0,0 +1,7 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 2.58333 11.9167" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon">
+<path d="M1.29167 6.625C1.65986 6.625 1.95833 6.32652 1.95833 5.95833C1.95833 5.59014 1.65986 5.29167 1.29167 5.29167C0.923477 5.29167 0.625 5.59014 0.625 5.95833C0.625 6.32652 0.923477 6.625 1.29167 6.625Z" stroke="var(--stroke-0, #565860)" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.29167 1.95833C1.65986 1.95833 1.95833 1.65986 1.95833 1.29167C1.95833 0.923477 1.65986 0.625 1.29167 0.625C0.923477 0.625 0.625 0.923477 0.625 1.29167C0.625 1.65986 0.923477 1.95833 1.29167 1.95833Z" stroke="var(--stroke-0, #565860)" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.29167 11.2917C1.65986 11.2917 1.95833 10.9932 1.95833 10.625C1.95833 10.2568 1.65986 9.95833 1.29167 9.95833C0.923477 9.95833 0.625 10.2568 0.625 10.625C0.625 10.9932 0.923477 11.2917 1.29167 11.2917Z" stroke="var(--stroke-0, #565860)" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/dist/3f9502fdea06810ad8a11e1710479c909ad81bb2.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 7.91667 7.91667" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Icon" d="M0.625 7.29167L7.29167 0.625M7.29167 0.625H0.625M7.29167 0.625V7.29167" stroke="var(--stroke-0, #565860)" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/components/atoms/Badge/Badge.d.ts

@@ -1,5 +1,5 @@
 export type BadgeSize = 'sm' | 'lg' | 'dot';
-export type BadgeVariant = 'highlight-soft' | 'highlight-strong' | 'informative' | 'critical';
+export type BadgeVariant = 'highlight-soft' | 'highlight-strong' | 'informative' | 'inverted' | 'critical';
 export interface BadgeProps {
     /**
      * Visual size of the badge.
@@ -14,7 +14,8 @@ export interface BadgeProps {
      * - `highlight-soft`   — light teal bg, teal text.
      * - `highlight-strong` — filled teal bg, white text.
      * - `informative`      — neutral gray bg, secondary text.
-     * - `critical`         — filled red bg, white text.
+     * - `inverted`         — dark neutral bg, white text (Figma: Inverted).
+     * - `critical`         — danger red bg, white text (urgent/errors).
      * @default 'highlight-soft'
      */
     variant?: BadgeVariant;

package/dist/components/atoms/Button/Button.d.ts

@@ -121,6 +121,11 @@ export interface ButtonProps {
     'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
     /** Additional CSS class names. */
     className?: string;
+    /**
+     * Overrides the default tab order. Use `-1` to remove the button from
+     * sequential keyboard navigation while keeping it accessible to AT browse mode.
+     */
+    tabIndex?: number;
 }
 /**
  * **Button** — triggers an action.
@@ -154,5 +159,5 @@ export interface ButtonProps {
  * <Button loading>Saving…</Button>
  * ```
  */
-export declare function Button({ variant, size, disabled, loading, destructive, showLeadingIcon, leadingIcon, showLabel, children, showTrailingIcon, trailingIcon, shortcut, shortcutLabel, shortcutAriaLabel, type, onClick, 'aria-label': ariaLabel, 'aria-haspopup': ariaHasPopup, className, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ variant, size, disabled, loading, destructive, showLeadingIcon, leadingIcon, showLabel, children, showTrailingIcon, trailingIcon, shortcut, shortcutLabel, shortcutAriaLabel, type, onClick, 'aria-label': ariaLabel, 'aria-haspopup': ariaHasPopup, className, tabIndex, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export default Button;

package/dist/components/atoms/Checkbox/Checkbox.d.ts

@@ -40,8 +40,10 @@ export interface CheckboxProps {
     switcherChecked?: boolean;
     onSwitcherChange?: (checked: boolean) => void;
     onCheckedChange?: (checked: boolean) => void;
+    /** When true, checkbox stretches to full width (e.g. in choice lists). Default is wrap content (e.g. toolbar). */
+    fullWidth?: boolean;
     className?: string;
     'aria-label'?: string;
 }
-export declare function Checkbox({ size, checked, indeterminate, disabled, label, description, descriptionRight, showContent, showLabel, showDescription, showDescriptionRight, showAvatar, avatarProps, showLeadingIcon, leadingIcon, showTrailingIcon, trailingIcon, showBadge, badgeCount, badgeSize, badgeVariant, showTag, tagLabel, tagVariant, showButtons, actionAriaLabel, onActionClick, showSwitcherRight, switcherChecked, onSwitcherChange, onCheckedChange, className, 'aria-label': ariaLabel, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function Checkbox({ size, checked, indeterminate, disabled, label, description, descriptionRight, showContent, showLabel, showDescription, showDescriptionRight, showAvatar, avatarProps, showLeadingIcon, leadingIcon, showTrailingIcon, trailingIcon, showBadge, badgeCount, badgeSize, badgeVariant, showTag, tagLabel, tagVariant, showButtons, actionAriaLabel, onActionClick, showSwitcherRight, switcherChecked, onSwitcherChange, onCheckedChange, fullWidth, className, 'aria-label': ariaLabel, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
 export default Checkbox;

package/dist/components/atoms/Chip/Chip.d.ts

@@ -55,6 +55,13 @@ export interface ChipProps {
      * Calling `onDismiss` removes the chip value; it does NOT toggle selection.
      */
     onDismiss?: () => void;
+    /**
+     * Ref to focus when this chip is dismissed and there are no adjacent chips
+     * to move focus to — e.g. the search input in a combobox chip stack.
+     * When omitted, focus moves to the nearest sibling dismiss button if one
+     * exists; otherwise focus is left unmanaged.
+     */
+    dismissFocusFallback?: React.RefObject<HTMLElement | null>;
     /**
      * Click / keyboard handler invoked when the user toggles the chip.
      * The consumer is responsible for updating `selected` in response.
@@ -79,5 +86,5 @@ export interface ChipGroupProps {
     /** Additional CSS class names merged onto the group element. */
     className?: string;
 }
-export declare function Chip({ label, selected, disabled, size, leadingIcon, trailingIcon, showLeadingIcon, showTrailingIcon, onDismiss, onClick, className, 'aria-label': ariaLabel, }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chip({ label, selected, disabled, size, leadingIcon, trailingIcon, showLeadingIcon, showTrailingIcon, onDismiss, onClick, className, 'aria-label': ariaLabel, dismissFocusFallback, }: ChipProps): import("react/jsx-runtime").JSX.Element;
 export declare function ChipGroup({ label, children, className }: ChipGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Combobox/Combobox.d.ts

@@ -31,9 +31,10 @@ export interface ComboboxProps {
     onValuesChange?: (values: string[], options: ComboboxOption[]) => void;
     onOpenChange?: (open: boolean) => void;
     onInputChange?: (query: string) => void;
-    confirmLabel?: string;
+    /** Gap between trigger and dropdown (default 4 = --space-tiny). Use for consistent alignment e.g. inside DateTimePicker. */
+    popoverOffset?: number;
     'aria-label'?: string;
     'aria-labelledby'?: string;
 }
-export declare function Combobox({ selectionMode, id, label, showLabel, placeholder, options, value, defaultValue, values, defaultValues, open, defaultOpen, disabled, error, helperText, showHelper, errorMessage, required, helperIcon, className, name, onChange, onValuesChange, onOpenChange, onInputChange, confirmLabel, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function Combobox({ selectionMode, id, label, showLabel, placeholder, options, value, defaultValue, values, defaultValues, open, defaultOpen, disabled, error, helperText, showHelper, errorMessage, required, helperIcon, className, name, onChange, onValuesChange, onOpenChange, onInputChange, popoverOffset, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
 export default Combobox;

package/dist/components/atoms/DataTableHeaderCell/DataTableHeaderCell.d.ts

@@ -28,6 +28,9 @@ export interface DataTableHeaderCellProps {
     leadingAccessory?: React.ReactNode;
     className?: string;
     'aria-label'?: string;
+    /** When true, omits role="columnheader" and aria-sort from the root div.
+     *  Use when the div is already inside a <th scope="col"> that carries those attributes. */
+    noRole?: boolean;
 }
-export declare function DataTableHeaderCell({ variant, state, label, width, sortable, sortDirection, reorderable, resizable, checkboxChecked, checkboxIndeterminate, onCheckboxChange, onSortChange, onResizeCommand, onResizePointerDown, onMoreClick, onReorderDragStart, onReorderDragEnd, filterValue: _filterValue, onFilterChange: _onFilterChange, leadingAccessory, className, 'aria-label': ariaLabel, }: DataTableHeaderCellProps): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableHeaderCell({ variant, state, label, width, sortable, sortDirection, reorderable, resizable, checkboxChecked, checkboxIndeterminate, onCheckboxChange, onSortChange, onResizeCommand, onResizePointerDown, onMoreClick, onReorderDragStart, onReorderDragEnd, filterValue: _filterValue, onFilterChange: _onFilterChange, leadingAccessory, className, 'aria-label': ariaLabel, noRole, }: DataTableHeaderCellProps): import("react/jsx-runtime").JSX.Element;
 export default DataTableHeaderCell;

package/dist/components/atoms/MenuCell/MenuCell.d.ts

@@ -41,6 +41,10 @@ export interface MenuCellProps {
     tabIndex?: number;
     className?: string;
     'aria-label'?: string;
+    /** Override the default "menuitem" role — pass "option" when MenuCell is used inside a listbox. */
+    role?: React.AriaRole;
+    /** Conveys selection state when role="option" (listbox pattern). */
+    'aria-selected'?: boolean;
 }
 export declare const MenuCell: React.ForwardRefExoticComponent<MenuCellProps & React.RefAttributes<HTMLElement>>;
 export default MenuCell;

package/dist/components/atoms/Select/Select.d.ts

@@ -7,6 +7,7 @@ export interface SelectOption {
 }
 export interface SelectProps {
     id?: string;
+    /** Optional visible label above the control. Omit to use only the control (e.g. inline); ensure aria-label is set for accessibility. */
     label?: string;
     placeholder?: string;
     options?: SelectOption[];
@@ -16,10 +17,16 @@ export interface SelectProps {
     defaultOpen?: boolean;
     disabled?: boolean;
     error?: boolean;
+    /** Optional help text below the control. */
     helperText?: string;
     errorMessage?: string;
     required?: boolean;
+    /** Optional icon next to help text. Only shown when helperText or errorMessage is present. */
     helperIcon?: React.ReactNode;
+    /** When true, shows a leading icon in the control. Pass leadingIcon with a contextual icon (e.g. matching the label). */
+    icon?: boolean;
+    /** Icon shown at the start of the control when icon is true. Should be contextual with the label (e.g. globe for "Country"). */
+    leadingIcon?: React.ReactNode;
     className?: string;
     name?: string;
     onChange?: (value: string, option: SelectOption) => void;
@@ -27,5 +34,5 @@ export interface SelectProps {
     'aria-label'?: string;
     'aria-labelledby'?: string;
 }
-export declare function Select({ id, label, placeholder, options, value, defaultValue, open, defaultOpen, disabled, error, helperText, errorMessage, required, helperIcon, className, name, onChange, onOpenChange, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function Select({ id, label, placeholder, options, value, defaultValue, open, defaultOpen, disabled, error, helperText, errorMessage, required, helperIcon, icon, leadingIcon, className, name, onChange, onOpenChange, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }: SelectProps): import("react/jsx-runtime").JSX.Element;
 export default Select;

package/dist/components/molecules/Breadcrumbs/BreadcrumbsLarge.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+export type BreadcrumbLargeItemVariant = 'previous' | 'current' | 'ellipsis';
+export interface BreadcrumbLargeItem {
+    id?: string;
+    label?: React.ReactNode;
+    variant?: BreadcrumbLargeItemVariant;
+    disabled?: boolean;
+    /** When true, shows a chevron (e.g. for items that open a dropdown). Default false. */
+    showDisclosure?: boolean;
+    ariaLabel?: string;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>, item: BreadcrumbLargeItem, index: number) => void;
+}
+export interface BreadcrumbsLargeProps {
+    items: BreadcrumbLargeItem[];
+    maxVisibleItems?: number;
+    showEllipsis?: boolean;
+    ellipsisLabel?: string;
+    ellipsisAriaLabel?: string;
+    className?: string;
+    'aria-label'?: string;
+    onItemClick?: (event: React.MouseEvent<HTMLButtonElement>, item: BreadcrumbLargeItem, index: number) => void;
+}
+/**
+ * Large breadcrumbs for page-level navigation, typically in the Navbar.
+ * Replaces the page title on detail views with a hierarchical trail.
+ */
+export declare function BreadcrumbsLarge({ items, maxVisibleItems, showEllipsis, ellipsisLabel, ellipsisAriaLabel, className, 'aria-label': ariaLabel, onItemClick, }: BreadcrumbsLargeProps): import("react/jsx-runtime").JSX.Element;
+export default BreadcrumbsLarge;

package/dist/components/molecules/Breadcrumbs/index.d.ts

@@ -1,4 +1,4 @@
 export { Breadcrumbs } from './Breadcrumbs';
 export type { BreadcrumbsProps, BreadcrumbItem } from './Breadcrumbs';
-export { BreadcrumbsController } from './BreadcrumbsController';
-export type { BreadcrumbsControllerProps, BreadcrumbControllerItem, BreadcrumbControllerItemVariant, } from './BreadcrumbsController';
+export { BreadcrumbsLarge } from './BreadcrumbsLarge';
+export type { BreadcrumbsLargeProps, BreadcrumbLargeItem, BreadcrumbLargeItemVariant, } from './BreadcrumbsLarge';

package/dist/components/molecules/ChoiceList/ChoiceList.d.ts

@@ -25,15 +25,14 @@ export interface ChoiceListSection {
     items: ChoiceListItem[];
 }
 export interface ChoiceListProps {
+    /** Used for aria-label on the root section. */
     title?: string;
-    description?: string;
     sections: ChoiceListSection[];
-    showHeader?: boolean;
     showSectionHeaders?: boolean;
     className?: string;
     sectionClassName?: string;
     enableMenuKeyboardNavigation?: boolean;
     onMenuEscape?: () => void;
 }
-export declare function ChoiceList({ title, description, sections, showHeader, showSectionHeaders, className, sectionClassName, enableMenuKeyboardNavigation, onMenuEscape, }: ChoiceListProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChoiceList({ title, sections, showSectionHeaders, className, sectionClassName, enableMenuKeyboardNavigation, onMenuEscape, }: ChoiceListProps): import("react/jsx-runtime").JSX.Element;
 export default ChoiceList;

package/dist/components/molecules/PopoverWrapper/PopoverWrapper.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 export type PopoverWrapperRole = 'menu' | 'dialog' | 'listbox' | 'group';
 export type PopoverWrapperContentPadding = 'none' | 'small';
 export interface PopoverWrapperProps {
+    id?: string;
     header?: React.ReactNode;
     segment?: React.ReactNode;
     search?: React.ReactNode;
@@ -19,5 +20,5 @@ export interface PopoverWrapperProps {
     minWidth?: number;
     'aria-label'?: string;
 }
-export declare function PopoverWrapper({ header, segment, search, content, bottomBar, role, width, contentPadding, className, contentClassName, anchorRef, offset, viewportMargin, matchAnchorWidth, minWidth, 'aria-label': ariaLabel, }: PopoverWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function PopoverWrapper({ id, header, segment, search, content, bottomBar, role, width, contentPadding, className, contentClassName, anchorRef, offset, viewportMargin, matchAnchorWidth, minWidth, 'aria-label': ariaLabel, }: PopoverWrapperProps): import("react/jsx-runtime").JSX.Element;
 export default PopoverWrapper;

package/dist/components/molecules/Toolbar/Toolbar.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 export type ToolbarSize = 'lg' | 'md' | 'sm';
-export type ToolbarVariant = 'default' | 'filter-bar';
+export type ToolbarVariant = 'default' | 'filter-bar' | 'plain';
 export interface ToolbarProps {
     size?: ToolbarSize;
     variant?: ToolbarVariant;

package/dist/components/organisms/Navbar/Navbar.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { BreadcrumbControllerItem, BreadcrumbsControllerProps } from '../../molecules/Breadcrumbs';
+import { BreadcrumbLargeItem, BreadcrumbsLargeProps } from '../../molecules/Breadcrumbs';
 export type NavbarVariant = 'title' | 'breadcrumbs';
 export interface NavbarProps {
     variant?: NavbarVariant;
@@ -9,9 +9,9 @@ export interface NavbarProps {
     descriptionIcon?: React.ReactNode;
     leftActions?: React.ReactNode;
     rightActions?: React.ReactNode;
-    breadcrumbItems?: BreadcrumbControllerItem[];
-    breadcrumbMaxVisibleItems?: BreadcrumbsControllerProps['maxVisibleItems'];
-    breadcrumbShowEllipsis?: BreadcrumbsControllerProps['showEllipsis'];
+    breadcrumbItems?: BreadcrumbLargeItem[];
+    breadcrumbMaxVisibleItems?: BreadcrumbsLargeProps['maxVisibleItems'];
+    breadcrumbShowEllipsis?: BreadcrumbsLargeProps['showEllipsis'];
     responsiveCollapse?: boolean;
     backOnlyBreakpointPx?: number;
     backLabel?: string;

package/dist/components/organisms/PopoverMenu/PopoverMenu.d.ts

@@ -6,8 +6,6 @@ export type PopoverMenuVariant = 'rich' | 'simple';
 export interface PopoverMenuChoiceList {
     id: string;
     title?: string;
-    description?: string;
-    showHeader?: boolean;
     showSectionHeaders?: boolean;
     sections: ChoiceListSection[];
 }