@lostgradient/cinder 0.12.1 → 0.13.0

package/src/components/sidebar/sidebar.examples.json

@@ -8,6 +8,12 @@
       "title": "Basic sidebar",
       "description": "Layout-level sidebar with brand, navigation, and footer regions. Collapse toggles icon-only mode on desktop and closes the drawer on mobile.",
       "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { NavigationItem } from '@lostgradient/cinder/navigation-item';\n  import { SideNavigation } from '@lostgradient/cinder/side-navigation';\n  import { SideNavigationGroup } from '@lostgradient/cinder/side-navigation-group';\n  import { SideNavigationItem } from '@lostgradient/cinder/side-navigation-item';\n  import { Sidebar } from '@lostgradient/cinder/sidebar';\n  let collapsed = $state(false);\n</script>\n\n<div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n  <div>\n    <Button\n      label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n      onclick={() => (collapsed = !collapsed)}\n    />\n  </div>\n\n  <div\n    style=\"display: flex; min-height: 24rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden;\"\n  >\n    <Sidebar bind:collapsed label=\"Workspace\">\n      {#snippet brand()}\n        <strong style=\"font-size: 0.875rem;\">Cinder</strong>\n      {/snippet}\n\n      {#snippet navigation()}\n        <SideNavigation ariaLabel=\"Workspace sections\">\n          {#snippet children()}\n            <SideNavigationItem href=\"#dashboard\">\n              {#snippet children()}Dashboard{/snippet}\n            </SideNavigationItem>\n            <SideNavigationItem href=\"#projects\" active>\n              {#snippet children()}Projects{/snippet}\n            </SideNavigationItem>\n            <SideNavigationGroup label=\"Settings\">\n              {#snippet children()}\n                <SideNavigationItem href=\"#general\">\n                  {#snippet children()}General{/snippet}\n                </SideNavigationItem>\n                <SideNavigationItem href=\"#billing\">\n                  {#snippet children()}Billing{/snippet}\n                </SideNavigationItem>\n              {/snippet}\n            </SideNavigationGroup>\n          {/snippet}\n        </SideNavigation>\n      {/snippet}\n\n      {#snippet footer()}\n        <NavigationItem variant=\"vertical\" href=\"#account\">\n          {#snippet children()}Account{/snippet}\n        </NavigationItem>\n      {/snippet}\n    </Sidebar>\n\n    <main style=\"flex: 1; padding: 1rem;\">\n      <p>Main content area.</p>\n      <p>Resize the viewport below ~767px to see the mobile drawer behavior.</p>\n    </main>\n  </div>\n</div>\n"
+    },
+    {
+      "id": "mobile-trigger",
+      "title": "App-owned mobile trigger",
+      "description": "Use the exported Sidebar mobile media query when a top bar owns the drawer trigger outside the Sidebar.",
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { NavigationItem } from '@lostgradient/cinder/navigation-item';\n  import { SideNavigation } from '@lostgradient/cinder/side-navigation';\n  import { SideNavigationItem } from '@lostgradient/cinder/side-navigation-item';\n  import { SIDEBAR_MOBILE_MEDIA_QUERY, Sidebar } from '@lostgradient/cinder/sidebar';\n  import { MediaQuery } from 'svelte/reactivity';\n\n  const mobile = new MediaQuery(SIDEBAR_MOBILE_MEDIA_QUERY, false);\n  let collapsed = $state(true);\n\n  const triggerLabel = $derived(\n    mobile.current\n      ? collapsed\n        ? 'Open workspace navigation'\n        : 'Close workspace navigation'\n      : collapsed\n        ? 'Expand workspace navigation'\n        : 'Collapse workspace navigation',\n  );\n</script>\n\n<div\n  style=\"display: flex; min-height: 24rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden;\"\n>\n  <Sidebar id=\"workspace-sidebar\" bind:collapsed label=\"Workspace\">\n    {#snippet brand()}\n      <strong style=\"font-size: 0.875rem;\">Cinder</strong>\n    {/snippet}\n\n    {#snippet navigation()}\n      <SideNavigation ariaLabel=\"Workspace sections\">\n        <SideNavigationItem href=\"#dashboard\">Dashboard</SideNavigationItem>\n        <SideNavigationItem href=\"#projects\" active>Projects</SideNavigationItem>\n        <SideNavigationItem href=\"#settings\">Settings</SideNavigationItem>\n      </SideNavigation>\n    {/snippet}\n\n    {#snippet footer()}\n      <NavigationItem variant=\"vertical\" href=\"#account\">Account</NavigationItem>\n    {/snippet}\n  </Sidebar>\n\n  <main style=\"flex: 1; display: flex; flex-direction: column; min-inline-size: 0;\">\n    <div\n      style=\"display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid #e5e7eb;\"\n    >\n      <Button\n        label={triggerLabel}\n        aria-controls=\"workspace-sidebar\"\n        aria-expanded={!collapsed}\n        onclick={() => (collapsed = !collapsed)}\n      />\n      <strong>Workspace</strong>\n    </div>\n\n    <div style=\"padding: 1rem;\">\n      <p style=\"margin: 0;\">\n        The trigger lives in app chrome, while Sidebar owns the drawer state and breakpoint.\n      </p>\n    </div>\n  </main>\n</div>\n"
     }
   ]
 }

package/src/components/sidebar/sidebar.svelte

@@ -7,6 +7,7 @@ import { MediaQuery } from 'svelte/reactivity';
 import { setSidebarContext } from '../../_internal/sidebar-context.ts';
 import { classNames } from '../../utilities/class-names.ts';
 import Drawer from '../drawer/drawer.svelte';
+import { SIDEBAR_MOBILE_MEDIA_QUERY } from './sidebar.constants.ts';
 let { id: sidebarId, collapsed = $bindable(false), label = 'Sidebar', class: className, brand: brandSnippet, navigation: navigationSnippet, footer: footerSnippet, 'aria-label': _ariaLabelAttribute, 'aria-labelledby': _ariaLabelledbyAttribute, ...rest } = $props();
 const validatedLabel = $derived.by(() => {
     if (label.trim() === '') {
@@ -18,16 +19,14 @@ const validatedLabel = $derived.by(() => {
 // complementary <aside> and the inner navigation are not announced as two
 // identically-named landmarks.
 const navigationLabel = $derived(`${validatedLabel} navigation`);
-// Breakpoint matches the existing `47.99rem` (~767px) convention used by
-// navigation-bar.css and navigation-item.css. The fully-parenthesized form
-// is required — `window.matchMedia` rejects bare media feature expressions
-// on Firefox and Safari.
+// The fully-parenthesized form is required — `window.matchMedia` rejects
+// bare media feature expressions on Firefox and Safari.
 // Keep the fallback explicit for SSR-contract test environments that resolve
 // the client MediaQuery build while `window.matchMedia` is unavailable.
 const hasMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia === 'function';
 const usesSsrResponsiveFallback = !hasMatchMedia;
 const mobile = hasMatchMedia
-    ? new MediaQuery('(max-width: 47.99rem)', false)
+    ? new MediaQuery(SIDEBAR_MOBILE_MEDIA_QUERY, false)
     : { current: false };
 const context = {
     get collapsed() {

package/src/index.ts

@@ -797,7 +797,11 @@ export type { SideNavigationGroupProps } from './components/side-navigation-grou
 export { default as SideNavigationItem } from './components/side-navigation-item/index.ts';
 export type { SideNavigationItemProps } from './components/side-navigation-item/index.ts';
 
-export { default as Sidebar } from './components/sidebar/index.ts';
+export {
+  SIDEBAR_MOBILE_BREAKPOINT,
+  SIDEBAR_MOBILE_MEDIA_QUERY,
+  default as Sidebar,
+} from './components/sidebar/index.ts';
 export type { SidebarProps } from './components/sidebar/index.ts';
 
 export { default as SortableList } from './components/sortable-list/index.ts';

package/src/styles/foundation.css

@@ -303,7 +303,8 @@
   .cinder-dropdown-item[data-disabled],
   .cinder-toggle:disabled,
   .cinder-segmented-control[aria-disabled='true'],
-  .cinder-segmented-control-option:disabled
+  .cinder-segmented-control-option:disabled,
+  .cinder-segmented-control-option[aria-disabled='true']
 ) {
   opacity: 0.6;
 }