@cube-dev/ui-kit 0.0.0-canary-1cb94e6 → 0.0.0-canary-82d6956

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1cb94e6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-82d6956 | 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.0.0-canary-1cb94e6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-82d6956 | 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.0.0-canary-1cb94e6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-82d6956 | 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.0.0-canary-1cb94e6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-82d6956 | 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.0.0-canary-1cb94e6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-82d6956 | 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.0.0-canary-1cb94e6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-82d6956 | 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.0.0-canary-1cb94e6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-82d6956 | 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.0.0-canary-1cb94e6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-82d6956 | 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.0.0-canary-1cb94e6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-82d6956 | 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.0.0-canary-1cb94e6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-82d6956 | 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.0.0-canary-1cb94e6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-82d6956 | 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.0.0-canary-1cb94e6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-82d6956 | 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.0.0-canary-1cb94e6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-82d6956 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-1cb94e6";
+const VERSION = "0.0.0-canary-82d6956";
 const TASTY_VERSION = "2.6.2";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/components/navigation/Tabs.md

@@ -20,7 +20,6 @@ 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
@@ -46,8 +45,7 @@ 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"`). 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.
+- **`tabListPadding`** `string` — Inline padding for the tab list container (e.g., `"2x"`)
 - **`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
@@ -60,23 +58,22 @@ Supports [Base properties](../../BaseProperties.md)
 
 #### styles
 
-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`.
+Customizes the root element of the Tabs component.
 
 **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
-- `Scrollbar` - Custom tiny scrollbar indicator (axis-neutral — horizontal for `top` / `bottom` placements, vertical for `left` / `right`)
+- `ScrollbarH` - Custom horizontal scrollbar indicator
 
 ### 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`, `scrollMargin`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
 - **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
 - **Block:** `border`, `radius`, `shadow`, `outline`
 
@@ -85,11 +82,10 @@ 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-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)
+- **`fade-left`** `boolean` — True when content is scrolled (left fade visible)
+- **`fade-right`** `boolean` — True when more content exists to the right
 - **`has-panels`** `boolean` — True when tabs have panel content
 
 For individual tabs:
@@ -123,25 +119,6 @@ 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
@@ -811,8 +788,7 @@ 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 (horizontal placement)
-- `ArrowUp` / `ArrowDown` - Navigate between tabs (vertical placement, `left` / `right`)
+- `ArrowLeft` / `ArrowRight` - Navigate between tabs
 - `Home` - Move to first tab
 - `End` - Move to last tab
 - `Enter` / `Space` - Activate focused tab

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`, `scrollMargin`
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
 - **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`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+- **Flow:** `flow`, `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.0.0-canary-1cb94e6",
+  "version": "0.0.0-canary-82d6956",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {