@cube-dev/ui-kit 0.139.0 → 0.140.0

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { useEffect, useRef } from "react";
 
 //#region src/utils/react/useCombinedRefs.ts

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { useEffect } from "react";
 import { useFocusVisible } from "react-aria";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, useRef } from "react";
 
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useIsDarwin.ts

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { useEventBus } from "./useEventBus.js";
 import { useEffect, useRef } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.139.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.139.0";
+const VERSION = "0.140.0";
 const TASTY_VERSION = "2.6.2";
 if (typeof window !== "undefined") {
 	const version = VERSION;

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.139.0",
+  "version": "0.140.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {