@cck-ui/core 0.9.0 → 0.11.0

package/esm/index.mjs

@@ -62,6 +62,8 @@ import { CContainer } from "./components/container/index.mjs";
 import { CCol, CGrid } from "./components/grid/index.mjs";
 import { CGroup } from "./components/group/index.mjs";
 import { CSimpleGrid } from "./components/simple-grid/index.mjs";
+import { CSpace } from "./components/space/index.mjs";
+import { CSplitter, CSplitterPane } from "./components/splitter/index.mjs";
 import { CStack } from "./components/stack/index.mjs";
 import { CText } from "./components/text/index.mjs";
 //#region packages/@cck-ui/core/src/index.ts
@@ -80,6 +82,8 @@ const components = [
 	CGroup,
 	CLoader,
 	CSimpleGrid,
+	CSpace,
+	CSplitter,
 	CStack,
 	CText,
 	CTransition,
@@ -93,6 +97,6 @@ const CckUI = { install(app) {
 	});
 } };
 //#endregion
-export { CAspectRatio, CBox, CButton, CButtonGroup, CButtonGroupSection, transitions as CCK_TRANSITIONS, CCenter, CCol, CContainer, CDefaultLoaders, CGrid, CGroup, CLoader, CONFIG_KEY, CSimpleGrid, CStack, CText, CTransition, CckConfigProvider, CckUI, CckUI as default, DEFAULT_THEME, FOCUS_CLASS_NAMES, STYLE_PROPS_DATA, THEME_KEY, UnstyledButton, alpha, camelToKebabCase, colorsTuple, createTheme, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultVariantColorsResolver, em, extractStyleProps, filterProps, getBaseValue, getBreakpointValue, getCSSColorVariables, getComponentName, getFontSize, getGradient, getLineHeight, getPrimaryShade, getRadius, getShadow, getSize, getSortedBreakpoints, getSpacing, getThemeColor, getTransitionProps, hashStyleProps, isLightColor, isNumber, isNumberLike, isString, isStringNumber, isUndefined, isVirtualColor, keys, luminance, mergeThemeOverrides, normalizeNumberLikeStringProp, numberLikeStringToNumber, parseStyleProps, parseThemeColor, px, rem, resolveClassNames, resolveStyles, responsiveStyleManager, rgb, rgba, stylesToString, toRgba, useCckClassNamesPrefix, useCckColorScheme, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useComponentProps, useConfigContext, useProviderColorScheme, useRandomClassName, useStyles, virtualColor, withClasses, withExtend, withInstall, withPropsDefaultSetter, withPropsFactory, withVarsResolver };
+export { CAspectRatio, CBox, CButton, CButtonGroup, CButtonGroupSection, transitions as CCK_TRANSITIONS, CCenter, CCol, CContainer, CDefaultLoaders, CGrid, CGroup, CLoader, CONFIG_KEY, CSimpleGrid, CSpace, CSplitter, CSplitterPane, CStack, CText, CTransition, CckConfigProvider, CckUI, CckUI as default, DEFAULT_THEME, FOCUS_CLASS_NAMES, STYLE_PROPS_DATA, THEME_KEY, UnstyledButton, alpha, camelToKebabCase, colorsTuple, createTheme, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultVariantColorsResolver, em, extractStyleProps, filterProps, getBaseValue, getBreakpointValue, getCSSColorVariables, getComponentName, getFontSize, getGradient, getLineHeight, getPrimaryShade, getRadius, getShadow, getSize, getSortedBreakpoints, getSpacing, getThemeColor, getTransitionProps, hashStyleProps, isLightColor, isNumber, isNumberLike, isString, isStringNumber, isUndefined, isVirtualColor, keys, luminance, mergeThemeOverrides, normalizeNumberLikeStringProp, numberLikeStringToNumber, parseStyleProps, parseThemeColor, px, rem, resolveClassNames, resolveStyles, responsiveStyleManager, rgb, rgba, stylesToString, toRgba, useCckClassNamesPrefix, useCckColorScheme, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useComponentProps, useConfigContext, useProviderColorScheme, useRandomClassName, useStyles, virtualColor, withClasses, withExtend, withInstall, withPropsDefaultSetter, withPropsFactory, withVarsResolver };
 
 //# sourceMappingURL=index.mjs.map

package/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport {\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCol,\n  CContainer,\n  CGrid,\n  CGroup,\n  CLoader,\n  CSimpleGrid,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n} from './components'\nimport { CckConfigProvider, CBox } from './core'\n\nconst INSTALLED_KEY = Symbol('INSTALLED_KEY')\n\nconst components = [\n  CckConfigProvider,\n  CBox,\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCol,\n  CContainer,\n  CGrid,\n  CGroup,\n  CLoader,\n  CSimpleGrid,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n]\n\nconst CckUI: Plugin = {\n  install(app: App) {\n    if ((app as any)[INSTALLED_KEY]) {\n      return\n    }\n    ;(app as any)[INSTALLED_KEY] = true\n    components.forEach((c) => {\n      if (c.name) {\n        app.component(c.name, c)\n      }\n    })\n  },\n}\n\nexport default CckUI\nexport { CckUI }\n\nexport * from './components'\nexport * from './core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,gBAAgB,OAAO,eAAe;AAE5C,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,QAAgB,EACpB,QAAQ,KAAU;CAChB,IAAK,IAAY,gBACf;CAED,IAAa,iBAAiB;CAC/B,WAAW,SAAS,MAAM;EACxB,IAAI,EAAE,MACJ,IAAI,UAAU,EAAE,MAAM,CAAC;CAE3B,CAAC;AACH,EACF"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport {\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCol,\n  CContainer,\n  CGrid,\n  CGroup,\n  CLoader,\n  CSimpleGrid,\n  CSpace,\n  CSplitter,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n} from './components'\nimport { CckConfigProvider, CBox } from './core'\n\nconst INSTALLED_KEY = Symbol('INSTALLED_KEY')\n\nconst components = [\n  CckConfigProvider,\n  CBox,\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCol,\n  CContainer,\n  CGrid,\n  CGroup,\n  CLoader,\n  CSimpleGrid,\n  CSpace,\n  CSplitter,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n]\n\nconst CckUI: Plugin = {\n  install(app: App) {\n    if ((app as any)[INSTALLED_KEY]) {\n      return\n    }\n    ;(app as any)[INSTALLED_KEY] = true\n    components.forEach((c) => {\n      if (c.name) {\n        app.component(c.name, c)\n      }\n    })\n  },\n}\n\nexport default CckUI\nexport { CckUI }\n\nexport * from './components'\nexport * from './core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,gBAAgB,OAAO,eAAe;AAE5C,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,QAAgB,EACpB,QAAQ,KAAU;CAChB,IAAK,IAAY,gBACf;CAED,IAAa,iBAAiB;CAC/B,WAAW,SAAS,MAAM;EACxB,IAAI,EAAE,MACJ,IAAI,UAAU,EAAE,MAAM,CAAC;CAE3B,CAAC;AACH,EACF"}

package/lib/components/index.d.ts

@@ -6,6 +6,8 @@ export * from './grid';
 export * from './group';
 export * from './loader';
 export * from './simple-grid';
+export * from './space';
+export * from './splitter';
 export * from './stack';
 export * from './transition';
 export * from './text';

package/lib/components/space/index.d.ts

@@ -0,0 +1,6 @@
+import { SFCWithInstallAndClasses } from '../../core';
+import Space from './space.vue';
+import classes from './space.module.css';
+export declare const CSpace: SFCWithInstallAndClasses<typeof Space, typeof classes>;
+export default CSpace;
+export * from './space.types';

package/lib/components/space/space.types.d.ts

@@ -0,0 +1,9 @@
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
+export type SpaceStylesNames = 'root';
+export interface SpaceProps extends BoxProps, StylesApiProps<SpaceFactory>, /* @vue-ignore */ ElementProps<'div'> {
+}
+export type SpaceFactory = Factory<{
+    props: SpaceProps;
+    ref: HTMLDivElement;
+    stylesNames: SpaceStylesNames;
+}>;

package/lib/components/splitter/index.d.ts

@@ -0,0 +1,11 @@
+import { SFCWithInstallAndClasses } from '../../core';
+import Splitter from './splitter.vue';
+import SplitterPane from './splitter-pane/splitter-pane.vue';
+import classes from './splitter.module.css';
+export declare const CSplitterPane: SFCWithInstallAndClasses<typeof SplitterPane, typeof classes>;
+export declare const CSplitter: SFCWithInstallAndClasses<typeof Splitter, typeof classes> & {
+    CSplitterPane: typeof CSplitterPane;
+};
+export default CSplitter;
+export * from './splitter-pane/splitter-pane.types';
+export * from './splitter.types';

package/lib/components/splitter/splitter-pane/splitter-pane.types.d.ts

@@ -0,0 +1,47 @@
+import { SplitterPaneSize } from '@cck-ui/hooks';
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
+import { VNode } from 'vue';
+export type SplitterPaneStylesNames = 'pane';
+export interface SplitterPaneConfig {
+    uid: number;
+    getVNode: () => VNode;
+    setIndex: (index: number) => void;
+    defaultSize: SplitterPaneSize;
+    min?: SplitterPaneSize;
+    max?: SplitterPaneSize;
+    collapsible?: boolean;
+    collapseThreshold?: SplitterPaneSize;
+    size?: SplitterPaneSize;
+}
+export interface SplitterPaneProps extends BoxProps, CompoundStylesApiProps<SplitterPaneFactory>, ElementProps<'div'> {
+    /**
+     * @description Initial size, a `number`/`%` is a flexible size (shares leftover space), `px`/`rem` is a fixed size. A bare number is treated as a percentage.
+     */
+    defaultSize: SplitterPaneSize;
+    /**
+     * @description Minimum size in the same units as `defaultSize`
+     * @default 0
+     */
+    min?: SplitterPaneSize;
+    /**
+     * @description Maximum size in the same units as `defaultSize`, no limit by default
+     */
+    max?: SplitterPaneSize;
+    /**
+     * @description Whether this pane can be collapsed
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * @description Size below which the pane snaps to collapsed, defaults to `min`
+     */
+    collapseThreshold?: SplitterPaneSize;
+    /** @internal Index set by parent */
+    __index?: number;
+}
+export type SplitterPaneFactory = Factory<{
+    props: SplitterPaneProps;
+    ref: HTMLDivElement;
+    stylesNames: SplitterPaneStylesNames;
+    compound: true;
+}>;

package/lib/components/splitter/splitter.context.d.ts

@@ -0,0 +1,13 @@
+import type { SplitterPaneSize } from '@cck-ui/hooks';
+import type { GetStylesApi } from '../../core';
+import type { SplitterFactory } from './splitter.types';
+import { ComputedRef } from 'vue';
+export interface SplitterContextValue {
+    getStyles: GetStylesApi<SplitterFactory>;
+    sizes: ComputedRef<SplitterPaneSize[]>;
+    collapsed: ComputedRef<boolean[]>;
+    orientation: ComputedRef<'horizontal' | 'vertical'>;
+    getPaneStyle: (index: number) => Record<string, any>;
+}
+export declare function provideSplitterContext(value: SplitterContextValue): void;
+export declare function useSplitterContext(): SplitterContextValue;

package/lib/components/splitter/splitter.types.d.ts

@@ -0,0 +1,77 @@
+import { SplitterPaneSize, SplitterStep, UseSplitterRedistributeFn } from '@cck-ui/hooks';
+import { BoxProps, CColor, ElementProps, Factory, StylesApiProps } from '../../core';
+import { SplitterPaneStylesNames } from './splitter-pane/splitter-pane.types';
+export type SplitterStylesNames = 'root' | 'handle' | 'thumb' | SplitterPaneStylesNames;
+export type SplitterCssVariables = {
+    root: '--splitter-line-size' | '--splitter-handle-color';
+};
+export interface SplitterProps extends BoxProps, StylesApiProps<SplitterFactory>, /* @vue-ignore */ ElementProps<'div'> {
+    /**
+     * @description Layout direction
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * @description Controlled sizes, each value keeps the unit it was declared in (number/`%` flexible, `px`/`rem` fixed)
+     */
+    sizes?: SplitterPaneSize[];
+    /**
+     * @description Called during resize with updated sizes, each value keeps its declared unit
+     */
+    onSizeChange?: (sizes: SplitterPaneSize[]) => void;
+    /**
+     * @description Called when drag starts
+     */
+    onResizeStart?: (handleIndex: number) => void;
+    /**
+     * @description Called when drag ends
+     */
+    onResizeEnd?: (handleIndex: number, sizes: SplitterPaneSize[]) => void;
+    /**
+     * @description Called when a panel collapses or expands
+     */
+    onCollapseChange?: (panelIndex: number, collapsed: boolean) => void;
+    /**
+     * @description How to redistribute space when immediate neighbor is at its min/max
+     */
+    redistribute?: 'nearest' | 'equal' | UseSplitterRedistributeFn;
+    /**
+     * @description Keyboard step size, a `number`/`%` is a percentage, `px`/`rem` is resolved to pixels
+     * @default 1
+     */
+    step?: SplitterStep;
+    /**
+     * @description Shift + arrow step size, a `number`/`%` is a percentage, `px`/`rem` is resolved to pixels
+     * @default 10
+     */
+    shiftStep?: SplitterStep;
+    /**
+     * @description CSS value for separator line thickness between panes
+     * @default 2
+     */
+    lineSize?: number | string;
+    /**
+     * @description Key of `theme.colors` or any valid CSS color for the separator line
+     */
+    handleColor?: CColor;
+    /**
+     * @description Custom icon displayed in the handle thumb, by default uses grip icon based on orientation
+     */
+    handleIcon?: any;
+    /**
+     * @description Determines whether the thumb with grip icon is displayed on the handle
+     * @default true
+     */
+    withHandle?: boolean;
+    /**
+     * @description Restore the two panes adjacent to a handle to their default ratio (preserving their combined size) when the handle is double-clicked
+     * @default true
+     */
+    resetOnDoubleClick?: boolean;
+}
+export type SplitterFactory = Factory<{
+    props: SplitterProps;
+    ref: HTMLDivElement;
+    stylesNames: SplitterStylesNames;
+    vars: SplitterCssVariables;
+}>;

package/lib/components/splitter/splitter.utils.d.ts

@@ -0,0 +1,6 @@
+export declare const varsResolver: import("../..").VarsResolver<{
+    props: import("./splitter.types").SplitterProps;
+    ref: HTMLDivElement;
+    stylesNames: import("./splitter.types").SplitterStylesNames;
+    vars: import("./splitter.types").SplitterCssVariables;
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cck-ui/core",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Vue component library focused on usability, accessibility and developer experience",
   "homepage": "https://cck-ui.jackatlas.xyz",
   "license": "ISC",

package/styles/space.css

@@ -0,0 +1,2 @@
+.m_9b526549 {
+}

package/styles/space.layer.css

@@ -0,0 +1,3 @@
+@layer cck {.m_9b526549 {
+}
+}

package/styles/splitter.css

@@ -0,0 +1,76 @@
+.m_ea473028 {
+  display: flex;
+}
+
+  .m_ea473028:where([data-orientation='horizontal']) {
+    flex-direction: row;
+  }
+
+  .m_ea473028:where([data-orientation='vertical']) {
+    flex-direction: column;
+  }
+
+.m_ea4612ae {
+  flex-grow: 0;
+  flex-shrink: 1;
+  overflow: auto;
+}
+
+.m_636563ee {
+  flex: 0 0 var(--splitter-line-size, calc(0.125rem * var(--c-scale)));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  touch-action: none;
+  outline: none;
+  background-color: var(--splitter-handle-color, var(--c-color-body));
+}
+
+.m_636563ee:where([data-orientation='horizontal']) {
+    cursor: col-resize;
+  }
+
+.m_636563ee:where([data-orientation='vertical']) {
+    cursor: row-resize;
+  }
+
+.m_5eb7eb50 {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: calc(62.5rem * var(--c-scale));
+  color: var(--c-color-dimmed);
+  transition: color 100ms ease;
+}
+
+:where([data-c-color-scheme='light']) .m_5eb7eb50 {
+    background-color: var(--c-color-white);
+    border: calc(0.0625rem * var(--c-scale)) solid var(--c-color-gray-3);
+}
+
+:where([data-c-color-scheme='dark']) .m_5eb7eb50 {
+    background-color: var(--c-color-dark-6);
+    border: calc(0.0625rem * var(--c-scale)) solid var(--c-color-dark-4);
+}
+
+.m_5eb7eb50:where([data-orientation='horizontal']) {
+    width: calc(0.75rem * var(--c-scale));
+    height: calc(3.75rem * var(--c-scale));
+  }
+
+.m_5eb7eb50:where([data-orientation='vertical']) {
+    width: calc(3.75rem * var(--c-scale));
+    height: calc(0.75rem * var(--c-scale));
+  }
+
+.m_5eb7eb50 > svg {
+    width: 100%;
+    height: 100%;
+  }
+
+.m_636563ee:focus-visible .m_5eb7eb50 {
+    box-shadow: 0 0 0 calc(0.125rem * var(--c-scale)) var(--c-primary-color-filled);
+  }

package/styles/splitter.layer.css

@@ -0,0 +1,77 @@
+@layer cck {.m_ea473028 {
+  display: flex;
+}
+
+  .m_ea473028:where([data-orientation='horizontal']) {
+    flex-direction: row;
+  }
+
+  .m_ea473028:where([data-orientation='vertical']) {
+    flex-direction: column;
+  }
+
+.m_ea4612ae {
+  flex-grow: 0;
+  flex-shrink: 1;
+  overflow: auto;
+}
+
+.m_636563ee {
+  flex: 0 0 var(--splitter-line-size, calc(0.125rem * var(--c-scale)));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  touch-action: none;
+  outline: none;
+  background-color: var(--splitter-handle-color, var(--c-color-body));
+}
+
+.m_636563ee:where([data-orientation='horizontal']) {
+    cursor: col-resize;
+  }
+
+.m_636563ee:where([data-orientation='vertical']) {
+    cursor: row-resize;
+  }
+
+.m_5eb7eb50 {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: calc(62.5rem * var(--c-scale));
+  color: var(--c-color-dimmed);
+  transition: color 100ms ease;
+}
+
+:where([data-c-color-scheme='light']) .m_5eb7eb50 {
+    background-color: var(--c-color-white);
+    border: calc(0.0625rem * var(--c-scale)) solid var(--c-color-gray-3);
+}
+
+:where([data-c-color-scheme='dark']) .m_5eb7eb50 {
+    background-color: var(--c-color-dark-6);
+    border: calc(0.0625rem * var(--c-scale)) solid var(--c-color-dark-4);
+}
+
+.m_5eb7eb50:where([data-orientation='horizontal']) {
+    width: calc(0.75rem * var(--c-scale));
+    height: calc(3.75rem * var(--c-scale));
+  }
+
+.m_5eb7eb50:where([data-orientation='vertical']) {
+    width: calc(3.75rem * var(--c-scale));
+    height: calc(0.75rem * var(--c-scale));
+  }
+
+.m_5eb7eb50 > svg {
+    width: 100%;
+    height: 100%;
+  }
+
+.m_636563ee:focus-visible .m_5eb7eb50 {
+    box-shadow: 0 0 0 calc(0.125rem * var(--c-scale)) var(--c-primary-color-filled);
+  }
+}

package/styles.css

@@ -1130,6 +1130,86 @@ fieldset:disabled .c-active:active {
   grid-template-columns: repeat(auto-fit, minmax(var(--sg-min-col-width), 1fr));
 }
 
+.m_9b526549 {
+}
+
+.m_ea473028 {
+  display: flex;
+}
+
+  .m_ea473028:where([data-orientation='horizontal']) {
+    flex-direction: row;
+  }
+
+  .m_ea473028:where([data-orientation='vertical']) {
+    flex-direction: column;
+  }
+
+.m_ea4612ae {
+  flex-grow: 0;
+  flex-shrink: 1;
+  overflow: auto;
+}
+
+.m_636563ee {
+  flex: 0 0 var(--splitter-line-size, calc(0.125rem * var(--c-scale)));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  touch-action: none;
+  outline: none;
+  background-color: var(--splitter-handle-color, var(--c-color-body));
+}
+
+.m_636563ee:where([data-orientation='horizontal']) {
+    cursor: col-resize;
+  }
+
+.m_636563ee:where([data-orientation='vertical']) {
+    cursor: row-resize;
+  }
+
+.m_5eb7eb50 {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: calc(62.5rem * var(--c-scale));
+  color: var(--c-color-dimmed);
+  transition: color 100ms ease;
+}
+
+:where([data-c-color-scheme='light']) .m_5eb7eb50 {
+    background-color: var(--c-color-white);
+    border: calc(0.0625rem * var(--c-scale)) solid var(--c-color-gray-3);
+}
+
+:where([data-c-color-scheme='dark']) .m_5eb7eb50 {
+    background-color: var(--c-color-dark-6);
+    border: calc(0.0625rem * var(--c-scale)) solid var(--c-color-dark-4);
+}
+
+.m_5eb7eb50:where([data-orientation='horizontal']) {
+    width: calc(0.75rem * var(--c-scale));
+    height: calc(3.75rem * var(--c-scale));
+  }
+
+.m_5eb7eb50:where([data-orientation='vertical']) {
+    width: calc(3.75rem * var(--c-scale));
+    height: calc(0.75rem * var(--c-scale));
+  }
+
+.m_5eb7eb50 > svg {
+    width: 100%;
+    height: 100%;
+  }
+
+.m_636563ee:focus-visible .m_5eb7eb50 {
+    box-shadow: 0 0 0 calc(0.125rem * var(--c-scale)) var(--c-primary-color-filled);
+  }
+
 .m_f6a13507 {
   display: flex;
   flex-direction: column;

package/styles.layer.css

@@ -1130,6 +1130,86 @@ fieldset:disabled .c-active:active {
   grid-template-columns: repeat(auto-fit, minmax(var(--sg-min-col-width), 1fr));
 }
 
+.m_9b526549 {
+}
+
+.m_ea473028 {
+  display: flex;
+}
+
+  .m_ea473028:where([data-orientation='horizontal']) {
+    flex-direction: row;
+  }
+
+  .m_ea473028:where([data-orientation='vertical']) {
+    flex-direction: column;
+  }
+
+.m_ea4612ae {
+  flex-grow: 0;
+  flex-shrink: 1;
+  overflow: auto;
+}
+
+.m_636563ee {
+  flex: 0 0 var(--splitter-line-size, calc(0.125rem * var(--c-scale)));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  touch-action: none;
+  outline: none;
+  background-color: var(--splitter-handle-color, var(--c-color-body));
+}
+
+.m_636563ee:where([data-orientation='horizontal']) {
+    cursor: col-resize;
+  }
+
+.m_636563ee:where([data-orientation='vertical']) {
+    cursor: row-resize;
+  }
+
+.m_5eb7eb50 {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: calc(62.5rem * var(--c-scale));
+  color: var(--c-color-dimmed);
+  transition: color 100ms ease;
+}
+
+:where([data-c-color-scheme='light']) .m_5eb7eb50 {
+    background-color: var(--c-color-white);
+    border: calc(0.0625rem * var(--c-scale)) solid var(--c-color-gray-3);
+}
+
+:where([data-c-color-scheme='dark']) .m_5eb7eb50 {
+    background-color: var(--c-color-dark-6);
+    border: calc(0.0625rem * var(--c-scale)) solid var(--c-color-dark-4);
+}
+
+.m_5eb7eb50:where([data-orientation='horizontal']) {
+    width: calc(0.75rem * var(--c-scale));
+    height: calc(3.75rem * var(--c-scale));
+  }
+
+.m_5eb7eb50:where([data-orientation='vertical']) {
+    width: calc(3.75rem * var(--c-scale));
+    height: calc(0.75rem * var(--c-scale));
+  }
+
+.m_5eb7eb50 > svg {
+    width: 100%;
+    height: 100%;
+  }
+
+.m_636563ee:focus-visible .m_5eb7eb50 {
+    box-shadow: 0 0 0 calc(0.125rem * var(--c-scale)) var(--c-primary-color-filled);
+  }
+
 .m_f6a13507 {
   display: flex;
   flex-direction: column;