@gluonjs/core / packages/organisms/src / NavigationRailGroup

Interface: NavigationRailGroup

Properties

id

readonly id: string

---

items

readonly items: readonly NavigationRailItem[]

---

label?

readonly optional label?: TemplateValue

Example

Describe one labelled NavigationRail group with caller-owned navigation items:

import { html } from '@gluonjs/core';
import { Autocomplete, HoverCard as MoleculeHoverCard, autocompleteStyles, hoverCardStyles, type AutocompleteAttributes, type AutocompleteOption, type AutocompleteProps, type HoverCardAttributes, type HoverCardContentAttributes, type HoverCardPlacement, type HoverCardProps, type HoverCardTriggerAttributes } from '@gluonjs/molecules';
import { q } from '@gluonjs/quarks';
import { AdminShell, AppShell, ApprovalFlow, AsyncState, ConfirmationDialog, DashboardShell, MarketingHeader, MegaMenu, NavigationRail, OnboardingFlow, PageLayout, ProductCard, ProductGallery, ProductGrid, ResizablePanels, SidebarLayout, SiteFooter, SiteHeader, SplitPane, StatusTracker, Wizard, WorkflowTimeline, adminShellStyles, approvalFlowStyles, asyncStateStyles, confirmationDialogStyles, createConfirmationDialogController, dashboardShellStyles, marketingHeaderStyles, megaMenuStyles, navigationRailStyles, onboardingFlowStyles, organismManifest, organismStyles, pageLayoutStyles, productCardStyles, productGalleryStyles, productGridStyles, resizablePanelsStyles, sidebarLayoutStyles, siteFooterStyles, siteHeaderStyles, splitPaneStyles, statusTrackerStyles, wizardStyles, workflowTimelineStyles, type AdminShellAttributes, type AdminShellNavigationAttributes, type AdminShellProps, type AdminShellRegionAttributes, type AppShellProps, type ApprovalFlowAttributes, type ApprovalFlowChangeEvent, type ApprovalFlowProps, type ApprovalFlowStage, type ApprovalFlowStageStatus, type AsyncStateAttributes, type AsyncStateHeadingLevel, type AsyncStateMessages, type AsyncStateProps, type AsyncStateStatus, type ConfirmationDialogAttributes, type ConfirmationDialogController, type ConfirmationDialogControllerOptions, type ConfirmationDialogInitialFocus, type ConfirmationDialogProps, type DashboardShellAttributes, type DashboardShellButtonAttributes, type DashboardShellNavigationAttributes, type DashboardShellOpenChangeEvent, type DashboardShellProps, type DashboardShellRegionAttributes, type MarketingHeaderAttributes, type MarketingHeaderNavigationAttributes, type MarketingHeaderOpenChangeEvent, type MarketingHeaderProps, type MarketingHeaderRegionAttributes, type MarketingHeaderTriggerAttributes, type MegaMenuAttributes, type MegaMenuGroup, type MegaMenuLink, type MegaMenuLinkAttributes, type MegaMenuOpenChangeEvent, type MegaMenuProps, type MegaMenuTriggerAttributes, type NavigationRailAttributes, type NavigationRailButtonAttributes, type NavigationRailGroup, type NavigationRailItem, type NavigationRailLinkAttributes, type NavigationRailNavigationAttributes, type NavigationRailOpenChangeEvent, type NavigationRailProps, type NavigationRailRegionAttributes, type OnboardingFlowAttributes, type OnboardingFlowChangeEvent, type OnboardingFlowProps, type OnboardingFlowStep, type PageLayoutAttributes, type PageLayoutHeadingLevel, type PageLayoutProps, type PageLayoutRegionAttributes, type ProductCardAttributes, type ProductCardProduct, type ProductCardProps, type ProductGalleryAttributes, type ProductGalleryImage, type ProductGalleryImageAttributes, type ProductGalleryProps, type ProductGridAttributes, type ProductGridColumns, type ProductGridProps, type ResizablePanelsAttributes, type ResizablePanelsChangeEvent, type ResizablePanelsOrientation, type ResizablePanelsPanel, type ResizablePanelsProps, type ResizablePanelsRegionAttributes, type SidebarLayoutAttributes, type SidebarLayoutButtonAttributes, type SidebarLayoutNavigationAttributes, type SidebarLayoutOpenChangeEvent, type SidebarLayoutProps, type SidebarLayoutRegionAttributes, type SiteFooterAttributes, type SiteFooterNavigationAttributes, type SiteFooterProps, type SiteFooterRegionAttributes, type SiteHeaderAttributes, type SiteHeaderNavigationAttributes, type SiteHeaderOpenChangeEvent, type SiteHeaderProps, type SiteHeaderRegionAttributes, type SiteHeaderTriggerAttributes, type SplitPaneAttributes, type SplitPaneOpenChangeEvent, type SplitPaneOrientation, type SplitPaneProps, type SplitPaneRegionAttributes, type StatusTrackerAttributes, type StatusTrackerItem, type StatusTrackerProps, type StatusTrackerStatus, type WizardAttributes, type WizardOpenChangeEvent, type WizardProps, type WizardStep, type WorkflowTimelineProps, type WorkflowTimelineStatus, type WorkflowTimelineOverallState, type WorkflowTimelineAttributes, type WorkflowTimelineStep, type WorkflowTimelineMessages } from '@gluonjs/organisms';

import { NotificationCenter, notificationCenterStyles, type NotificationCenterAttributes, type NotificationCenterItem, type NotificationCenterPanelAttributes, type NotificationCenterProps, type NotificationCenterTone, type NotificationCenterTriggerAttributes } from '@gluonjs/organisms';
import { SettingsShell, settingsShellStyles, type SettingsShellAttributes, type SettingsShellButtonAttributes, type SettingsShellNavigationAttributes, type SettingsShellOpenChangeEvent, type SettingsShellProps, type SettingsShellRegionAttributes } from '@gluonjs/organisms';
const shell = {
  header: html`<strong>GLUON GOODS</strong>`,
  navigation: html`<a href="/shop">Shop</a><a href="/bag">Bag</a>`,
  children: html`<h1>New arrivals</h1>`,
  footer: html`<small>Free shipping over €100</small>`,
} satisfies AppShellProps;
const adminAttributes: AdminShellAttributes = { class: 'catalog-admin-shell' };
const adminRegionAttributes: AdminShellRegionAttributes = { class: 'catalog-admin-region' };
const adminNavigationAttributes: AdminShellNavigationAttributes = { class: 'catalog-admin-navigation' };
const adminShell: AdminShellProps = { id: 'catalog-admin', header: html`<strong>Back office</strong>`, sidebar: html`<a href='/overview'>Overview</a><a href='/settings'>Settings</a>`, main: html`<h1>Workspace</h1>`, footer: html`<small>Tenant: Gluon Goods</small>`, attributes: adminAttributes, headerAttributes: adminRegionAttributes, sidebarAttributes: adminRegionAttributes, navigationAttributes: adminNavigationAttributes, mainAttributes: adminRegionAttributes, footerAttributes: adminRegionAttributes, sidebarLabel: 'Back office navigation' };
const dashboardAttributes: DashboardShellAttributes = { class: 'catalog-dashboard-shell' };
const dashboardRegionAttributes: DashboardShellRegionAttributes = { class: 'catalog-dashboard-region' };
const dashboardNavigationAttributes: DashboardShellNavigationAttributes = { class: 'catalog-dashboard-navigation' };
const dashboardButtonAttributes: DashboardShellButtonAttributes = { class: 'catalog-dashboard-button' };
const dashboardOpenChangeEvent: DashboardShellOpenChangeEvent = new MouseEvent('dashboard-open-change');
const dashboardShell: DashboardShellProps = { id: 'catalog-dashboard', header: html`<strong>Operations</strong>`, sidebar: html`<a href='/overview'>Overview</a><a href='/reports'>Reports</a>`, main: html`<h1>Metrics</h1>`, utility: html`<p>Inspector tools</p>`, footer: html`<small>Status: ready</small>`, sidebarLabel: 'Dashboard navigation', utilityLabel: 'Dashboard tools', mobileOpen: true, attributes: dashboardAttributes, headerAttributes: dashboardRegionAttributes, sidebarAttributes: dashboardRegionAttributes, navigationAttributes: dashboardNavigationAttributes, mainAttributes: dashboardRegionAttributes, utilityAttributes: dashboardRegionAttributes, footerAttributes: dashboardRegionAttributes, mobileButtonAttributes: dashboardButtonAttributes, onMobileOpenChange: (open, event) => console.log(open, event.type) };
const sidebarAttributes: SidebarLayoutAttributes = { class: 'catalog-sidebar-layout', style: { '--gluon-sidebar-layout-sidebar-size': '17rem' } };
const sidebarRegionAttributes: SidebarLayoutRegionAttributes = { class: 'catalog-sidebar-region' };
const sidebarNavigationAttributes: SidebarLayoutNavigationAttributes = { aria: { label: 'Catalog sidebar navigation' } };
const sidebarButtonAttributes: SidebarLayoutButtonAttributes = { class: 'catalog-sidebar-button' };
const sidebarOpenChangeEvent: SidebarLayoutOpenChangeEvent = new MouseEvent('sidebar-open-change');
const sidebarLayout: SidebarLayoutProps = { id: 'catalog-sidebar-layout', header: html`<strong>Catalog</strong>`, sidebar: html`<a href='/overview'>Overview</a><a href='/reports'>Reports</a>`, main: html`<h1>Workspace</h1>`, footer: html`<small>Tenant-owned footer</small>`, sidebarLabel: 'Catalog sidebar navigation', mobileOpen: true, attributes: sidebarAttributes, headerAttributes: sidebarRegionAttributes, sidebarAttributes: sidebarRegionAttributes, navigationAttributes: sidebarNavigationAttributes, mainAttributes: sidebarRegionAttributes, footerAttributes: sidebarRegionAttributes, mobileButtonAttributes: sidebarButtonAttributes, onMobileOpenChange: (open, event) => console.log(open, event.type) };
const settingsAttributes: SettingsShellAttributes = { class: 'catalog-settings-shell', style: { '--gluon-settings-shell-navigation-size': '18rem' } };
const settingsRegionAttributes: SettingsShellRegionAttributes = { class: 'catalog-settings-region' };
const settingsNavigationAttributes: SettingsShellNavigationAttributes = { aria: { label: 'Workspace settings sections' } };
const settingsButtonAttributes: SettingsShellButtonAttributes = { class: 'catalog-settings-button' };
const settingsOpenChangeEvent: SettingsShellOpenChangeEvent = new MouseEvent('settings-open-change');
const settingsShell: SettingsShellProps = { id: 'catalog-settings', title: html`<strong>Workspace settings</strong>`, navigation: html`<a href='/profile'>Profile</a><a href='/members'>Members</a><a href='/billing'>Billing</a>`, content: html`<h1>Profile</h1>`, footer: html`<small>Tenant-owned footer</small>`, navigationLabel: 'Workspace settings sections', mobileOpen: true, attributes: settingsAttributes, titleAttributes: settingsRegionAttributes, navigationAttributes: settingsRegionAttributes, navigationListAttributes: settingsNavigationAttributes, contentAttributes: settingsRegionAttributes, footerAttributes: settingsRegionAttributes, mobileButtonAttributes: settingsButtonAttributes, onMobileOpenChange: (open, event) => console.log(open, event.type) };
const wizardAttributes: WizardAttributes = { class: 'catalog-wizard', style: { '--gluon-wizard-current': 'var(--gluon-color-accent)' } };
const wizardStep: WizardStep = { id: 'finish', label: 'Finish', description: 'Choose a tenant finish.', content: html`<p>Caller-owned finish content.</p>` };
const wizardOpenChangeEvent: WizardOpenChangeEvent = new MouseEvent('wizard-step-change');
const wizard: WizardProps = { id: 'catalog-wizard', title: 'Configure product', steps: [{ id: 'details', label: 'Details', content: html`<p>Caller-owned details.</p>` }, wizardStep, { id: 'review', label: 'Review', content: html`<p>Caller-owned review.</p>` }], currentStep: 1, attributes: wizardAttributes, onStepChange: (step, event) => console.log(step, event.type) };
const onboardingAttributes: OnboardingFlowAttributes = { class: 'catalog-onboarding-flow', style: { '--gluon-onboarding-flow-current': 'var(--gluon-color-accent)' } };
const onboardingStep: OnboardingFlowStep = { id: 'workspace', label: 'Workspace', content: html`<p>Caller-owned workspace setup.</p>` };
const onboardingChangeEvent: OnboardingFlowChangeEvent = new MouseEvent('onboarding-step-change');
const onboardingFlow: OnboardingFlowProps = { id: 'catalog-onboarding-flow', title: 'Set up workspace', steps: [{ id: 'profile', label: 'Profile', content: html`<p>Caller-owned profile setup.</p>` }, onboardingStep], currentStep: 1, attributes: onboardingAttributes, onStepChange: (step, event) => console.log(step, event.type), onComplete: (event) => console.log('complete', event.type) };
const approvalAttributes: ApprovalFlowAttributes = { class: 'catalog-approval-flow', style: { '--gluon-approval-flow-current': 'var(--gluon-color-accent)' } };
const approvalStage: ApprovalFlowStage = { id: 'security', label: 'Security', status: 'in-review' satisfies ApprovalFlowStageStatus, content: html`<p>Caller-owned review content.</p>`, role: 'Security', evidence: html`<small>Report 42</small>`, actions: html`<button type='button'>Approve</button>` };
const approvalChangeEvent: ApprovalFlowChangeEvent = new MouseEvent('approval-stage-change');
const approvalFlow: ApprovalFlowProps = { id: 'catalog-approval-flow', title: 'Release review', stages: [approvalStage], currentStage: 0, attributes: approvalAttributes, onStageChange: (stage, event) => console.log(stage, event.type) };
const hoverCardAttributes: HoverCardAttributes = { class: 'catalog-hover-card' };
const hoverCardContentAttributes: HoverCardContentAttributes = { class: 'catalog-hover-card-content' };
const renderHoverCardTrigger = (attributes: HoverCardTriggerAttributes) => q.button({ ...attributes, data: { ...attributes.data, slot: 'trigger' }, children: 'Maker details' });
const hoverCardPlacement: HoverCardPlacement = 'inline-end';
const hoverCard: HoverCardProps = { id: 'catalog-hover-card', label: 'Maker details', placement: hoverCardPlacement, trigger: renderHoverCardTrigger, content: html`<a href='/makers/ada'>View profile</a>`, attributes: hoverCardAttributes, contentAttributes: hoverCardContentAttributes };
const hoverCardTriggerAttributes = renderHoverCardTrigger;
const autocompleteAttributes: AutocompleteAttributes = { class: 'catalog-autocomplete', style: { '--gluon-autocomplete-busy-opacity': '0.9' } };
const autocompleteOption: AutocompleteOption = { value: 'orbit', label: 'Orbit lamp' };
const autocomplete: AutocompleteProps = { id: 'catalog-autocomplete', label: 'Find product', suggestions: [autocompleteOption, { value: 'cable', label: 'Cobalt cable' }], inputValue: 'Orbit', open: true, attributes: autocompleteAttributes, onSelect: (value, event) => console.log(value, event.type) };
const statusTrackerAttributes: StatusTrackerAttributes = { class: 'catalog-status-tracker', style: { '--gluon-status-tracker-current': 'var(--gluon-color-accent)' } };
const statusTrackerItem: StatusTrackerItem = { id: 'validate', label: 'Validate', status: 'in-progress' satisfies StatusTrackerStatus, description: 'Checking records.', progress: 68, timestamp: '2026-10-04T03:00:00Z', meta: html`<small>68 of 100 records checked.</small>`, action: html`<button type='button'>View details</button>` };
const statusTracker: StatusTrackerProps = { id: 'catalog-status-tracker', title: 'Import status', summary: 'Validation is in progress.', items: [{ id: 'upload', label: 'Upload', status: 'success' }, statusTrackerItem, { id: 'publish', label: 'Publish', status: 'pending' }], currentId: 'validate', attributes: statusTrackerAttributes };
const notificationCenterAttributes: NotificationCenterAttributes = { class: 'catalog-notification-center' };
const notificationCenterPanelAttributes: NotificationCenterPanelAttributes = { class: 'catalog-notification-panel' };
const notificationCenterTriggerAttributes: NotificationCenterTriggerAttributes = { class: 'catalog-notification-trigger' };
const notificationTone: NotificationCenterTone = 'info';
const notificationItem: NotificationCenterItem = { id: 'invite', title: 'Workspace invite', tone: notificationTone, read: false, timestamp: '2026-10-03T15:00:00Z', body: html`<p>One invitation needs attention.</p>`, action: html`<a href='/workspace'>Review invite</a>` };
const notificationCenter: NotificationCenterProps = { id: 'catalog-notifications', label: 'Notifications', open: true, notifications: [notificationItem], attributes: notificationCenterAttributes, triggerAttributes: notificationCenterTriggerAttributes, panelAttributes: notificationCenterPanelAttributes, onMarkRead: (id, event) => console.log(id, event.type), onDismiss: (id, event) => console.log(id, event.type) };
const marketingAttributes: MarketingHeaderAttributes = { class: 'catalog-marketing-header' };
const marketingRegionAttributes: MarketingHeaderRegionAttributes = { class: 'catalog-marketing-region' };
const marketingNavigationAttributes: MarketingHeaderNavigationAttributes = { aria: { label: 'Catalog marketing navigation' } };
const marketingTriggerAttributes: MarketingHeaderTriggerAttributes = { class: 'catalog-marketing-trigger' };
const marketingOpenChangeEvent: MarketingHeaderOpenChangeEvent = new MouseEvent('marketing-open-change');
const marketingHeader: MarketingHeaderProps = { id: 'catalog-marketing-header', announcement: html`<strong>Free shipping this week</strong>`, brand: html`<a href='/'>GLUON GOODS</a>`, navigation: html`<a href='/shop'>Shop</a><a href='/journal'>Journal</a>`, actions: html`<button type='button'>Search</button>`, mobileNavigation: html`<a href='/shop'>Shop</a>`, mobileOpen: true, attributes: marketingAttributes, announcementAttributes: marketingRegionAttributes, brandAttributes: marketingRegionAttributes, navigationAttributes: marketingNavigationAttributes, triggerAttributes: marketingTriggerAttributes, onMobileOpenChange: (open, event) => console.log(open, event.type) };
const asyncStatus: AsyncStateStatus = 'partial';
const asyncAttributes: AsyncStateAttributes = { class: 'recommendations-state' };
const asyncMessages: AsyncStateMessages = { partial: 'Recommendations are partially loaded.' };
const asyncState: AsyncStateProps = { id: 'recommendations', status: asyncStatus, heading: 'Recommendations', headingLevel: 2 satisfies AsyncStateHeadingLevel, partialContent: html`<p>Profile data is ready while recommendations refresh.</p>`, actions: html`<button type="button">Retry</button>`, messages: asyncMessages, attributes: asyncAttributes };
const product: ProductCardProduct = { id: 'orbit-lamp', title: 'Orbit lamp', description: 'Adjustable light for focused work.' };
const productCardAttributes: ProductCardAttributes = { class: 'catalog-product-card' };
const productCard: ProductCardProps = { product, href: '/products/orbit-lamp', media: html`<img src="/assets/orbit-lamp.webp" alt="" />`, price: '€128', availability: 'In stock', actions: html`<button type="button">Add to bag</button>`, attributes: productCardAttributes };
const productColumns: ProductGridColumns = 3;
const productGridAttributes: ProductGridAttributes = { class: 'catalog-product-grid' };
const productGrid: ProductGridProps = { items: [product], columns: productColumns, renderCard: (item) => ProductCard({ product: item, price: '€128' }), emptyContent: 'No products found.', attributes: productGridAttributes };
const galleryImage: ProductGalleryImage = { id: 'orbit-primary', src: '/assets/orbit-lamp.webp', alt: 'Orbit lamp', primary: true };
const galleryImageAttributes: ProductGalleryImageAttributes = { class: 'catalog-gallery-image', loading: 'lazy' };
const galleryAttributes: ProductGalleryAttributes = { class: 'catalog-product-gallery', style: { '--gluon-product-gallery-gap': '1rem' } };
const productGallery: ProductGalleryProps = { id: 'catalog-gallery', label: 'Orbit lamp gallery', images: [{ ...galleryImage, attributes: galleryImageAttributes }, { id: 'orbit-detail', src: '/assets/orbit-lamp.webp', alt: '' }], attributes: galleryAttributes };
const initialFocus: ConfirmationDialogInitialFocus = '[data-confirm-primary]';
const confirmationOptions = { initialFocus } satisfies ConfirmationDialogControllerOptions;
const confirmationController: ConfirmationDialogController = createConfirmationDialogController(confirmationOptions);
const confirmationAttributes = { '@close': () => console.log('closed') } satisfies ConfirmationDialogAttributes;
const confirmation = { id: 'archive-confirmation', title: 'Archive order?', description: 'The caller owns the archive mutation.', safeAction: 'Cancel', primaryAction: html`<button data-confirm-primary>Archive</button>`, dismissOnBackdrop: false, controller: confirmationController, attributes: confirmationAttributes } satisfies ConfirmationDialogProps;
const workflowStep: WorkflowTimelineStep = { id: 'review', label: 'Review', status: 'current' satisfies WorkflowTimelineStatus, role: 'Reviewer', evidence: 'Ticket 42' };
const workflowState: WorkflowTimelineOverallState = 'degraded';
const workflowAttributes: WorkflowTimelineAttributes = { 'aria-label': 'Order workflow' };
const workflowMessages: WorkflowTimelineMessages = { timeline: 'Ablauf', status: (status) => `Status: ${status}`, step: (position, total) => `${position} von ${total}`, evidence: 'Nachweis' };
const workflow: WorkflowTimelineProps = { id: 'order-workflow', steps: [workflowStep], state: workflowState, messages: workflowMessages, role: 'Operations', evidence: 'Import log 42', attributes: workflowAttributes };
const megaLink: MegaMenuLink = { id: 'orbit-lamp', label: 'Orbit lamp', href: '/products/orbit-lamp', description: 'Adjustable light for focused work.' };
const megaGroup: MegaMenuGroup = { id: 'lighting', label: 'Lighting', links: [megaLink] };
const megaAttributes: MegaMenuAttributes = { class: 'catalog-mega-menu' };
const megaTriggerAttributes: MegaMenuTriggerAttributes = { class: 'catalog-mega-trigger' };
const megaLinkAttributes: MegaMenuLinkAttributes = { class: 'catalog-mega-link' };
const megaOpenChangeEvent: MegaMenuOpenChangeEvent = new MouseEvent('open-change');
const megaMenu: MegaMenuProps = { id: 'shop-menu', label: 'Shop navigation', trigger: 'Shop', groups: [megaGroup], open: true, attributes: megaAttributes, triggerAttributes: megaTriggerAttributes, onOpenChange: (open, event) => console.log('shop menu', open, event.type) };
const headerAttributes: SiteHeaderAttributes = { class: 'catalog-site-header' };
const headerNavigationAttributes: SiteHeaderNavigationAttributes = { 'aria-label': 'Catalog navigation' };
const headerRegionAttributes: SiteHeaderRegionAttributes = { class: 'catalog-header-region' };
const headerTriggerAttributes: SiteHeaderTriggerAttributes = { class: 'catalog-header-trigger' };
const headerOpenChangeEvent: SiteHeaderOpenChangeEvent = new MouseEvent('mobile-open-change');
const header: SiteHeaderProps = { id: 'catalog-header', brand: html`<a href='/'>GLUON GOODS</a>`, navigation: html`<a href='/shop'>Shop</a>`, actions: html`<button type='button'>Search</button>`, mobileNavigation: html`<a href='/shop'>Shop</a>`, attributes: headerAttributes, navigationAttributes: headerNavigationAttributes, brandAttributes: headerRegionAttributes, triggerAttributes: headerTriggerAttributes, onMobileOpenChange: (open, event) => console.log('mobile header', open, event.type) };
const footerAttributes: SiteFooterAttributes = { class: 'catalog-site-footer' };
const footerNavigationAttributes: SiteFooterNavigationAttributes = { 'aria-label': 'Catalog footer navigation' };
const footerRegionAttributes: SiteFooterRegionAttributes = { class: 'catalog-footer-region' };
const footer: SiteFooterProps = { id: 'catalog-footer', brand: html`<a href='/'>GLUON GOODS</a>`, navigation: html`<a href='/shop'>Shop</a><a href='/journal'>Journal</a>`, legal: html`<a href='/privacy'>Privacy</a>`, meta: html`<small>© 2026 Gluon Goods</small>`, attributes: footerAttributes, navigationAttributes: footerNavigationAttributes, brandAttributes: footerRegionAttributes, legalAttributes: footerRegionAttributes, metaAttributes: footerRegionAttributes };
const pageLayoutAttributes: PageLayoutAttributes = { class: 'catalog-page-layout' };
const pageLayoutHeadingLevel: PageLayoutHeadingLevel = 1;
const pageLayout: PageLayoutProps = { id: 'catalog-page', title: 'Catalog', headingLevel: pageLayoutHeadingLevel, breadcrumbs: html`<a href='/'>Home</a> / Catalog`, actions: html`<button type='button'>Create</button>`, children: html`<p>Caller-owned page content.</p>`, aside: html`<p>Related filters.</p>`, footer: html`<small>Tenant-owned metadata.</small>`, attributes: pageLayoutAttributes };
const splitPaneAttributes: SplitPaneAttributes = { class: 'catalog-split-pane' };
const splitPaneOrientation: SplitPaneOrientation = 'horizontal';
const splitPaneOpenChangeEvent: SplitPaneOpenChangeEvent = new MouseEvent('collapse-change');
const splitPane: SplitPaneProps = { id: 'catalog-workspace', primary: html`<p>Caller-owned workspace.</p>`, secondary: html`<p>Caller-owned inspector.</p>`, orientation: splitPaneOrientation, secondaryLabel: 'Inspector', attributes: splitPaneAttributes, onSecondaryCollapsedChange: (collapsed, event) => console.log('inspector', collapsed, event.type) };
const resizablePanelsAttributes: ResizablePanelsAttributes = { class: 'catalog-resizable-panels' };
const resizablePanelsOrientation: ResizablePanelsOrientation = 'horizontal';
const resizablePanel: ResizablePanelsPanel = { id: 'workspace', label: 'Workspace', size: 68, content: html`<p>Caller-owned workspace.</p>` };
const resizableInspector: ResizablePanelsPanel = { id: 'inspector', label: 'Inspector', size: 32, content: html`<p>Tenant-owned inspector.</p>` };
const resizableChangeEvent: ResizablePanelsChangeEvent = new KeyboardEvent('keydown');
const resizablePanels: ResizablePanelsProps = { id: 'catalog-resizable', panels: [resizablePanel, resizableInspector], orientation: resizablePanelsOrientation, attributes: resizablePanelsAttributes, onSizeChange: (panelId, size, event) => console.log(panelId, size, event.type) };
const navigationRailAttributes: NavigationRailAttributes = { class: 'catalog-navigation-rail' };
const navigationRailItem: NavigationRailItem = { id: 'overview', label: 'Overview', href: '/overview', active: true, icon: html`<span aria-hidden='true'>⌂</span>` };
const navigationRailGroup: NavigationRailGroup = { id: 'workspace', label: 'Workspace', items: [navigationRailItem, { id: 'orders', label: 'Orders', href: '/orders', badge: '4' }] };
const navigationRailEvent: NavigationRailOpenChangeEvent = new MouseEvent('navigation-change');
const navigationRail: NavigationRailProps = { id: 'catalog-navigation-rail', label: 'Workspace navigation', groups: [navigationRailGroup], collapsed: false, mobileOpen: true, header: html`<strong>GLUON</strong>`, footer: html`<small>Tenant workspace</small>`, attributes: navigationRailAttributes, onCollapsedChange: (collapsed, event) => console.log(collapsed, event.type), onMobileOpenChange: (open, event) => console.log(open, event.type) };
const navigationRailButtonAttributes: NavigationRailButtonAttributes = { class: 'rail-control' };
const navigationRailLinkAttributes: NavigationRailLinkAttributes = { class: 'rail-link' };
const navigationRailNavigationAttributes: NavigationRailNavigationAttributes = { aria: { label: 'Workspace navigation links' } };
const navigationRailRegionAttributes: NavigationRailRegionAttributes = { class: 'rail-region' };
console.log(AdminShell(adminShell), AppShell(shell), ApprovalFlow(approvalFlow), AsyncState(asyncState), DashboardShell(dashboardShell), MarketingHeader(marketingHeader), MegaMenu(megaMenu), NavigationRail(navigationRail), NotificationCenter(notificationCenter), OnboardingFlow(onboardingFlow), PageLayout(pageLayout), ProductCard(productCard), ProductGallery(productGallery), ProductGrid(productGrid), ResizablePanels(resizablePanels), SettingsShell(settingsShell), SidebarLayout(sidebarLayout), SiteFooter(footer), SiteHeader(header), SplitPane(splitPane), StatusTracker(statusTracker), Wizard(wizard), ConfirmationDialog(confirmation), WorkflowTimeline(workflow), Autocomplete(autocomplete), MoleculeHoverCard(hoverCard), adminShellStyles, approvalFlowStyles, asyncStateStyles, autocompleteStyles, confirmationDialogStyles, dashboardShellStyles, hoverCardStyles, marketingHeaderStyles, megaMenuStyles, navigationRailStyles, notificationCenterStyles, onboardingFlowStyles, settingsShellStyles, sidebarLayoutStyles, statusTrackerStyles, wizardStyles, organismStyles, pageLayoutStyles, productCardStyles, productGalleryStyles, productGridStyles, resizablePanelsStyles, siteFooterStyles, siteHeaderStyles, workflowTimelineStyles, organismManifest.entries, megaOpenChangeEvent, headerOpenChangeEvent, splitPaneOpenChangeEvent, resizableChangeEvent, navigationRailEvent, navigationRailButtonAttributes, navigationRailLinkAttributes, navigationRailNavigationAttributes, navigationRailRegionAttributes, dashboardOpenChangeEvent, marketingOpenChangeEvent, marketingAttributes, marketingRegionAttributes, marketingNavigationAttributes, marketingTriggerAttributes, sidebarOpenChangeEvent, sidebarAttributes, sidebarRegionAttributes, sidebarNavigationAttributes, sidebarButtonAttributes, settingsOpenChangeEvent, settingsAttributes, settingsRegionAttributes, settingsNavigationAttributes, settingsButtonAttributes, settingsShell, wizardOpenChangeEvent, wizardAttributes, onboardingChangeEvent, onboardingAttributes, approvalChangeEvent, approvalAttributes, statusTrackerAttributes, statusTrackerItem, autocompleteAttributes, autocompleteOption, hoverCardAttributes, hoverCardContentAttributes, hoverCardTriggerAttributes);