Liquid UI Package

@kcascend/liquid-ui is the reusable UI package for Liquid Design System consumers.

Local development

1. Run npm install from the repository root to install the local file dependency.
2. Run npm run build:ui to rebuild the package outputs in packages/liquid-ui/dist.
3. Run npm run storybook to rebuild the package and launch Storybook against the package boundary.

Grid usage

The package exposes a grid primitive through GridLayout and GridColumn, plus an approved layout catalog for application shells and content regions.

import {
  approvedContentLayoutPatterns,
  GridColumn,
  GridLayout,
} from '@kcascend/liquid-ui';

export function Example() {
  const layout = approvedContentLayoutPatterns.sidebarEnd;

  return (
    <GridLayout as="div">
      <GridColumn {...layout.regions.primary}>Primary</GridColumn>
      <GridColumn {...layout.regions.secondary}>Secondary</GridColumn>
    </GridLayout>
  );
}

Supported layout features:

• Responsive spans through sm, md, lg, xlg, and max.
• Offset columns with object values like md={{ span: 4, offset: 2 }}.
• Gutter modes with narrow and condensed.
• withRowGap to keep vertical spacing aligned with the active gutter.
• fullWidth for viewport-spanning layouts.
• subgrid for nested grids that inherit the parent column scaffold.
• Auto columns when a GridColumn is rendered without explicit breakpoint props.

Application shell geometry

The Figma application-shell pattern is the canonical geometry for product shells:

• Header: 48px
• Left product-navigation panel: 256px
• Right application-information panel: 256px
• Compact transformation breakpoint: 672px

Import applicationShellGeometry rather than reproducing these values in consumer CSS. The geometry is sourced from Figma node 3307:3; its runtime composition and accessibility behavior remain governed by the exported shell components.

ProductNavigationPanel provides product-local destinations and expandable route groups, with controlled or uncontrolled active-route and disclosure state. ApplicationInformationPanel provides the separate application-wide utility disclosure. It requires privacyHref, termsOfUseHref, and non-link copyright metadata; optional utility rows are supplied by the consumer. Pass the same configuration through HeaderShell.applicationInformation to render its independent header trigger.

Approved layout guidance:

• Start application shells from approvedShellRows.
• Start page content from approvedContentLayoutPatterns.
• Introduce a bespoke breakpoint map only when a screen cannot be expressed by the approved patterns and that exception is documented in a spec.

Figma governance

Every reusable component must record an approved Figma reference in story metadata or component documentation before it is considered ready for review. The initial workflow example in this package uses the Liquid token source in Figma

Storybook now demonstrates both patterns:

• a package-consumed button component with Figma and accessibility metadata
• a token values reference story that reads directly from the generated tokens export

Accessibility verification

Each component review must include:

• Keyboard interaction expectations when the component is interactive.
• Name, role, and state guidance for assistive technologies.
• Color contrast and focus treatment verification.
• Storybook documentation that explains any usage constraints needed to stay WCAG 2.1 aligned.