@cube-dev/ui-kit 0.0.0-canary-dda2a98 → 0.0.0-canary-0d6f826

package/dist/utils/promise.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | Cube Dev Team */
 //#region src/utils/promise.ts
 function timeout(ms = 30) {
 	return new Promise((resolve) => {

package/dist/utils/raf.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | Cube Dev Team */
 //#region src/utils/raf.ts
 /**
 * Chains N requestAnimationFrame calls and returns a cancel function.

package/dist/utils/random.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | Cube Dev Team */
 //#region src/utils/random.ts
 function random(min, max) {
 	const realMin = min < max ? min : max;

package/dist/utils/range.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | Cube Dev Team */
 //#region src/utils/range.ts
 function range(count) {
 	return Array.from({ length: count }, (_, i) => i);

package/dist/utils/react/RenderCache.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | Cube Dev Team */
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 

package/dist/utils/react/Slots.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 import { Children, cloneElement, createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/utils/react/chain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | Cube Dev Team */
 //#region src/utils/react/chain.ts
 /**
 * Calls all functions in the order they were chained with the same arguments.

package/dist/utils/react/disabledProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | Cube Dev Team */
 //#region src/utils/react/disabledProps.ts
 /**
 * Tags where `disabled` is a real HTML attribute. Browsers refuse to dispatch

package/dist/utils/react/forwardRefWithGenerics.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * A helper for creating forwardRef components with generic types.

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { getDisabledElementProps, omitActivationEventProps } from "./disabledProps.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | Cube Dev Team */
 import { useState } from "react";
 import { useFocus, useFocusVisible } from "react-aria";
 

package/dist/utils/react/isTextOnly.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | Cube Dev Team */
 import { Children, isValidElement } from "react";
 
 //#region src/utils/react/isTextOnly.ts

package/dist/utils/react/mapProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | Cube Dev Team */
 //#region src/utils/react/mapProps.ts
 /** Converts AriaButtonProps to CubeButtonProps */
 function ariaToCubeButtonProps(props) {

package/dist/utils/react/mergeProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { mergeIds } from "./useId.js";
 import { mergeStyles } from "@tenphi/tasty";

package/dist/utils/react/nullableValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | Cube Dev Team */
 //#region src/utils/react/nullableValue.ts
 function castNullableStringValue(props) {
 	return castNullableField(props, ["value", "defaultValue"], "string", (v) => String(v));

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | 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.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";
 

package/dist/utils/react/useBufferedValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useCallback, useRef, useState } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | 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.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | 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.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, useMemo, 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.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | 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.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | 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.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | 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-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | 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-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | 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-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | 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-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { useCallback, useContext, useEffect, useRef } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | 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-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | 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-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | 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-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | 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-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | 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-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | 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-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,7 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dda2a98 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d6f826 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-dda2a98";
-const TASTY_VERSION = "3.1.0";
+const VERSION = "0.0.0-canary-0d6f826";
+const TASTY_VERSION = "3.3.1";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	const tastyVersion = TASTY_VERSION;

package/docs/Colors.md

@@ -1,35 +1,24 @@
 # Colors
 
-Cube UI Kit color tokens are generated by Glaze from a shared OKHST palette.
-Every adaptive token includes light, dark, and high-contrast variants. Change
-the active scheme in the Storybook toolbar to review each example.
+Cube UI Kit color tokens are generated by Glaze from a shared OKHST palette. Every adaptive token includes light, dark, and high-contrast variants. Change the active scheme in the Storybook toolbar to review each example.
 
-The colors shown here come from the default seeds. Those seeds — brand hue,
-saturation, per-status hues — are tunable at runtime; see
-[Theming](./Theming.md) for a live playground.
+The colors shown here come from the default seeds. Those seeds — brand hue, saturation, per-status hues — are tunable at runtime; see [Theming](./Theming.md) for a live playground.
 
 ## Choosing a color pair
 
 Start with the surface, then choose a foreground designed for that surface:
 
-- On neutral surfaces, use the matching text family:
-  `#surface` + `#surface-text`, `#surface-2` + `#surface-2-text`, and so on.
-- On semantic tinted surfaces, use `#<theme>-surface-text` for a neutralized,
-  high-contrast foreground.
-- Use `#<theme>-accent-text` or `-soft` when the foreground should retain the
-  semantic hue, such as notification titles and links.
+- On neutral surfaces, use the matching text family: `#surface` + `#surface-text`, `#surface-2` + `#surface-2-text`, and so on.
+- On semantic tinted surfaces, use `#<theme>-surface-text` for a neutralized, high-contrast foreground.
+- Use `#<theme>-accent-text` or `-soft` when the foreground should retain the semantic hue, such as notification titles and links.
 - On solid accent fills, use `#<theme>-accent-surface-text`.
-- Do not select colors only because they look similar. Their names describe
-  the contrast relationship and intended role.
+- Do not select colors only because they look similar. Their names describe the contrast relationship and intended role.
 
-The text examples show each color with `t3m`, `t3`, and `t4`. Typography does
-not change the color pairing; it makes the foreground easier to evaluate at
-common UI sizes and weights.
+The text examples show each color with `t3m`, `t3`, and `t4`. Typography does not change the color pairing; it makes the foreground easier to evaluate at common UI sizes and weights.
 
 ## Neutral surfaces
 
-Neutral surfaces form the page, panel, and nested-container elevation ladder.
-Use the text tokens named for the selected surface whenever one exists.
+Neutral surfaces form the page, panel, and nested-container elevation ladder. Use the text tokens named for the selected surface whenever one exists.
 
 ## Semantic surfaces
 
@@ -37,45 +26,32 @@ Semantic surfaces support two deliberate foreground treatments.
 
 ### Surface text
 
-The surface-text family keeps the semantic hue subtle and prioritizes strong
-readability.
+The surface-text family keeps the semantic hue subtle and prioritizes strong readability.
 
 ### Accent text
 
-The accent-text family preserves more semantic color. This is the pairing used
-by notification and Item card styles.
+The accent-text family preserves more semantic color. This is the pairing used by notification and Item card styles.
 
 ## Solid accents and interaction states
 
-Solid accent fills are fixed brand colors with a dedicated light foreground.
-The numbered surface ramp represents default, hover, and pressed states and is
-shared by semantic themes.
+Solid accent fills are fixed brand colors with a dedicated light foreground. The numbered surface ramp represents default, hover, and pressed states and is shared by semantic themes.
 
 ## Disabled states
 
-Disabled pairs intentionally have lower contrast than active content. Use the
-neutral pair for low-emphasis controls and the accent-disabled pair for muted
-solid semantic controls. Do not use disabled text for active information or
-content that must meet normal text contrast requirements.
+Disabled pairs intentionally have lower contrast than active content. Use the neutral pair for low-emphasis controls and the accent-disabled pair for muted solid semantic controls. Do not use disabled text for active information or content that must meet normal text contrast requirements.
 
 ## Utility colors
 
-`#placeholder`, `#focus`, semantic accent icons, and `#overlay` have narrow
-roles. Keep them in those roles rather than treating them as general palette
-swatches.
+`#placeholder`, `#focus`, semantic accent icons, and `#overlay` have narrow roles. Keep them in those roles rather than treating them as general palette swatches.
 
 ## Code syntax
 
-Syntax tokens are calibrated as a group against `#surface`. Use the semantic
-token for each syntax role instead of assigning arbitrary palette colors.
+Syntax tokens are calibrated as a group against `#surface`. Use the semantic token for each syntax role instead of assigning arbitrary palette colors.
 
 ## Borders and shadows
 
-Borders use the `1bw` design-system width. Shadow geometry comes from
-`src/tokens/shadows.ts`; the `#shadow-sm`, `#shadow-md`, and `#shadow-lg`
-colors adapt with the active scheme.
+Borders use the `1bw` design-system width. Shadow geometry comes from `src/tokens/shadows.ts`; the `#shadow-sm`, `#shadow-md`, and `#shadow-lg` colors adapt with the active scheme.
 
 ## Scope
 
-This reference focuses on tokens intended for product UI. Internal loading-face
-colors and compatibility aliases are intentionally omitted.
+This reference focuses on tokens intended for product UI. Internal loading-face colors and compatibility aliases are intentionally omitted.

package/docs/ComplexLayout.md

@@ -64,6 +64,7 @@ Use `Layout.Panel` for side navigation. Panels are absolutely positioned and aut
 ```
 
 **Key props:**
+
 - `side` - Panel position: `"left"`, `"right"`, `"top"`, `"bottom"`
 - `size` - Panel width (for left/right) or height (for top/bottom)
 - `isOpen` / `onOpenChange` - Control panel visibility
@@ -86,6 +87,7 @@ Add `isResizable` to allow users to resize the panel.
 ```
 
 **Resize behavior:**
+
 - Drag the edge handle to resize
 - Double-click the handle to reset to default size
 - Use `minSize` and `maxSize` to constrain resize range
@@ -108,6 +110,7 @@ Use `sizeStorageKey` to persist the panel size in localStorage. The size will be
 ```
 
 **Notes:**
+
 - The `sizeStorageKey` must be unique across your application
 - Size is persisted after drag operations complete
 - Double-clicking to reset also updates the stored value
@@ -166,6 +169,7 @@ Use `Space` components to create three sections.
 ```
 
 **Header props:**
+
 - `title` - Page title
 - `subtitle` - Text below the title
 - `breadcrumbs` - Array of `[label, href]` tuples
@@ -222,6 +226,7 @@ Panels with `mode="sticky"` float over content without pushing it aside.
 ### Overlay Panel
 
 Panels with `mode="overlay"` show a backdrop and dismiss on:
+
 - Clicking the backdrop
 - Pressing Escape anywhere in the Layout
 - Moving focus to the main content area
@@ -264,6 +269,7 @@ Panels with `mode="dialog"` render as a modal dialog instead of inline.
 ```
 
 **Use cases:**
+
 - Mobile-responsive layouts where sidebars become modal dialogs
 - Settings panels that need full focus
 - Any panel that should overlay rather than push content
@@ -354,6 +360,7 @@ Use `Layout.Container` for content that should be horizontally centered with a c
 ```
 
 **Use cases:**
+
 - Article or documentation pages
 - Forms and settings pages
 - Any content that benefits from constrained width
@@ -371,6 +378,7 @@ Use `Layout.Center` for content that should be centered both horizontally and ve
 ```
 
 **Use cases:**
+
 - Empty states ("No items found")
 - Loading screens
 - Welcome/onboarding screens

package/docs/CreateComponent.md

@@ -38,6 +38,7 @@ function MyComponent(props: MyComponentProps) {
 ```
 
 **Filter options:**
+
 - `eventProps: true` - Include standard DOM event handlers (onClick, onFocus, etc.)
 - `labelable: true` - Include ARIA labeling properties
 - `propNames: Set<string>` - Include specific additional properties
@@ -96,7 +97,7 @@ import {
   filterBaseProps,
 } from '@tenphi/tasty';
 
-interface MyComponentProps 
+interface MyComponentProps
   extends AllBaseProps,
     ContainerStyleProps,
     TextStyleProps {
@@ -104,7 +105,7 @@ interface MyComponentProps
 
 function MyComponent(props: MyComponentProps) {
   const styles = extractStyles(props, [...CONTAINER_STYLES, ...TEXT_STYLES]);
-  
+
   return (
     <Element
       {...filterBaseProps(props, { eventProps: true })}
@@ -155,6 +156,7 @@ function MyComponent({ isLoading, mods, ...props }: MyComponentProps) {
 ```
 
 **Usage:**
+
 ```tsx
 <MyComponent mods={{ custom: true, highlighted: isHighlighted }} />
 // Renders: <div data-custom data-highlighted class="...">
@@ -169,7 +171,7 @@ const MyElement = tasty({
   styles: {
     display: 'flex',
     gap: '1x',
-    
+
     // Sub-element styles
     Icon: {
       preset: 'h3',
@@ -192,6 +194,7 @@ function MyComponent(props) {
 ```
 
 **Usage with style overrides:**
+
 ```tsx
 <MyComponent
   styles={{
@@ -204,6 +207,7 @@ function MyComponent(props) {
 ```
 
 **When to use sub-elements:**
+
 - Elements that should share the parent's state (hover, focus, disabled, etc.)
 - Tightly coupled UI parts (icon + label, title + subtitle)
 - When you want a single `styles` prop to control everything
@@ -224,7 +228,7 @@ interface MyComponentProps extends AllBaseProps {
 
 function MyComponent({ iconStyles, labelStyles, ...props }: MyComponentProps) {
   const styles = extractStyles(props, CONTAINER_STYLES);
-  
+
   return (
     <Element styles={styles}>
       <IconElement styles={iconStyles} />
@@ -235,6 +239,7 @@ function MyComponent({ iconStyles, labelStyles, ...props }: MyComponentProps) {
 ```
 
 **When to use additional style properties:**
+
 - Inner elements need independent state management (separate hover, focus behaviors)
 - Complex components with multiple logical sections
 - Components that need fine-grained styling control
@@ -251,7 +256,7 @@ import { useRef } from 'react';
 function MyButton(props) {
   const ref = useRef();
   const { buttonProps } = useButton(props, ref);
-  
+
   return (
     <Element
       {...buttonProps}
@@ -267,6 +272,7 @@ function MyButton(props) {
 ### Example 1: Block Component (Basic)
 
 This demonstrates a basic component with:
+
 - Base properties support
 - All container style properties
 - Clean, minimal implementation
@@ -308,6 +314,7 @@ export const Block = forwardRef(function Block(props: CubeBlockProps, ref) {
 ### Example 2: Action Component (Advanced)
 
 This demonstrates advanced features:
+
 - React Aria integration (`useButton`)
 - Complex modifier handling
 - Multiple style property sets
@@ -384,7 +391,7 @@ export const Action = forwardRef(function Action(
     },
     domRef,
   );
-  
+
   const { hoverProps, isHovered } = useHover({ isDisabled });
 
   const styles = extractStyles(props, STYLE_PROPS);
@@ -414,7 +421,7 @@ export const Action = forwardRef(function Action(
 For input components that need to integrate with forms, see the [Field documentation](./components/form/Field.md) for comprehensive guidance on:
 
 - Form state management
-- Validation integration  
+- Validation integration
 - Label and help text handling
 - Error state management
 - Accessibility requirements for form controls
@@ -455,7 +462,7 @@ When creating a new component, consider:
 
 - [ ] Base properties support (`AllBaseProps`, `filterBaseProps`)
 - [ ] Appropriate style property sets
-- [ ] Modifier (`mods`) support for state-based styling  
+- [ ] Modifier (`mods`) support for state-based styling
 - [ ] Additional style properties for inner elements
 - [ ] Sub-element definitions for targeted styling
 - [ ] React Aria integration for accessibility