@skewedaspect/sleekspace-ui 0.7.1 → 0.8.0

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@skewedaspect/sleekspace-ui",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -467,6 +467,16 @@
               },
               "default": "false"
             },
+            {
+              "name": "dense",
+              "required": false,
+              "description": "Opts out of the coarse-pointer touch-target floor (44px minimum on touch devices).\nUse for tight toolbars, data tables, or other contexts where a compact size is preferable\nto the default touch-friendly floor. On fine-pointer devices (mouse) this has no effect.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "href",
               "required": false,
@@ -1834,6 +1844,9 @@
             }
           ],
           "slots": [
+            {
+              "name": "leading"
+            },
             {
               "name": "brand"
             },
@@ -1964,19 +1977,19 @@
           "description": "",
           "attributes": [
             {
-              "name": "sidebarPosition",
+              "name": "fixedHeader",
               "required": false,
-              "description": "Controls which side of the page the sidebar appears on. The sidebar slot content\nwill be positioned on the specified side, with the main content area filling the\nremaining space. Has no effect if the sidebar slot is not provided.",
+              "description": "When true, the header remains sticky at the top of the viewport while the main content scrolls.",
               "value": {
                 "kind": "expression",
-                "type": "SkPageSidebarPosition"
+                "type": "boolean"
               },
-              "default": "'left'"
+              "default": "false"
             },
             {
-              "name": "fixedHeader",
+              "name": "fixedFooter",
               "required": false,
-              "description": "When true, the header remains fixed at the top of the viewport while the main\ncontent scrolls beneath it. Useful for keeping navigation always accessible.\nThe content area adjusts its top padding to prevent overlap with the fixed header.",
+              "description": "When true, the footer remains sticky at the bottom of the viewport while the main content scrolls.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1984,46 +1997,148 @@
               "default": "false"
             },
             {
-              "name": "fixedFooter",
+              "name": "sidebarWidth",
               "required": false,
-              "description": "When true, the footer remains fixed at the bottom of the viewport while the main\ncontent scrolls above it. Useful for persistent action bars or important links.\nThe content area adjusts its bottom padding to prevent overlap with the fixed footer.",
+              "description": "Custom width for the sidebar (persistent and drawer). Accepts any CSS length. When not specified,\nuses the `--sk-page-sidebar-width` token default (16rem).",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               },
-              "default": "false"
+              "default": "undefined"
             },
             {
-              "name": "sidebarWidth",
+              "name": "asideWidth",
               "required": false,
-              "description": "Custom width for the sidebar region. Accepts any valid CSS width value (px, rem, %, etc.).\nWhen not specified, the sidebar uses the default width defined in the design tokens.\nOnly applies when the sidebar slot is provided.",
+              "description": "Custom width for the aside (persistent and drawer). Accepts any CSS length. When not specified,\nuses the `--sk-page-aside-width` token default (16rem).",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
               "default": "undefined"
             },
+            {
+              "name": "sidebarMode",
+              "required": false,
+              "description": "Sidebar rendering mode.\n- `auto`: persistent above `sidebarBreakpoint`, drawer below. Default.\n- `persistent`: always inline.\n- `drawer`: always off-canvas.",
+              "value": {
+                "kind": "expression",
+                "type": "SkPagePanelMode"
+              },
+              "default": "'auto'"
+            },
+            {
+              "name": "asideMode",
+              "required": false,
+              "description": "Aside rendering mode. Mirror of `sidebarMode` for the right-side panel.",
+              "value": {
+                "kind": "expression",
+                "type": "SkPagePanelMode"
+              },
+              "default": "'auto'"
+            },
+            {
+              "name": "sidebarBreakpoint",
+              "required": false,
+              "description": "Viewport width below which the sidebar's `auto` mode switches to drawer. Accepts any CSS length.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "'1024px'"
+            },
+            {
+              "name": "asideBreakpoint",
+              "required": false,
+              "description": "Viewport width below which the aside's `auto` mode switches to drawer. Accepts any CSS length.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "'1024px'"
+            },
+            {
+              "name": "sidebarOpen",
+              "required": false,
+              "description": "Controlled sidebar drawer open state. Bind via `v-model:sidebarOpen` to control programmatically.\nWhen omitted, SkPage manages state internally.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "asideOpen",
+              "required": false,
+              "description": "Controlled aside drawer open state. Bind via `v-model:asideOpen` to control programmatically.\nWhen omitted, SkPage manages state internally.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "undefined"
+            },
             {
               "name": "theme",
               "required": false,
-              "description": "Optional theme name. When provided, SkPage acts as a theme provider — setting\n`data-scheme` on the root element and providing theme context for descendant\ncomponents (including portal components like dropdowns and modals).\nWhen omitted, SkPage has no theme behavior.",
+              "description": "Optional theme name. When provided, SkPage acts as a theme provider -- setting `data-scheme`\non the root element and providing theme context for descendant components (including portal\ncomponents like dropdowns and modals).",
               "value": {
                 "kind": "expression",
                 "type": "SkThemeName"
               },
               "default": "undefined"
+            },
+            {
+              "name": "flush",
+              "required": false,
+              "description": "When true, zeroes out `--sk-page-gap` and `--sk-page-content-padding` so panels and content\nsit flush against the header, footer, edges, and each other.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "events": [
+            {
+              "name": "update:sidebarOpen"
+            },
+            {
+              "name": "update:asideOpen"
             }
           ],
           "slots": [
             {
               "name": "header"
             },
+            {
+              "name": "subheader"
+            },
+            {
+              "name": "sidebar-header"
+            },
             {
               "name": "sidebar"
             },
+            {
+              "name": "sidebar-footer"
+            },
+            {
+              "name": "main-header"
+            },
             {
               "name": "default"
             },
+            {
+              "name": "main-footer"
+            },
+            {
+              "name": "aside-header"
+            },
+            {
+              "name": "aside"
+            },
+            {
+              "name": "aside-footer"
+            },
             {
               "name": "footer"
             }
@@ -2033,6 +2148,51 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "SkPageSidebarToggle",
+          "description": "",
+          "attributes": [
+            {
+              "name": "side",
+              "required": false,
+              "description": "Which drawer this toggle controls. `sidebar` binds to the left drawer; `aside` binds to the right.",
+              "value": {
+                "kind": "expression",
+                "type": "SkPageDrawerSide"
+              },
+              "default": "'sidebar'"
+            },
+            {
+              "name": "kind",
+              "required": false,
+              "description": "Override the toggle's color kind. By default the toggle inherits the enclosing SkNavBar's\nkind (when placed inside one) and falls back to `neutral` otherwise. Pass a kind explicitly\nto force a specific color scheme.",
+              "value": {
+                "kind": "expression",
+                "type": "SkButtonKind"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "ariaLabel",
+              "required": false,
+              "description": "Accessible label for the toggle. Screen readers announce this; sighted users see only the glyph.\nDefaults to a label matching `side`.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/Page/SkPageSidebarToggle.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "SkPagination",
           "description": "",
@@ -2681,6 +2841,16 @@
                 "type": "string"
               },
               "default": "undefined"
+            },
+            {
+              "name": "fade",
+              "required": false,
+              "description": "When true, fade the scrollable edges with a CSS mask so content visibly tapers\ninto/out of the viewport. Applies to whichever axis (or both) is scrollable.\nOverride the fade distance via the `--sk-scroll-area-fade` custom property\n(default 1.5rem).",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "slots": [
@@ -2823,6 +2993,16 @@
                 "type": "SkSidebarSide"
               },
               "default": "'left'"
+            },
+            {
+              "name": "dense",
+              "required": false,
+              "description": "Opts out of the coarse-pointer touch-target floor on sidebar items (44px minimum on\ntouch devices). Use in compact navigation contexts where density matters more than\ntap comfort. No effect on fine-pointer (mouse) devices.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "slots": [

package/dist/components/Card/types.d.ts

@@ -1,2 +0,0 @@
-import { ComponentKind } from '../../types';
-export type SkCardKind = ComponentKind;

package/dist/components/Collapsible/types.d.ts

@@ -1,2 +0,0 @@
-import { ComponentKind } from '../../types';
-export type SkCollapsibleKind = ComponentKind;

package/dist/components/ContextMenu/types.d.ts

@@ -1,2 +0,0 @@
-import { ComponentKind } from '../../types';
-export type SkContextMenuKind = ComponentKind;

package/dist/components/Page/SkPage.vue.d.ts

@@ -1,64 +0,0 @@
-import { SkThemeName } from '../Theme/types';
-import { SkPageSidebarPosition } from './types';
-export interface SkPageComponentProps {
-    /**
-     * Controls which side of the page the sidebar appears on. The sidebar slot content
-     * will be positioned on the specified side, with the main content area filling the
-     * remaining space. Has no effect if the sidebar slot is not provided.
-     * @default 'left'
-     */
-    sidebarPosition?: SkPageSidebarPosition;
-    /**
-     * When true, the header remains fixed at the top of the viewport while the main
-     * content scrolls beneath it. Useful for keeping navigation always accessible.
-     * The content area adjusts its top padding to prevent overlap with the fixed header.
-     * @default false
-     */
-    fixedHeader?: boolean;
-    /**
-     * When true, the footer remains fixed at the bottom of the viewport while the main
-     * content scrolls above it. Useful for persistent action bars or important links.
-     * The content area adjusts its bottom padding to prevent overlap with the fixed footer.
-     * @default false
-     */
-    fixedFooter?: boolean;
-    /**
-     * Custom width for the sidebar region. Accepts any valid CSS width value (px, rem, %, etc.).
-     * When not specified, the sidebar uses the default width defined in the design tokens.
-     * Only applies when the sidebar slot is provided.
-     */
-    sidebarWidth?: string;
-    /**
-     * Optional theme name. When provided, SkPage acts as a theme provider — setting
-     * `data-scheme` on the root element and providing theme context for descendant
-     * components (including portal components like dropdowns and modals).
-     * When omitted, SkPage has no theme behavior.
-     */
-    theme?: SkThemeName;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        header?(_: {}): any;
-        sidebar?(_: {}): any;
-        default?(_: {}): any;
-        footer?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<SkPageComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkPageComponentProps> & Readonly<{}>, {
-    theme: SkThemeName;
-    sidebarPosition: SkPageSidebarPosition;
-    fixedHeader: boolean;
-    fixedFooter: boolean;
-    sidebarWidth: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/Page/index.d.ts

@@ -1,2 +0,0 @@
-export { default as SkPage } from './SkPage.vue';
-export * from './types';

package/dist/components/Page/types.d.ts

@@ -1,16 +0,0 @@
-import { SkThemeName } from '../Theme/types';
-/** Sidebar position */
-export type SkPageSidebarPosition = 'left' | 'right';
-/** Page props interface */
-export interface SkPageProps {
-    /** Sidebar position */
-    sidebarPosition?: SkPageSidebarPosition;
-    /** Fixed header (stays at top when scrolling) */
-    fixedHeader?: boolean;
-    /** Fixed footer (stays at bottom when scrolling) */
-    fixedFooter?: boolean;
-    /** Custom sidebar width */
-    sidebarWidth?: string;
-    /** Optional theme name — when provided, SkPage acts as a theme provider */
-    theme?: SkThemeName;
-}

package/dist/{components → src/components}/Skeleton/SkSkeleton.vue.d.ts

@@ -48,8 +48,8 @@ declare const _default: import('vue').DefineComponent<SkSkeletonComponentProps,
     bevel: string;
     variant: SkSkeletonVariant;
     corners: SkSkeletonCorner[];
-    height: string;
-    width: string;
     animation: SkSkeletonAnimation;
+    width: string;
+    height: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;