@skewedaspect/sleekspace-ui 0.7.0 → 0.8.0

package/dist/{components → src/components}/Select/SkSelect.vue.d.ts

@@ -1,4 +1,4 @@
-import { ComponentCustomColors } from '../../types';
+import { ComponentCustomColors } from '../../../types';
 import { SkSelectKind, SkSelectSize } from './types';
 export interface SkSelectComponentProps extends ComponentCustomColors {
     /**

package/dist/{components → src/components}/Select/SkSelectItem.vue.d.ts

@@ -24,9 +24,7 @@ declare function __VLS_template(): {
                 readonly asChild?: boolean | undefined;
                 readonly as?: (import('reka-ui').AsTag | import('vue').Component) | undefined;
             } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
-            $attrs: {
-                [x: string]: unknown;
-            };
+            $attrs: import('vue').Attrs;
             $refs: {
                 [x: string]: unknown;
             };
@@ -38,9 +36,7 @@ declare function __VLS_template(): {
             $host: Element | null;
             $emit: (event: string, ...args: any[]) => void;
             $el: any;
-            $options: import('vue').ComponentOptionsBase<Readonly<import('reka-ui').SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
-                as: import('reka-ui').AsTag | import('vue').Component;
-            }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            $options: import('vue').ComponentOptionsBase<Readonly<import('reka-ui').SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
                 beforeCreate?: (() => void) | (() => void)[];
                 created?: (() => void) | (() => void)[];
                 beforeMount?: (() => void) | (() => void)[];
@@ -60,9 +56,7 @@ declare function __VLS_template(): {
             $forceUpdate: () => void;
             $nextTick: typeof import('vue').nextTick;
             $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
-        } & Readonly<{
-            as: import('reka-ui').AsTag | import('vue').Component;
-        }> & Omit<Readonly<import('reka-ui').SelectItemTextProps> & Readonly<{}>, "as"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+        } & Readonly<{}> & Omit<Readonly<import('reka-ui').SelectItemTextProps> & Readonly<{}>, never> & {} & import('vue').ComponentCustomProperties & {} & {
             $slots: {
                 default?: (props: {}) => any;
             };
@@ -81,9 +75,7 @@ declare const __VLS_component: import('vue').DefineComponent<SkSelectItemCompone
             readonly asChild?: boolean | undefined;
             readonly as?: (import('reka-ui').AsTag | import('vue').Component) | undefined;
         } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
-        $attrs: {
-            [x: string]: unknown;
-        };
+        $attrs: import('vue').Attrs;
         $refs: {
             [x: string]: unknown;
         };
@@ -95,9 +87,7 @@ declare const __VLS_component: import('vue').DefineComponent<SkSelectItemCompone
         $host: Element | null;
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
-        $options: import('vue').ComponentOptionsBase<Readonly<import('reka-ui').SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
-            as: import('reka-ui').AsTag | import('vue').Component;
-        }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+        $options: import('vue').ComponentOptionsBase<Readonly<import('reka-ui').SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
             beforeMount?: (() => void) | (() => void)[];
@@ -117,9 +107,7 @@ declare const __VLS_component: import('vue').DefineComponent<SkSelectItemCompone
         $forceUpdate: () => void;
         $nextTick: typeof import('vue').nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
-    } & Readonly<{
-        as: import('reka-ui').AsTag | import('vue').Component;
-    }> & Omit<Readonly<import('reka-ui').SelectItemTextProps> & Readonly<{}>, "as"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+    } & Readonly<{}> & Omit<Readonly<import('reka-ui').SelectItemTextProps> & Readonly<{}>, never> & {} & import('vue').ComponentCustomProperties & {} & {
         $slots: {
             default?: (props: {}) => any;
         };

package/dist/{components → src/components}/Select/types.d.ts

@@ -1,3 +1,3 @@
-import { ComponentKind, ComponentSize } from '../../types';
+import { ComponentKind, ComponentSize } from '../../../types';
 export type SkSelectKind = ComponentKind;
 export type SkSelectSize = ComponentSize;

package/dist/{components → src/components}/Sidebar/SkSidebar.vue.d.ts

@@ -1,5 +1,5 @@
 import { SkSidebarKind, SkSidebarSide } from './types';
-import { ComponentCustomColors } from '../../types';
+import { ComponentCustomColors } from '../../../types';
 export interface SkSidebarComponentProps extends ComponentCustomColors {
     /**
      * Semantic color kind that controls the sidebar panel's background, border, and text colors.
@@ -21,6 +21,13 @@ export interface SkSidebarComponentProps extends ComponentCustomColors {
      * @default 'left'
      */
     side?: SkSidebarSide;
+    /**
+     * Opts out of the coarse-pointer touch-target floor on sidebar items (44px minimum on
+     * touch devices). Use in compact navigation contexts where density matters more than
+     * tap comfort. No effect on fine-pointer (mouse) devices.
+     * @default false
+     */
+    dense?: boolean;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -33,8 +40,9 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<SkSidebarComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkSidebarComponentProps> & Readonly<{}>, {
     kind: SkSidebarKind;
-    width: string;
+    dense: boolean;
     side: SkSidebarSide;
+    width: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/{components → src/components}/Sidebar/types.d.ts

@@ -1,3 +1,3 @@
-import { ComponentKind } from '../../types';
+import { ComponentKind } from '../../../types';
 export type SkSidebarKind = ComponentKind;
 export type SkSidebarSide = 'left' | 'right';

package/dist/{components → src/components}/Slider/SkSlider.vue.d.ts

@@ -1,4 +1,4 @@
-import { ComponentKind } from '../../types';
+import { ComponentKind } from '../../../types';
 import { SkSliderOrientation, SkSliderSize } from './types';
 export interface SkSliderComponentProps {
     /**

package/dist/{components → src/components}/Slider/types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentKind, ComponentSize } from '../../types';
+import { ComponentKind, ComponentSize } from '../../../types';
 /** Slider size */
 export type SkSliderSize = ComponentSize;
 /** Slider orientation */

package/dist/{components → src/components}/Spinner/SkSpinner.vue.d.ts

@@ -1,4 +1,4 @@
-import { ComponentKind } from '../../types';
+import { ComponentKind } from '../../../types';
 import { SkSpinnerSize, SkSpinnerVariant } from './types';
 export interface SkSpinnerComponentProps {
     /**

package/dist/{components → src/components}/Spinner/types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentKind, ComponentSize } from '../../types';
+import { ComponentKind, ComponentSize } from '../../../types';
 /** Spinner animation variant */
 export type SkSpinnerVariant = 'circular' | 'dots' | 'crosshair';
 /** Spinner size */

package/dist/{components → src/components}/Splitter/types.d.ts

@@ -1,3 +1,3 @@
-import { ComponentKind } from '../../types';
+import { ComponentKind } from '../../../types';
 export type SkSplitterKind = ComponentKind;
 export type SkSplitterDirection = 'horizontal' | 'vertical';

package/dist/{components → src/components}/Switch/SkSwitch.vue.d.ts

@@ -1,4 +1,4 @@
-import { ComponentCustomColors } from '../../types';
+import { ComponentCustomColors } from '../../../types';
 import { SkSwitchKind, SkSwitchSize } from './types';
 export interface SkSwitchComponentProps extends ComponentCustomColors {
     /**

package/dist/{components → src/components}/Switch/types.d.ts

@@ -1,3 +1,3 @@
-import { ComponentKind, ComponentSize } from '../../types';
+import { ComponentKind, ComponentSize } from '../../../types';
 export type SkSwitchKind = ComponentKind;
 export type SkSwitchSize = ComponentSize;

package/dist/{components → src/components}/Table/SkTable.vue.d.ts

@@ -1,5 +1,5 @@
 import { SkTableKind, SkTableVariant } from './types';
-import { ComponentCustomColors } from '../../types';
+import { ComponentCustomColors } from '../../../types';
 export interface SkTableComponentProps extends ComponentCustomColors {
     /**
      * Semantic color kind that controls header backgrounds and accent colors. The kind

package/dist/{components → src/components}/Table/types.d.ts

@@ -1,3 +1,3 @@
-import { ComponentKind } from '../../types';
+import { ComponentKind } from '../../../types';
 export type SkTableKind = ComponentKind;
 export type SkTableVariant = 'default' | 'compact' | 'comfortable';

package/dist/{components → src/components}/Tabs/SkTab.vue.d.ts

@@ -1,4 +1,4 @@
-import { ComponentKind } from '../../types';
+import { ComponentKind } from '../../../types';
 export interface SkTabComponentProps {
     /**
      * Unique identifier that links this tab trigger to its corresponding `SkTabPanel`. The `name`

package/dist/{components → src/components}/Tabs/SkTabs.vue.d.ts

@@ -1,5 +1,5 @@
 import { SkTabsOrientation, SkTabsPlacement } from './types';
-import { ComponentCustomColors, ComponentKind } from '../../types';
+import { ComponentCustomColors, ComponentKind } from '../../../types';
 export interface SkTabsComponentProps extends ComponentCustomColors {
     /**
      * The currently active tab identifier, matching the `name` prop of the corresponding `SkTab`
@@ -48,8 +48,8 @@ declare const __VLS_component: import('vue').DefineComponent<SkTabsComponentProp
 }>, {
     kind: ComponentKind;
     orientation: SkTabsOrientation;
-    placement: SkTabsPlacement;
     flush: boolean;
+    placement: SkTabsPlacement;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/{components → src/components}/Tag/SkTag.vue.d.ts

@@ -1,4 +1,4 @@
-import { ComponentCustomColors, ComponentKind } from '../../types';
+import { ComponentCustomColors, ComponentKind } from '../../../types';
 import { SkTagSize, SkTagVariant } from './types';
 export interface SkTagComponentProps extends ComponentCustomColors {
     /**

package/dist/{components → src/components}/TagsInput/SkTagsInput.vue.d.ts

@@ -1,4 +1,4 @@
-import { ComponentCustomColors } from '../../types';
+import { ComponentCustomColors } from '../../../types';
 import { SkTagsInputKind, SkTagsInputSize } from './types';
 export interface SkTagsInputComponentProps extends ComponentCustomColors {
     /**

package/dist/{components → src/components}/TagsInput/types.d.ts

@@ -1,3 +1,3 @@
-import { ComponentKind, ComponentSize } from '../../types';
+import { ComponentKind, ComponentSize } from '../../../types';
 export type SkTagsInputKind = ComponentKind;
 export type SkTagsInputSize = ComponentSize;

package/dist/{components → src/components}/Textarea/SkTextarea.vue.d.ts

@@ -1,4 +1,4 @@
-import { ComponentCustomColors } from '../../types';
+import { ComponentCustomColors } from '../../../types';
 import { SkTextareaKind, SkTextareaSize } from './types';
 export interface SkTextareaComponentProps extends ComponentCustomColors {
     /**

package/dist/{components → src/components}/Textarea/types.d.ts

@@ -1,3 +1,3 @@
-import { ComponentKind, ComponentSize } from '../../types';
+import { ComponentKind, ComponentSize } from '../../../types';
 export type SkTextareaKind = ComponentKind;
 export type SkTextareaSize = ComponentSize;

package/dist/{components → src/components}/Toolbar/types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentKind } from '../../types';
+import { ComponentKind } from '../../../types';
 export type SkToolbarKind = ComponentKind;
 export type SkToolbarOrientation = 'horizontal' | 'vertical';
 export type SkToolbarToggleType = 'single' | 'multiple';

package/dist/{components → src/components}/Tooltip/SkTooltip.vue.d.ts

@@ -1,4 +1,4 @@
-import { ComponentCustomColors, ComponentKind } from '../../types';
+import { ComponentCustomColors, ComponentKind } from '../../../types';
 import { SkTooltipSide } from './types';
 export interface SkTooltipComponentProps extends ComponentCustomColors {
     /**

package/dist/{components → src/components}/Tooltip/types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentKind, ComponentVariant } from '../../types';
+import { ComponentKind, ComponentVariant } from '../../../types';
 export type SkTooltipKind = ComponentKind;
 export type SkTooltipVariant = ComponentVariant;
 export type SkTooltipSide = 'top' | 'right' | 'bottom' | 'left';

package/dist/{components → src/components}/TreeView/SkTreeView.vue.d.ts

@@ -1,8 +1,8 @@
 import { SkTreeViewDefaultExpanded, SkTreeViewKind } from './types';
-export interface SkTreeViewComponentProps {
-    items: T[];
-    getKey: (item: T) => string;
-    modelValue?: T | T[];
+export interface SkTreeViewComponentProps<TItem extends Record<string, unknown> = Record<string, unknown>> {
+    items: TItem[];
+    getKey: (item: TItem) => string;
+    modelValue?: TItem | TItem[];
     multiple?: boolean;
     propagateSelect?: boolean;
     kind?: SkTreeViewKind;
@@ -13,7 +13,7 @@ export interface SkTreeViewComponentProps {
 declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly "onUpdate:modelValue"?: ((value: T | T[]) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & SkTreeViewComponentProps & Partial<{}>> & import('vue').PublicProps;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & SkTreeViewComponentProps<T> & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {

package/dist/{components → src/components}/TreeView/types.d.ts

@@ -1,3 +1,3 @@
-import { ComponentKind } from '../../types';
+import { ComponentKind } from '../../../types';
 export type SkTreeViewKind = ComponentKind;
 export type SkTreeViewDefaultExpanded = 'all' | 'none' | string[];

package/dist/src/composables/useFocusTrap.d.ts

@@ -0,0 +1,17 @@
+import { Ref } from 'vue';
+export interface UseFocusTrapOptions {
+    /** When true, the trap is active: focus moves inside and tab cycling is constrained. */
+    active: Ref<boolean>;
+    /** Element whose descendants form the trap region. */
+    container: Ref<HTMLElement | null>;
+    /**
+     * Optional callback fired when the user presses Escape. Most consumers will use this to
+     * close the modal/drawer.
+     */
+    onEscape?: () => void;
+}
+/**
+ * Trap focus inside a container while `active` is true. Restores focus to the previously
+ * active element when deactivated.
+ */
+export declare function useFocusTrap(options: UseFocusTrapOptions): void;

package/dist/src/composables/usePageDrawer.d.ts

@@ -0,0 +1,35 @@
+import { Ref } from 'vue';
+export type PageDrawerSide = 'sidebar' | 'aside';
+export interface PageDrawerContext {
+    /** Whether the drawer is currently open. */
+    isOpen: Ref<boolean>;
+    /** Whether drawer mode is actually available (false on purely persistent layouts). */
+    isAvailable: Ref<boolean>;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+export interface PageDrawersContext {
+    sidebar: PageDrawerContext;
+    aside: PageDrawerContext;
+}
+/**
+ * Expose drawer state for both the sidebar and aside from SkPage so descendants (like toggle
+ * buttons) can wire into either without prop drilling.
+ */
+export declare function providePageDrawers(sidebar: {
+    isOpen: Ref<boolean>;
+    isAvailable: Ref<boolean>;
+    setOpen: (value: boolean) => void;
+}, aside: {
+    isOpen: Ref<boolean>;
+    isAvailable: Ref<boolean>;
+    setOpen: (value: boolean) => void;
+}): PageDrawersContext;
+/**
+ * Consume drawer state inside SkPage. Returns a safe no-op context when used outside SkPage
+ * so components like SkPageSidebarToggle can still render without throwing.
+ *
+ * @param side - Which drawer to bind to. Defaults to the left sidebar.
+ */
+export declare function usePageDrawer(side?: PageDrawerSide): PageDrawerContext;

package/dist/src/composables/usePortalContext.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/{index.d.ts → src/index.d.ts}

@@ -39,6 +39,7 @@ import { default as SkModal, SkModalComponentProps } from './components/Modal/Sk
 import { default as SkNavBar, SkNavBarComponentProps } from './components/NavBar/SkNavBar.vue';
 import { default as SkNumberInput, SkNumberInputComponentProps } from './components/NumberInput/SkNumberInput.vue';
 import { default as SkPage, SkPageComponentProps } from './components/Page/SkPage.vue';
+import { default as SkPageSidebarToggle, SkPageSidebarToggleComponentProps } from './components/Page/SkPageSidebarToggle.vue';
 import { default as SkPagination, SkPaginationComponentProps } from './components/Pagination/SkPagination.vue';
 import { default as SkPaginationItem, SkPaginationItemComponentProps } from './components/Pagination/SkPaginationItem.vue';
 import { default as SkPanel, SkPanelComponentProps } from './components/Panel/SkPanel.vue';
@@ -165,6 +166,7 @@ export { SkModal, type SkModalComponentProps };
 export { SkNavBar, type SkNavBarComponentProps };
 export { SkNumberInput, type SkNumberInputComponentProps };
 export { SkPage, type SkPageComponentProps };
+export { SkPageSidebarToggle, type SkPageSidebarToggleComponentProps };
 export { SkPagination, type SkPaginationComponentProps };
 export { SkPaginationItem, type SkPaginationItemComponentProps };
 export { SkPanel, type SkPanelComponentProps };

package/dist/src/styles/mixins/fluidSize.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tokens.css

@@ -444,6 +444,66 @@
   --sk-scrollbar-thumb-min-size: 40px;
 }
 
+/**
+ * Foundation Tokens - Breakpoints
+ *
+ * Single-source breakpoint scale shared between @media (viewport) and
+ * @container (component) queries. CSS custom properties are exposed for
+ * consumer visibility and JS access; SCSS-level values live in
+ * mixins/_responsive.scss and drive the media-up/container-up mixins.
+ *
+ * Scale rationale:
+ *   sm ( 640px) - phones held landscape / narrow tablets
+ *   md (1024px) - tablets / small laptop -- persistent sidebar threshold
+ *   lg (1280px) - standard laptop / desktop
+ *   xl (1536px) - large desktop / ultrawide
+ */
+:root {
+  /* ===================================================================
+   * Viewport Breakpoints
+   * =================================================================== */
+  --sk-bp-sm: 640px;
+  --sk-bp-md: 1024px;
+  --sk-bp-lg: 1280px;
+  --sk-bp-xl: 1536px;
+}
+
+/**
+ * Foundation Tokens - Z-Index Stacking Scale
+ *
+ * One scale every SleekSpace component layers against so portaled content stacks in a
+ * predictable, documented order. Custom consumer layers can slot in between tokens by
+ * picking a number within the reserved gap.
+ *
+ * Reading order (bottom to top):
+ *   sticky        100 - App-shell chrome that sits above the flow (sticky navbar / footer)
+ *   drawer-scrim  900 - Dim + blur layer behind an open drawer
+ *   drawer        901 - SkPage sidebar / aside drawer
+ *   modal-scrim  1000 - Dim layer behind an open modal
+ *   modal        1001 - SkModal content -- must be above drawer so modals launched from
+ *                       inside a drawer render on top
+ *   popover      1100 - SkPopover (floating anchored surface)
+ *   dropdown     1100 - SkDropdown + SkListbox menus (same layer as popover; a menu opened
+ *                       inside a modal renders above the modal)
+ *   tooltip      1200 - SkTooltip -- higher than menus so a tooltip on a menu item stays
+ *                       visible
+ *   toast        1300 - Ephemeral top-of-stack notifications
+ */
+:root {
+  /* ===================================================================
+   * Layering Scale
+   * =================================================================== */
+  --sk-z-sticky: 100;
+  --sk-z-drawer-scrim: 900;
+  --sk-z-drawer: 901;
+  --sk-z-modal-scrim: 1000;
+  --sk-z-modal: 1001;
+  --sk-z-popover: 1100;
+  --sk-z-dropdown: 1100;
+  --sk-z-tooltip: 1200;
+  --sk-z-toast: 1300;
+}
+
 /* ===================================================================
  * Semantic Tokens
  * Contextual meanings that reference foundation tokens