@skewedaspect/sleekspace-ui 0.7.1 → 0.8.0

package/src/composables/usePageDrawer.ts

@@ -0,0 +1,96 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Page Drawer Composable
+//
+// Provides drawer open-state coordination between SkPage (the owner) and descendants like
+// SkPageSidebarToggle. SkPage calls providePageDrawers to expose state for both the left sidebar
+// and the right aside; children call usePageDrawer(side) to consume one of them.
+//----------------------------------------------------------------------------------------------------------------------
+
+import { type Ref, computed, inject, provide } from 'vue';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+const PAGE_DRAWERS_KEY = Symbol('sk-page-drawers') as InjectionSymbol;
+
+type InjectionSymbol = symbol & { __drawers : true };
+
+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;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+function makeContext(
+    isOpen : Ref<boolean>,
+    isAvailable : Ref<boolean>,
+    setOpen : (value : boolean) => void
+) : PageDrawerContext
+{
+    return {
+        isOpen,
+        isAvailable,
+        open: () => setOpen(true),
+        close: () => setOpen(false),
+        toggle: () => setOpen(!isOpen.value),
+    };
+}
+
+/**
+ * Expose drawer state for both the sidebar and aside from SkPage so descendants (like toggle
+ * buttons) can wire into either without prop drilling.
+ */
+export 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
+{
+    const context : PageDrawersContext = {
+        sidebar: makeContext(sidebar.isOpen, sidebar.isAvailable, sidebar.setOpen),
+        aside: makeContext(aside.isOpen, aside.isAvailable, aside.setOpen),
+    };
+
+    provide(PAGE_DRAWERS_KEY, context);
+
+    return context;
+}
+
+/**
+ * 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 function usePageDrawer(side : PageDrawerSide = 'sidebar') : PageDrawerContext
+{
+    const noop = () : PageDrawerContext => ({
+        isOpen: computed(() => false) as Ref<boolean>,
+        isAvailable: computed(() => false) as Ref<boolean>,
+        open: () => { /* no-op: not inside SkPage */ },
+        close: () => { /* no-op: not inside SkPage */ },
+        toggle: () => { /* no-op: not inside SkPage */ },
+    });
+
+    const context = inject<PageDrawersContext | null>(PAGE_DRAWERS_KEY, null);
+    if(!context) { return noop(); }
+
+    return context[side];
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/global.d.ts

@@ -52,6 +52,7 @@ declare module '@vue/runtime-core' {
         SkNavBar: DefineComponent<import('./components/NavBar/SkNavBar.vue').SkNavBarComponentProps>;
         SkNumberInput: DefineComponent<import('./components/NumberInput/SkNumberInput.vue').SkNumberInputComponentProps>;
         SkPage: DefineComponent<import('./components/Page/SkPage.vue').SkPageComponentProps>;
+        SkPageSidebarToggle: DefineComponent<import('./components/Page/SkPageSidebarToggle.vue').SkPageSidebarToggleComponentProps>;
         SkPagination: DefineComponent<import('./components/Pagination/SkPagination.vue').SkPaginationComponentProps>;
         SkPaginationItem: DefineComponent<import('./components/Pagination/SkPaginationItem.vue').SkPaginationItemComponentProps>;
         SkPanel: DefineComponent<import('./components/Panel/SkPanel.vue').SkPanelComponentProps>;

package/src/index.ts

@@ -70,6 +70,9 @@ import SkModal, { type SkModalComponentProps } from './components/Modal/SkModal.
 import SkNavBar, { type SkNavBarComponentProps } from './components/NavBar/SkNavBar.vue';
 import SkNumberInput, { type SkNumberInputComponentProps } from './components/NumberInput/SkNumberInput.vue';
 import SkPage, { type SkPageComponentProps } from './components/Page/SkPage.vue';
+import SkPageSidebarToggle, {
+    type SkPageSidebarToggleComponentProps,
+} from './components/Page/SkPageSidebarToggle.vue';
 import SkPagination, { type SkPaginationComponentProps } from './components/Pagination/SkPagination.vue';
 import SkPaginationItem, {
     type SkPaginationItemComponentProps,
@@ -228,6 +231,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 };
@@ -318,6 +322,7 @@ const SleekSpaceUI : Plugin = {
         app.component('SkNavBar', SkNavBar);
         app.component('SkNumberInput', SkNumberInput);
         app.component('SkPage', SkPage);
+        app.component('SkPageSidebarToggle', SkPageSidebarToggle);
         app.component('SkPagination', SkPagination);
         app.component('SkPaginationItem', SkPaginationItem);
         app.component('SkPanel', SkPanel);

package/src/styles/components/_accordion.scss

@@ -1,4 +1,5 @@
 @use '@/styles/mixins/cut-border' as *;
+@use '@/styles/mixins/responsive' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Accordion Component Styles
@@ -76,6 +77,7 @@
         transparent 85%
     );
 
+    position: relative;
     overflow: hidden;
     width: 100%;
 
@@ -248,3 +250,16 @@
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Reduced motion: panels snap open/closed instead of sliding.
+//----------------------------------------------------------------------------------------------------------------------
+
+@include reduced-motion
+{
+    .sk-accordion-content[data-state='open'],
+    .sk-accordion-content[data-state='closed']
+    {
+        animation: none;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_alert.scss

@@ -122,6 +122,7 @@
 .sk-alert
 {
     // Base structure
+    position: relative;
     display: flex;
     align-items: flex-start;
     gap: var(--sk-alert-gap);

package/src/styles/components/_avatar.scss

@@ -33,6 +33,7 @@ $kinds: (neutral, primary, accent, info, success, warning, danger);
     --sk-avatar-size: 2.5rem;
     --sk-avatar-bevel: calc(var(--sk-avatar-size) * 0.25);
 
+    position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;

package/src/styles/components/_breadcrumbs.scss

@@ -2,6 +2,8 @@
 // Breadcrumbs Styles
 //----------------------------------------------------------------------------------------------------------------------
 
+@use '@/styles/mixins' as *;
+
 //----------------------------------------------------------------------------------------------------------------------
 
 .sk-breadcrumbs
@@ -88,6 +90,11 @@
         font-family: inherit;
         cursor: pointer;
 
+        @include touch
+        {
+            min-height: 44px;
+        }
+
         // Hover state (except for current page)
         &:hover:not([aria-current])
         {