@cube-dev/ui-kit 0.138.6 → 0.140.0

package/docs/ComplexLayout.md

@@ -50,8 +50,8 @@ Use `Layout.Panel` for side navigation. Panels are absolutely positioned and aut
   <Layout.Panel side="left" size={200} isOpen={isOpen}> {/* absolute left, pushes content via insets */}
     <Layout.PanelHeader isClosable title="Menu" onClose={() => setIsOpen(false)} />
     <Layout.Content padding=".5x" gap="1bw"> {/* flex column ↓, scrollable */}
-      <ItemButton type="neutral">Dashboard</ItemButton>
-      <ItemButton type="neutral">Settings</ItemButton>
+      <ItemButton type="clear">Dashboard</ItemButton>
+      <ItemButton type="clear">Settings</ItemButton>
     </Layout.Content>
   </Layout.Panel>
   <Layout.Toolbar>                   {/* flex row →, single item aligns left */}

package/docs/components/CollectionItem.md

@@ -92,7 +92,7 @@ const items = [{
 
 ## Properties
 
-- **`icon`** `ReactNode | 'checkbox'` — Icon displayed before the content
+- **`icon`** `ReactNode | 'checkmark'` — Icon displayed before the content
 - **`rightIcon`** `ReactNode` — Icon displayed after the content
 - **`prefix`** `ReactNode` — Content rendered before the label
 - **`suffix`** `ReactNode` — Content rendered after the label

package/docs/components/actions/Banner.md

@@ -27,7 +27,7 @@ Banner displays prominent messages and notifications to users. It supports diffe
 - **`tooltip`** `string | boolean | object` — Tooltip configuration
 - **`hotkeys`** `string` — Keyboard shortcut displayed and triggered
 - **`isDisabled`** `boolean` — Whether the banner is disabled
-- **`isSelected`** `boolean` (default: `false`) — Whether the banner shows as selected with a checkbox
+- **`isSelected`** `boolean` (default: `false`) — Whether the banner shows as selected with a checkmark
 - **`isLoading`** `boolean` — Show loading state
 - **`autoHideActions`** `boolean` (default: `false`) — When true, actions are hidden by default and shown on hover or focus
 - **`preserveActionsSpace`** `boolean` (default: `false`) — Preserve the actions width when hidden (only changes opacity, not layout)

package/docs/components/actions/Button.md

@@ -15,7 +15,7 @@ A versatile action component that triggers commands and navigates users.
 
 ## Properties
 
-- **`type`** `'primary' | 'secondary' | 'outline' | 'neutral' | 'clear' | 'link'` (default: `outline`) — Visual style variant of the button
+- **`type`** `'primary' | 'outline' | 'outline-2' | 'clear' | 'link'` (default: `outline`) — Visual style variant of the button (`outline-2` is identical to `outline` but uses `#surface-3` as the base fill; not available for the `special` theme)
 - **`theme`** `'default' | 'danger' | 'success' | 'warning' | 'note' | 'special'` (default: `default`) — Semantic colour palette theme
 - **`size`** `'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'inline' | number` (default: `medium`) — Button size. Use `'inline'` for link-type buttons or a number/string for custom sizes (e.g. `64` or `'8x'`)
 - **`icon`** — Icon rendered before the content. Can be: ReactNode, `true` (empty slot), or function `({ loading, selected, ...mods }) => ReactNode | true`
@@ -78,10 +78,8 @@ The `mods` prop accepts the following modifiers you can override:
 ### Types. `type` prop
 
 - `primary` – Emphasised call-to-action.
-- `secondary` – Less emphasised, alternative action.
-- `outline` – Transparent background with border.
-- `neutral` – Minimal style that blends with surroundings.
-- `clear` – Text-only variant without background and border.
+- `outline` – Border with transparent background; `isSelected` adds brand-tinted fill.
+- `clear` – No border, transparent background; `isSelected` adds brand-tinted fill.
 - `link` – Styled as a textual link.
 
 ### Themes. `theme` prop

package/docs/components/actions/ButtonGroup.md

@@ -43,7 +43,7 @@ These properties allow direct style application without using the `styles` prop:
 ```jsx
 <Button.Group>
   <Button>Save</Button>
-  <Button type="secondary">Cancel</Button>
+  <Button type="outline">Cancel</Button>
 </Button.Group>
 ```
 

package/docs/components/actions/ButtonSplit.md

@@ -19,7 +19,7 @@ A split button that groups a primary action with a dropdown trigger for secondar
 - **`defaultActionKey`** `string` — Initially selected action key (uncontrolled)
 - **`onAction`** `(key: string) => void` — Called when the action button is pressed
 - **`onActionChange`** `(key: string) => void` — Called when the selected action changes via the menu
-- **`type`** `'primary' | 'secondary' | 'outline' | 'neutral' | 'clear'` (default: `'outline'`) — Button type (inherited by children via context)
+- **`type`** `'primary' | 'outline' | 'outline-2' | 'clear'` (default: `'outline'`) — Button type (inherited by children via context)
 - **`theme`** `'default' | 'danger' | 'success' | 'warning' | 'note' | 'special'` (default: `'default'`) — Button theme (inherited by children via context)
 - **`size`** `'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'` (default: `'medium'`) — Button size (inherited by children via context)
 - **`isDisabled`** `boolean` (default: `false`) — Disables all buttons (inherited via context)
@@ -137,7 +137,6 @@ Different types and themes can be applied. All child buttons inherit the styling
 
 ```jsx
 <Button.Split actions={actions} defaultActionKey="copy" type="primary" />
-<Button.Split actions={actions} defaultActionKey="copy" type="secondary" />
 <Button.Split actions={actions} defaultActionKey="copy" type="outline" />
 <Button.Split actions={actions} defaultActionKey="copy" type="primary" theme="danger" />
 <Button.Split actions={actions} defaultActionKey="copy" type="primary" isDisabled />

package/docs/components/actions/ItemAction.md

@@ -14,11 +14,11 @@ A compact action button designed for use inside `Item`, `ItemButton`, and `ItemC
 
 ## Properties
 
-- **`icon`** `ReactNode | 'checkbox'` — Icon element or `'checkbox'` for a selection indicator
-- **`type`** `'primary' | 'secondary' | 'outline' | 'neutral' | 'clear'` (default: `'neutral'`) — Visual type. Inherits from parent context.
+- **`icon`** `ReactNode | 'checkmark'` — Icon element or `'checkmark'` for a selection indicator
+- **`type`** `'primary' | 'outline' | 'clear'` (default: `'clear'`) — Visual type. Inherits from parent context.
 - **`theme`** `'default' | 'danger' | 'success' | 'warning' | 'note' | 'special'` (default: `'default'`) — Color theme. Inherits from parent context.
 - **`isLoading`** `boolean` (default: `false`) — Shows loading spinner
-- **`isSelected`** `boolean` (default: `false`) — Selected state (works with `icon="checkbox"`)
+- **`isSelected`** `boolean` (default: `false`) — Selected state (works with `icon="checkmark"`)
 - **`isDisabled`** `boolean` (default: `false`) — Disables the action. Inherits from parent; use `isDisabled={false}` to override.
 - **`tooltip`** `string | object` — Tooltip content (shown for icon-only buttons)
 - **`onPress`** `() => void` — Press event handler
@@ -36,10 +36,10 @@ Supports [Base properties](../../BaseProperties.md).
 <ItemAction icon={<IconTrash />} tooltip="Delete" theme="danger" />
 ```
 
-### Checkbox action
+### Checkmark action
 
 ```jsx
-<ItemAction icon="checkbox" isSelected={isChecked} onPress={toggle} />
+<ItemAction icon="checkmark" isSelected={isChecked} onPress={toggle} />
 ```
 
 ### Inside ItemButton

package/docs/components/actions/ItemButton.md

@@ -16,7 +16,7 @@ An interactive button component built on top of `Item` that provides all the lay
 
 ### Properties
 
-- **`type`** `'primary' | 'secondary' | 'outline' | 'neutral' | 'clear'` — Visual type/variant of the button
+- **`type`** `'primary' | 'outline' | 'outline-2' | 'clear'` — Visual type/variant of the button
 - **`theme`** `'default' | 'danger' | 'success' | 'special'` — Color theme of the button
 - **`size`** `'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'` (default: `medium`) — Size of the button (does not support `'inline'`)
 - **`icon`** `ReactNode` — Icon displayed before the content
@@ -26,7 +26,7 @@ An interactive button component built on top of `Item` that provides all the lay
 - **`hotkeys`** `string` — Keyboard shortcut that triggers the button (e.g., `"cmd+s"`, `"ctrl+alt+d"`)
 - **`tooltip`** `boolean | string | object` — Tooltip configuration: string for simple text, `true` for auto overflow tooltips, or object for advanced config with optional `auto` property
 - **`isDisabled`** `boolean` — Whether the button is disabled
-- **`isSelected`** `boolean` — Whether the button shows as selected with checkbox
+- **`isSelected`** `boolean` — Whether the button shows as selected with a checkmark (pairs with `icon="checkmark"`)
 - **`to`** `string` — URL for link behavior (makes button act as link)
 - **`htmlType`** `'button' | 'submit' | 'reset'` — HTML button type attribute
 - **`description`** `string` — Secondary text shown below the main content
@@ -60,10 +60,8 @@ Inherits all modifiers from [Item](../content/Item.md) plus:
 ### Types
 
 - `primary` - Primary button with prominent styling for main actions
-- `secondary` - Secondary button with moderate emphasis
-- `outline` - Button with border outline and transparent background
-- `neutral` - Neutral styled button for subtle actions
-- `clear` - Transparent button with minimal visual weight
+- `outline` - Button with border outline; `isSelected` adds brand-tinted fill
+- `clear` - Transparent button with minimal visual weight; `isSelected` adds brand-tinted fill
 - `link` - Link-styled button that looks like a text link
 
 ### Themes

package/docs/components/content/Item.md

@@ -16,13 +16,13 @@ A foundational component that provides a standardized layout and styling for ite
 ## Properties
 
 - **`children`** `ReactNode` — The content inside the Item
-- **`icon`** — Icon rendered before the content. Can be: ReactNode, `"checkbox"`, `true` (empty slot), or function `({ selected, loading, ...mods }) => ReactNode | true`
+- **`icon`** — Icon rendered before the content. Can be: ReactNode, `"checkmark"`, `true` (empty slot), or function `({ selected, loading, ...mods }) => ReactNode | true`
 - **`rightIcon`** — Icon rendered after the content. Can be: ReactNode, `true` (empty slot), or function `({ selected, loading, ...mods }) => ReactNode | true`
 - **`prefix`** `ReactNode` — Element rendered before the content (after icon)
 - **`suffix`** `ReactNode` — Element rendered after the content (before rightIcon)
 - **`description`** `ReactNode` — Description text displayed with the item
 - **`descriptionPlacement`** `'inline' | 'block'` (default: `inline`) — How the description is positioned relative to the main content. Defaults to `'block'` for `type="card"` and `type="header"`
-- **`type`** `'item' | 'header' | 'primary' | 'secondary' | 'outline' | 'neutral' | 'clear' | 'link' | 'card'` (default: `item`) — Visual style variant
+- **`type`** `'item' | 'header' | 'primary' | 'outline' | 'outline-2' | 'clear' | 'link' | 'card'` (default: `item`) — Visual style variant
 - **`theme`** `'default' | 'danger' | 'success' | 'warning' | 'note' | 'special'` (default: `default`) — Semantic colour palette theme
 - **`size`** `'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'inline' | number` (default: `medium`) — Item size. Accepts custom number or string values
 - **`shape`** `'card' | 'button' | 'sharp' | 'pill'` (default: `button`) — Shape of the item border radius. Defaults to `'card'` for `type="card"`
@@ -79,12 +79,12 @@ The `mods` property accepts the following modifiers:
 - **`has-actions-content`** `boolean` — Applied when actions have actual content (not just placeholder)
 - **`auto-hide-actions`** `boolean` — Applied when autoHideActions is true
 - **`preserve-actions-space`** `boolean` — Applied when preserveActionsSpace is true
-- **`checkbox`** `boolean` — Applied when using checkbox icon (icon="checkbox")
+- **`checkmark`** `boolean` — Applied when using the checkmark icon (icon="checkmark")
 - **`selected`** `boolean` — Applied when isSelected is true
 - **`disabled`** `boolean` — Applied when isDisabled is true or when loading
 - **`loading`** `boolean` — Applied when isLoading is true
 - **`size`** `string` — Applied based on size prop value (xsmall, small, medium, large, xlarge, inline)
-- **`type`** `string` — Applied based on type prop value (item, header, primary, secondary, outline, neutral, clear, link, card)
+- **`type`** `string` — Applied based on type prop value (item, header, primary, outline, outline-2, clear, link, card)
 - **`theme`** `string` — Applied based on theme prop value (default, danger, success, special, warning, note)
 - **`shape`** `string` — Applied based on shape prop value (card, button, sharp, pill)
 
@@ -95,10 +95,9 @@ The `mods` property accepts the following modifiers:
 - `item` - Default item appearance (no specific styling)
 - `header` - Header appearance for section headers (only supports `default` theme, defaults to `descriptionPlacement="block"`, uses semantic heading tags via `level` prop)
 - `primary` - Primary styled item with prominent appearance
-- `secondary` - Secondary styled item with moderate emphasis
-- `outline` - Item with border outline styling
-- `neutral` - Neutral colored item styling
-- `clear` - Transparent item with minimal styling
+- `outline` - Item with border outline styling; `isSelected` adds brand-tinted fill
+- `outline-2` - Same as `outline` but uses `#surface-3` as the base fill, designed to sit on `#surface-2` containers without blending in (not available for the `special` theme)
+- `clear` - Transparent item with minimal styling; `isSelected` adds brand-tinted fill
 - `link` - Link-styled item appearance (does not support icons or loading state)
 - `card` - Card appearance for notifications (supports `default`, `success`, `danger`, `warning`, `note` themes; defaults to `shape="card"`, `descriptionPlacement="block"`, uses semantic heading tags via `level` prop, and has `.5x` padding)
 
@@ -203,8 +202,8 @@ The `descriptionPlacement` prop controls where the description appears. It defau
 ### With Selection State
 
 ```jsx
-<Item icon="checkbox" isSelected={true}>
-  Selected item with checkbox
+<Item icon="checkmark" isSelected={true}>
+  Selected item with checkmark
 </Item>
 ```
 

package/docs/components/content/ItemBadge.md

@@ -10,11 +10,11 @@ A non-interactive badge indicator for list items. Similar to `ItemAction` but wi
 
 ## Properties
 
-- **`icon`** `ReactNode | 'checkbox'` — Icon or checkbox display
-- **`type`** `'primary' | 'secondary' | 'neutral' | 'clear'` (default: `'neutral'`) — Visual type. Inherits from parent context.
+- **`icon`** `ReactNode | 'checkmark'` — Icon or checkmark display
+- **`type`** `'primary' | 'outline' | 'clear'` (default: `'clear'`) — Visual type. `isSelected` applies brand-tinted fill to `outline` and `clear`. Inherits from parent context.
 - **`theme`** `'default' | 'danger' | 'success' | 'special'` (default: `'default'`) — Color theme. Inherits from parent context.
 - **`isLoading`** `boolean` (default: `false`) — Show loading spinner
-- **`isSelected`** `boolean` (default: `false`) — Selected state (for checkbox)
+- **`isSelected`** `boolean` (default: `false`) — Selected state (for checkmark)
 - **`tooltip`** `string | object` — Tooltip content shown on hover for icon-only badges. A string shows tooltip text; an object supports `{ title, ...tooltipProps }` for advanced configuration.
 
 ### Base Properties
@@ -24,7 +24,7 @@ Supports [Base properties](../../BaseProperties.md).
 ## Examples
 
 ```jsx
-<ItemBadge icon="checkbox" isSelected />
+<ItemBadge icon="checkmark" isSelected />
 
 <ItemBadge icon={<IconCheck />} theme="success" />
 

package/docs/components/content/ItemCard.md

@@ -23,7 +23,7 @@ A convenience wrapper around `Item type="card"` that provides a more natural car
 - **`suffix`** `ReactNode` — Content rendered after the label
 - **`tooltip`** `string | boolean | object` (default: `true`) — Tooltip configuration: string for text, `true` for auto overflow tooltips, or object for advanced config
 - **`hotkeys`** `string` — Keyboard shortcut displayed and triggered
-- **`isSelected`** `boolean` (default: `false`) — Whether the card shows as selected with a checkbox
+- **`isSelected`** `boolean` (default: `false`) — Whether the card shows as selected with a checkmark
 - **`isLoading`** `boolean` (default: `false`) — Show loading state, replacing an icon slot with a spinner
 - **`actions`** `ReactNode` — Inline action buttons displayed on the right side
 - **`autoHideActions`** `boolean` (default: `false`) — When true, actions are hidden by default and shown on hover or focus

package/docs/components/content/Layout.md

@@ -696,7 +696,7 @@ function ApplicationShell() {
         />
         <Layout.Content padding=".5x" scrollbar="tiny" gap="1bw">
           {['Dashboard', 'Analytics', 'Reports'].map((item) => (
-            <ItemButton key={item} type="neutral" width="100%">
+            <ItemButton key={item} type="clear" width="100%">
               {item}
             </ItemButton>
           ))}
@@ -709,7 +709,7 @@ function ApplicationShell() {
         breadcrumbs={[['Home', '/'], ['Analytics', '/analytics']]}
         subtitle="Real-time overview of your metrics"
         suffix={
-          <Button type="neutral" onPress={() => setSidebarOpen(!sidebarOpen)}>
+          <Button type="clear" onPress={() => setSidebarOpen(!sidebarOpen)}>
             ☰
           </Button>
         }

package/docs/components/content/Tag.md

@@ -35,7 +35,7 @@ Tags are compact, inline elements used to label, categorize, or organize items.
 - **`description`** `ReactNode` — Secondary text below the main content
 - **`tooltip`** `string | boolean | object` (default: `true`) — Tooltip configuration: string for text, `true` for auto overflow tooltips, or object for advanced config
 - **`hotkeys`** `string` — Keyboard shortcut displayed and triggered
-- **`isSelected`** `boolean` (default: `false`) — Whether the tag shows as selected with a checkbox
+- **`isSelected`** `boolean` (default: `false`) — Whether the tag shows as selected with a checkmark
 - **`isLoading`** `boolean` (default: `false`) — Show loading state, replacing an icon slot with a spinner
 - **`actions`** `ReactNode` — Inline action buttons displayed on the right side
 - **`autoHideActions`** `boolean` (default: `false`) — When true, actions are hidden by default and shown on hover or focus

package/docs/components/fields/FilterListBox.md

@@ -416,7 +416,7 @@ const categories = [
   >
     <Space gap="1x" flow="column">
       <Text weight="600">Basic Plan</Text>
-      <Badge type="neutral">Free</Badge>
+      <Badge type="disabled">Free</Badge>
     </Space>
   </FilterListBox.Item>
   <FilterListBox.Item

package/docs/components/fields/FilterPicker.md

@@ -30,7 +30,7 @@ A versatile selection component that combines a trigger button with a searchable
 - **`items`** `Iterable<T>` — Array of items to render when using the render function pattern for large datasets with dynamic content
 - **`placeholder`** `string` — Placeholder text when no selection is made
 - **`icon`** `ReactNode` — Icon to show in the trigger button
-- **`type`** `'outline' | 'clear' | 'primary' | 'secondary' | 'neutral'` (default: `outline`) — Button styling type
+- **`type`** `'outline' | 'outline-2' | 'clear' | 'primary'` (default: `outline`) — Button styling type
 - **`theme`** `'default' | 'special'` (default: `default`) — Button theme
 - **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — Size of the picker component
 - **`searchPlaceholder`** `string` — Placeholder text in the search input
@@ -293,11 +293,9 @@ const categories = [
 
 ### Button Types
 
-- `outline` - Default outlined button style
-- `clear` - Transparent background button
+- `outline` - Default outlined button style; `isSelected` adds brand-tinted fill
+- `clear` - Transparent background button; `isSelected` adds brand-tinted fill
 - `primary` - Primary brand color button
-- `secondary` - Secondary color button
-- `neutral` - Neutral color button
 
 ### Sizes
 

package/docs/components/fields/ListBox.md

@@ -513,7 +513,7 @@ const [selectedKey, setSelectedKey] = useState('apple');
   >
     <Space gap="1x" flow="column">
       <Text weight="600">Basic Plan</Text>
-      <Badge type="neutral">Free</Badge>
+      <Badge type="disabled">Free</Badge>
     </Space>
   </ListBox.Item>
   <ListBox.Item

package/docs/components/fields/Picker.md

@@ -26,7 +26,7 @@ A versatile selection component that combines a trigger button with a dropdown l
 - **`defaultSelectedKeys`** `string[] | 'all'` — The default selected keys in uncontrolled multiple mode
 - **`items`** `Iterable<T>` — Array of items for dynamic content with render function pattern
 - **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — Size of the picker component
-- **`type`** `'outline' | 'clear' | 'primary' | 'secondary' | 'neutral'` (default: `outline`) — Trigger button styling type
+- **`type`** `'outline' | 'outline-2' | 'clear' | 'primary'` (default: `outline`) — Trigger button styling type
 - **`theme`** `'default' | 'danger'` (default: `default`) — Trigger button color theme
 - **`icon`** `ReactNode` — Icon displayed in the trigger button
 - **`rightIcon`** `ReactNode` — Icon displayed on the right side of the trigger button
@@ -289,11 +289,9 @@ For large datasets or dynamic content, use the `items` prop with a render functi
 
 The trigger button supports various visual styles via the `type` prop:
 
-- **`outline`** (default) — Outlined button with border. Use case: Standard form inputs
-- **`clear`** — Transparent background. Use case: Toolbar actions, compact interfaces
+- **`outline`** (default) — Outlined button with border. Use case: Standard form inputs. `isSelected` adds brand-tinted fill.
+- **`clear`** — Transparent background. Use case: Toolbar actions, compact interfaces. `isSelected` adds brand-tinted fill.
 - **`primary`** — Primary brand color. Use case: Emphasized selections
-- **`secondary`** — Secondary color variant. Use case: Alternative emphasis
-- **`neutral`** — Neutral color scheme. Use case: Subtle selections
 
 ### Trigger Button Themes
 

package/docs/components/fields/RadioGroup.md

@@ -22,7 +22,7 @@ A radio group allows users to select exactly one option from a set of mutually e
 - **`type`** `'radio' | 'button' | 'tabs'` (default: `radio`) — Visual type for all radios in the group (button/tabs default to horizontal)
 - **`orientation`** `undefined | 'vertical' | 'horizontal'` (default: `auto`) — Orientation of the radio group (auto-set based on type)
 - **`size`** `'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'` (default: `xsmall`) — Size for all radio buttons in the group
-- **`buttonType`** `'outline' | 'neutral' | 'primary' | 'clear'` — Button type for button-style radios (ignored in tabs mode). When set to "primary", selected buttons use primary style and non-selected use secondary
+- **`buttonType`** `'outline' | 'outline-2' | 'clear' | 'primary'` — Button type for button-style radios (ignored in tabs mode). When set to "primary", selected buttons use primary style and non-selected use outline with brand tint. `outline-2` is identical to `outline` but uses `#surface-3` as its base fill, so it stands out when the radio group sits on a `#surface-2` container
 - **`onChange`** `function` — Callback fired when the selected value changes
 - **`onBlur`** `function` — Callback fired when the radio group loses focus
 - **`onFocus`** `function` — Callback fired when the radio group receives focus
@@ -75,7 +75,7 @@ The `mods` property accepts the following modifiers you can override:
 
 - `radio` - Traditional radio button appearance (default)
 - `button` - Button-style radio options with spacing
-- `tabs` - Connected tab-style buttons (compact, neutral styling)
+- `tabs` - Connected tab-style buttons (compact, clear styling)
 
 **Default Orientation:**
 - `radio` type: vertical
@@ -111,14 +111,12 @@ This ensures tab groups remain compact and cohesive.
 ### Button Type
 
 When using `type="button"`, you can customize the button appearance:
-- `outline` - Outlined buttons (default)
-- `neutral` - Neutral filled buttons
-- `primary` - Primary action buttons with smart styling: selected buttons use primary style, non-selected buttons automatically use secondary style
-- `clear` - Minimal buttons without background
+- `outline` - Outlined buttons (default); `isSelected` state adds brand-tinted fill
+- `clear` - Minimal buttons without background; `isSelected` state adds brand-tinted fill
+- `primary` - Primary action buttons with smart styling: selected buttons use primary style, non-selected buttons use outline with brand tint
 
 **Note:** 
-- The `buttonType` prop is ignored when `type="tabs"`. Tabs always use neutral styling for visual consistency.
-- The `secondary` type cannot be used directly. Use `primary` instead, which automatically applies secondary styling to non-selected buttons.
+- The `buttonType` prop is ignored when `type="tabs"`. Tabs always use `clear` styling for visual consistency.
 
 ## Examples
 
@@ -165,7 +163,7 @@ When using `type="button"`, you can customize the button appearance:
 ### Custom Button Type
 
 ```jsx
-{/* Primary buttonType: selected uses primary, non-selected uses secondary */}
+{/* Primary buttonType: selected uses primary, non-selected uses outline with brand tint */}
 <Radio.Group label="Action" type="button" buttonType="primary">
   <Radio value="save">Save</Radio>
   <Radio value="cancel">Cancel</Radio>

package/docs/components/fields/Select.md

@@ -218,10 +218,8 @@ Groups related options together with an optional heading.
 ### Types
 
 - `primary` - Primary emphasis styling
-- `secondary` - Secondary emphasis styling
-- `outline` - Outlined appearance
-- `neutral` - Neutral appearance
-- `clear` - Minimal appearance
+- `outline` - Outlined appearance; `isSelected` adds brand-tinted fill
+- `clear` - Minimal appearance; `isSelected` adds brand-tinted fill
 - `link` - Link-like appearance
 
 ### Sizes

package/docs/components/navigation/Tabs.md

@@ -20,6 +20,7 @@ An accessible tabbed interface for organizing content into multiple panels, show
 - **`defaultActiveKey`** `Key` — Initial active tab key for uncontrolled mode
 - **`type`** `'default' | 'narrow' | 'file' | 'radio'` (default: `'default'`) — Visual style variant
 - **`size`** `'xsmall' | 'small' | 'medium' | 'large'` (default: `'small'`) — Tab size
+- **`placement`** `'top' | 'bottom' | 'left' | 'right'` (default: `'top'`) — Where the tab bar sits relative to its panels. `top` / `bottom` keep the bar horizontal; `left` / `right` switch it to a vertical strip. The selection indicator, scrolling, fades, scroll arrows, and per-type visuals (radius, file-style shadow, dividers) all adapt automatically.
 - **`prerender`** `boolean` (default: `false`) — If true, all tab panels are rendered but hidden
 - **`keepMounted`** `boolean` (default: `false`) — If true, visited tab panels stay in DOM
 - **`label`** `string` (default: `'Tabs'`) — Accessible label for the tab list
@@ -45,7 +46,8 @@ An accessible tabbed interface for organizing content into multiple panels, show
 - **`tabPickerPosition`** `'prefix' | 'suffix'` (default: `suffix`) — Position of the tab picker
 - **`scrollArrowsPosition`** `'prefix' | 'suffix'` (default: `suffix`) — Position of the scroll arrows
 - **`hideTabListScroll`** `boolean` (default: `false`) — Visually hide the custom horizontal scrollbar in the tab list and skip its tracking logic. Does not affect tab picker, scroll arrows, or fade indicators.
-- **`tabListPadding`** `string` — Inline padding for the tab list container (e.g., `"2x"`)
+- **`tabListPadding`** `string` — Inline padding for the tab list container (e.g., `"2x"`). For horizontal placements it controls the start/end padding (along the strip); for vertical placements (`left`/`right`) it controls the padding on all four sides. Defaults to `1x` (horizontal default/narrow) and `.5x` (vertical default/narrow).
+- **`barStyles`** `Styles` — Custom styles for the tab bar (the `Bar` sub-element). Use this to target the strip itself; the `styles` prop targets the outer flex wrapper.
 - **`tabListStyles`** `Styles` — Custom styles for the tab list container
 - **`prefixStyles`** `Styles` — Custom styles for the prefix slot
 - **`suffixStyles`** `Styles` — Custom styles for the suffix slot
@@ -58,22 +60,23 @@ Supports [Base properties](../../BaseProperties.md)
 
 #### styles
 
-Customizes the root element of the Tabs component.
+Customizes the root flex wrapper of the Tabs component. The wrapper holds the tab `Bar` and the panels; visual ordering is controlled with `flex-direction` based on `placement`.
 
 **Sub-elements:**
 
+- `Bar` - The tab strip (Prefix + Scroll area + Suffix). Use `barStyles` or `styles={{ Bar: { ... } }}` to style it
 - `TabList` - The container holding the tab buttons
 - `Prefix` - Content rendered before the tab list
 - `Suffix` - Content rendered after the tab list
 - `ScrollWrapper` - Wrapper for scroll area and scrollbar positioning
 - `Scroll` - Scrollable area containing the tab container
-- `ScrollbarH` - Custom horizontal scrollbar indicator
+- `Scrollbar` - Custom tiny scrollbar indicator (axis-neutral — horizontal for `top` / `bottom` placements, vertical for `left` / `right`)
 
 ### Style Properties
 
 These properties allow direct style application without using the `styles` prop:
 
-- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
 - **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
 - **Block:** `border`, `radius`, `shadow`, `outline`
 
@@ -82,10 +85,11 @@ These properties allow direct style application without using the `styles` prop:
 The `mods` property accepts the following modifiers:
 
 - **`type`** `'default' \| 'narrow' \| 'file' \| 'radio'` — Current tab type
+- **`placement`** `'top' \| 'bottom' \| 'left' \| 'right'` — Current bar placement
 - **`deletable`** `boolean` — True when onDelete callback is provided
 - **`scrolling`** `boolean` — True when tabs are being scrolled
-- **`fade-left`** `boolean` — True when content is scrolled (left fade visible)
-- **`fade-right`** `boolean` — True when more content exists to the right
+- **`fade-start`** `boolean` — True when more content exists in the start direction (left for horizontal, top for vertical)
+- **`fade-end`** `boolean` — True when more content exists in the end direction (right for horizontal, bottom for vertical)
 - **`has-panels`** `boolean` — True when tabs have panel content
 
 For individual tabs:
@@ -119,6 +123,25 @@ For individual tabs:
 
 **Note:** Radio type supports `large` (default, 40px total) and `medium` (32px total) sizes, mapped to Item button sizes `medium` (32px) and `xsmall` (24px) respectively.
 
+### Placement / Vertical Tabs
+
+Use the `placement` prop to control where the tab bar sits relative to its panels. The default is `'top'` (shown in every example above); `'bottom'`, `'left'`, and `'right'` are also supported. For `'left'` and `'right'` the strip becomes vertical and the selection indicator, scrolling, fades, scroll arrows, and per-type visuals (radius, file-style shadow, dividers) all rotate to match.
+
+DOM order is always "bar then panels" — visual order is controlled internally via `flex-direction` (`column` / `column-reverse` / `row` / `row-reverse`) so the markup stays consistent regardless of placement.
+
+```jsx
+<Tabs placement="left" defaultActiveKey="overview">
+  <Tab key="overview" title="Overview">Overview content</Tab>
+  <Tab key="settings" title="Settings">Settings content</Tab>
+</Tabs>
+```
+
+#### Vertical tabs across types
+
+`narrow` only makes sense for a horizontal strip (it collapses horizontal
+label padding for a denser row). When `placement` is `'left'` or `'right'`,
+`type="narrow"` is coerced to `type="default"`.
+
 ## Compound Components
 
 ### Tab
@@ -788,14 +811,16 @@ Tabs work seamlessly inside Layout components. When placed in a `Layout` or `Lay
 ### Keyboard Navigation
 
 - `Tab` - Move focus into/out of the tab list
-- `ArrowLeft` / `ArrowRight` - Navigate between tabs
+- `ArrowLeft` / `ArrowRight` - Navigate between tabs (horizontal placement)
+- `ArrowUp` / `ArrowDown` - Navigate between tabs (vertical placement, `left` / `right`)
 - `Home` - Move to first tab
 - `End` - Move to last tab
 - `Enter` / `Space` - Activate focused tab
 - `Shift+F10` - Open tab menu (when menu is present)
 - `Delete` - Delete focused tab (when deletable)
 - `F2` - Start editing tab title (when editable)
-- `Alt+ArrowLeft` / `Alt+ArrowRight` - Reorder the focused tab (when `isReorderable`)
+- `Alt+ArrowLeft` / `Alt+ArrowRight` - Reorder the focused tab (when `isReorderable`, horizontal placement)
+- `Alt+ArrowUp` / `Alt+ArrowDown` - Reorder the focused tab (when `isReorderable`, vertical placement `left` / `right`)
 
 ### Screen Reader Support
 

package/docs/components/organisms/FileTabs.md

@@ -33,12 +33,12 @@ Supports [Base properties](../../BaseProperties.md).
 These properties allow direct style application without using the `styles` prop:
 
 - **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
-- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
 - **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
 - **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
 - **Color:** `color`, `fill`, `fade`, `image`
 - **Text:** `textTransform`, `fontWeight`, `fontStyle`
-- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
 
 ## Examples
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.138.6",
+  "version": "0.140.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {