@nxds/claude-design 0.0.0-stage → 0.5.0

package/project/components/MultiSelect/README.md

@@ -0,0 +1,122 @@
+# MultiSelect
+
+MultiSelect lets the user search a list and pick several options, shown as chips. Use it for tags, filters and other choices with several answers. For one option, use Combobox or Select.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.MultiSelect">MultiSelect</x-import>
+```
+
+Attributes set props, kebab-case to camelCase. Element content becomes `children`. An attribute holds text, so a prop that takes an element, a function or an object has no attribute.
+
+## Parts
+
+- `Nxds.MultiSelect` — Searchable field for picking several options, shown as chips.
+- `Nxds.MultiSelectContent` — Searchable list of options, shown in a popover.
+- `Nxds.MultiSelectGroup` — Groups related options under an optional `heading`.
+- `Nxds.MultiSelectItem` — Option with a checkbox, found by its `value`, `keywords` or plain-text
+label.
+- `Nxds.MultiSelectSeparator` — Divider between groups or options.
+- `Nxds.MultiSelectTrigger` — Field that shows the selected values, opens the list, and removes the last
+value on Backspace or Delete.
+- `Nxds.MultiSelectValue` — Selected values inside the trigger, shown as removable chips.
+
+## Props
+
+### MultiSelect
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `values` | `string[]` |  | none (object) |
+| `defaultValues` | `string[]` |  | none (object) |
+| `onValuesChange` | `(values: string[]) => void` |  | none (function) |
+
+### MultiSelectContent
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `searchPlaceholder` | `string` | `"Search…"` | text |
+| `emptyMessage` | `React.ReactNode` | `"No results found."` | none (element) |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `align` | `"end" \| "center" \| "start"` | `"start"` | dropdown |
+| `asChild` | `boolean` |  | toggle |
+| `forceMount` | `true` |  | toggle |
+| `onEscapeKeyDown` | `(event: KeyboardEvent) => void` |  | none (function) |
+| `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` |  | none (function) |
+| `onFocusOutside` | `(event: FocusOutsideEvent) => void` |  | none (function) |
+| `onInteractOutside` | `(event: FocusOutsideEvent \| PointerDownOutsideEvent) => void` |  | none (function) |
+| `onOpenAutoFocus` | `(event: Event) => void` |  | none (function) |
+| `onCloseAutoFocus` | `(event: Event) => void` |  | none (function) |
+| `side` | `"top" \| "bottom" \| "left" \| "right"` |  | dropdown |
+| `sideOffset` | `number` | `6` | number |
+| `alignOffset` | `number` |  | number |
+| `arrowPadding` | `number` |  | number |
+| `avoidCollisions` | `boolean` |  | toggle |
+| `collisionBoundary` | `Element \| Boundary[]` |  | none (object) |
+| `collisionPadding` | `number \| Partial<Record<"top" \| "bottom" \| "left" \| "right", number>>` |  | none (object) |
+| `sticky` | `"partial" \| "always"` |  | dropdown |
+| `hideWhenDetached` | `boolean` |  | toggle |
+| `updatePositionStrategy` | `"always" \| "optimized"` |  | dropdown |
+
+### MultiSelectGroup
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+| `heading` | `React.ReactNode` |  | none (element) |
+| `value` | `string` |  | text |
+| `forceMount` | `boolean` |  | toggle |
+
+### MultiSelectItem
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `value` | `string` |  | text |
+| `badgeLabel` | `React.ReactNode` |  | none (element) |
+| `onSelect` | `(value: string) => void` |  | none (function) |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+| `forceMount` | `boolean` |  | toggle |
+| `disabled` | `boolean` |  | toggle |
+| `keywords` | `string[]` |  | none (object) |
+
+### MultiSelectSeparator
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+| `alwaysRender` | `boolean` |  | toggle |
+
+### MultiSelectTrigger
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `disabled` | `boolean` |  | toggle |
+| `name` | `string` |  | text |
+| `type` | `"button" \| "submit" \| "reset"` |  | dropdown |
+| `value` | `string \| number \| readonly string[]` |  | none (object) |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### MultiSelectValue
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `placeholder` | `React.ReactNode` | `"Select options"` | none (element) |
+| `clickToRemove` | `boolean` | `true` | toggle |
+| `overflowBehavior` | `"wrap" \| "wrap-when-open" \| "cutoff"` | `"wrap-when-open"` | dropdown |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |

package/project/components/MultiSelect/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Forms" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>MultiSelect</title>
+<style>
+  body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
+  #root { padding: var(--nx-spacing-6); }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>(()=>{var k=Object.create;var p=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var i=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(l){throw e=0,l}};var h=(t,e,l,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of P(e))!b.call(t,o)&&o!==l&&p(t,o,{get:()=>e[o],enumerable:!(a=E(e,o))||a.enumerable});return t};var u=(t,e,l)=>(l=t!=null?k(R(t)):{},h(e||!t||!t.__esModule?p(l,"default",{value:t,enumerable:!0}):l,t));var f=i((N,d)=>{d.exports=window.Nxds});var s=i((C,S)=>{S.exports=window.React});var g=i((j,M)=>{M.exports={createRoot:window.ReactDOM.createRoot}});var r=u(f());var c=u(s());function w(t,e){return e===void 0?t:{...t,key:e}}function n(t,e,l){return(0,c.createElement)(t,w(e,l))}function y(t,e,l){let{children:a,...o}=e;return(0,c.createElement)(t,w(o,l),...a)}var K=[{value:"react",label:"React"},{value:"vue",label:"Vue"},{value:"svelte",label:"Svelte"},{value:"angular",label:"Angular"},{value:"solid",label:"Solid"},{value:"qwik",label:"Qwik"}];function T({placeholder:t="Select frameworks",triggerClassName:e="nx:w-80",...l}){return y(r.MultiSelect,{...l,children:[n(r.MultiSelectTrigger,{"aria-label":"Frameworks",className:e,children:n(r.MultiSelectValue,{placeholder:t})}),n(r.MultiSelectContent,{searchPlaceholder:"Search frameworks…",emptyMessage:"No frameworks found.",children:K.map(a=>n(r.MultiSelectItem,{value:a.value,children:a.label},a.value))})]})}function m(){return n(T,{})}var v=u(s()),x=u(g());(0,x.createRoot)(document.getElementById("root")).render((0,v.createElement)(m));})();</script>
+</body>
+</html>

package/project/components/NativeSelect/README.md

@@ -0,0 +1,56 @@
+# NativeSelect
+
+NativeSelect styles the browser `<select>`, so mobile users get the system picker. Use it for dense forms and long, plain lists. For a styled dropdown use Select, and for search use Combobox.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.NativeSelect" aria-label="Plan" default-value="pro">
+  <x-import component-from-global-scope="Nxds.NativeSelectOption" value="free">Free</x-import>
+  <x-import component-from-global-scope="Nxds.NativeSelectOption" value="pro">Pro</x-import>
+  <x-import component-from-global-scope="Nxds.NativeSelectOption" value="team">Team</x-import>
+</x-import>
+```
+
+Attributes set props, kebab-case to camelCase. Element content becomes `children`. An attribute holds text, so a prop that takes an element, a function or an object has no attribute.
+
+## Parts
+
+- `Nxds.NativeSelect` — Styled native `<select>` that opens the system picker on mobile.
+- `Nxds.NativeSelectOptGroup` — `<optgroup>` for grouping `NativeSelect` options.
+- `Nxds.NativeSelectOption` — `<option>` for `NativeSelect`.
+
+## Props
+
+### NativeSelect
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `name` | `string` |  | text |
+| `disabled` | `boolean` |  | toggle |
+| `value` | `string \| number \| readonly string[]` |  | none (object) |
+| `required` | `boolean` |  | toggle |
+| `variant` | `"bordered" \| "borderless"` | `"bordered"` | dropdown |
+| `size` | `"default" \| "sm"` | `"default"` | dropdown |
+
+### NativeSelectOptGroup
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `disabled` | `boolean` |  | toggle |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### NativeSelectOption
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `disabled` | `boolean` |  | toggle |
+| `value` | `string \| number \| readonly string[]` |  | none (object) |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |

package/project/components/NativeSelect/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Forms" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>NativeSelect</title>
+<style>
+  body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
+  #root { padding: var(--nx-spacing-6); }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>(()=>{var P=Object.create;var s=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var c=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(r){throw e=0,r}};var g=(t,e,r,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of K(e))!T.call(t,o)&&o!==r&&s(t,o,{get:()=>e[o],enumerable:!(a=R(e,o))||a.enumerable});return t};var i=(t,e,r)=>(r=t!=null?P(O(t)):{},g(e||!t||!t.__esModule?s(r,"default",{value:t,enumerable:!0}):r,t));var f=c((D,d)=>{d.exports=window.Nxds});var m=c((j,y)=>{y.exports=window.React});var E=c((k,w)=>{w.exports={createRoot:window.ReactDOM.createRoot}});var n=i(f());var l=i(m());function v(t,e){return e===void 0?t:{...t,key:e}}function p(t,e,r){return(0,l.createElement)(t,v(e,r))}function x(t,e,r){let{children:a,...o}=e;return(0,l.createElement)(t,v(o,r),...a)}function u(){return x(n.NativeSelect,{"aria-label":"Plan",defaultValue:"pro",children:[p(n.NativeSelectOption,{value:"free",children:"Free"}),p(n.NativeSelectOption,{value:"pro",children:"Pro"}),p(n.NativeSelectOption,{value:"team",children:"Team"})]})}var N=i(m()),S=i(E());(0,S.createRoot)(document.getElementById("root")).render((0,N.createElement)(u));})();</script>
+</body>
+</html>

package/project/components/NavigationMenu/README.md

@@ -0,0 +1,153 @@
+# NavigationMenu
+
+NavigationMenu shows top-level site links, with flyout panels for groups of pages. Use it for a website header. For app commands, use Menubar.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.NavigationMenu">
+  <x-import component-from-global-scope="Nxds.NavigationMenuList">
+    <x-import component-from-global-scope="Nxds.NavigationMenuItem">
+      <x-import component-from-global-scope="Nxds.NavigationMenuTrigger">Products</x-import>
+      <x-import component-from-global-scope="Nxds.NavigationMenuContent">
+        <ul class="nx:grid nx:w-[320px] nx:gap-1 nx:p-2">
+          <li>
+            <x-import component-from-global-scope="Nxds.NavigationMenuLink" href="#analytics">Analytics</x-import>
+          </li>
+          <li>
+            <x-import component-from-global-scope="Nxds.NavigationMenuLink" href="#automation">Automation</x-import>
+          </li>
+          <li>
+            <x-import component-from-global-scope="Nxds.NavigationMenuLink" href="#reports">Reports</x-import>
+          </li>
+        </ul>
+      </x-import>
+    </x-import>
+    <x-import component-from-global-scope="Nxds.NavigationMenuItem">
+      <x-import component-from-global-scope="Nxds.NavigationMenuTrigger">Company</x-import>
+      <x-import component-from-global-scope="Nxds.NavigationMenuContent">
+        <ul class="nx:grid nx:w-[320px] nx:gap-1 nx:p-2">
+          <li>
+            <x-import component-from-global-scope="Nxds.NavigationMenuLink" href="#about">About</x-import>
+          </li>
+          <li>
+            <x-import component-from-global-scope="Nxds.NavigationMenuLink" href="#careers">Careers</x-import>
+          </li>
+        </ul>
+      </x-import>
+    </x-import>
+  </x-import>
+</x-import>
+```
+
+Attributes set props, kebab-case to camelCase. Element content becomes `children`. An attribute holds text, so a prop that takes an element, a function or an object has no attribute.
+
+## Parts
+
+- `Nxds.NavigationMenu` — Top-level site navigation with flyout panels.
+- `Nxds.NavigationMenuContent` — Flyout panel for a navigation item.
+- `Nxds.NavigationMenuIndicator` — Small arrow from the open trigger to its flyout.
+- `Nxds.NavigationMenuItem` — One top-level navigation item, with its trigger and content.
+- `Nxds.NavigationMenuLink` — Link inside a flyout panel.
+- `Nxds.NavigationMenuList` — Horizontal list of top-level navigation items.
+- `Nxds.NavigationMenuTrigger` — Button that opens the item's flyout.
+- `Nxds.NavigationMenuViewport` — Shared panel that shows the open item's content.
+
+## Props
+
+### NavigationMenu
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `viewport` | `boolean` | `true` | toggle |
+| `value` | `string` |  | text |
+| `defaultValue` | `string` |  | text |
+| `onValueChange` | `(value: string) => void` |  | none (function) |
+| `dir` | `"ltr" \| "rtl"` |  | dropdown |
+| `orientation` | `"horizontal" \| "vertical"` |  | dropdown |
+| `delayDuration` | `number` |  | number |
+| `skipDelayDuration` | `number` |  | number |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+
+### NavigationMenuContent
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `forceMount` | `true` |  | toggle |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+| `onEscapeKeyDown` | `(event: KeyboardEvent) => void` |  | none (function) |
+| `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` |  | none (function) |
+| `onFocusOutside` | `(event: FocusOutsideEvent) => void` |  | none (function) |
+| `onInteractOutside` | `(event: FocusOutsideEvent \| PointerDownOutsideEvent) => void` |  | none (function) |
+
+### NavigationMenuIndicator
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `forceMount` | `true` |  | toggle |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+
+### NavigationMenuItem
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `value` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+
+### NavigationMenuLink
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `active` | `boolean` |  | toggle |
+| `onSelect` | `(event: Event) => void` |  | none (function) |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `target` | `HTMLAttributeAnchorTarget` |  | none (object) |
+| `type` | `string` |  | text |
+| `href` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+
+### NavigationMenuList
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+
+### NavigationMenuTrigger
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `name` | `string` |  | text |
+| `type` | `"button" \| "submit" \| "reset"` |  | dropdown |
+| `asChild` | `boolean` |  | toggle |
+| `disabled` | `boolean` |  | toggle |
+| `value` | `string \| number \| readonly string[]` |  | none (object) |
+
+### NavigationMenuViewport
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `forceMount` | `true` |  | toggle |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |

package/project/components/NavigationMenu/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Navigation" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>NavigationMenu</title>
+<style>
+  body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
+  #root { padding: var(--nx-spacing-6); }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>(()=>{var h=Object.create;var c=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var p=(n,e)=>()=>{try{return e||n((e={exports:{}}).exports,e),e.exports}catch(o){throw e=0,o}};var P=(n,e,o,u)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of L(e))!R.call(n,a)&&a!==o&&c(n,a,{get:()=>e[a],enumerable:!(u=E(e,a))||u.enumerable});return n};var g=(n,e,o)=>(o=n!=null?h(k(n)):{},P(e||!n||!n.__esModule?c(o,"default",{value:n,enumerable:!0}):o,n));var M=p((C,N)=>{N.exports=window.Nxds});var s=p((K,v)=>{v.exports=window.React});var d=p((b,f)=>{f.exports={createRoot:window.ReactDOM.createRoot}});var t=g(M());var l=g(s());function x(n,e){return e===void 0?n:{...n,key:e}}function i(n,e,o){return(0,l.createElement)(n,x(e,o))}function r(n,e,o){let{children:u,...a}=e;return(0,l.createElement)(n,x(a,o),...u)}function m(){return i(t.NavigationMenu,{children:r(t.NavigationMenuList,{children:[r(t.NavigationMenuItem,{children:[i(t.NavigationMenuTrigger,{children:"Products"}),i(t.NavigationMenuContent,{children:r("ul",{className:"nx:grid nx:w-[320px] nx:gap-1 nx:p-2",children:[i("li",{children:i(t.NavigationMenuLink,{href:"#analytics",children:"Analytics"})}),i("li",{children:i(t.NavigationMenuLink,{href:"#automation",children:"Automation"})}),i("li",{children:i(t.NavigationMenuLink,{href:"#reports",children:"Reports"})})]})})]}),r(t.NavigationMenuItem,{children:[i(t.NavigationMenuTrigger,{children:"Company"}),i(t.NavigationMenuContent,{children:r("ul",{className:"nx:grid nx:w-[320px] nx:gap-1 nx:p-2",children:[i("li",{children:i(t.NavigationMenuLink,{href:"#about",children:"About"})}),i("li",{children:i(t.NavigationMenuLink,{href:"#careers",children:"Careers"})})]})})]})]})})}var y=g(s()),w=g(d());(0,w.createRoot)(document.getElementById("root")).render((0,y.createElement)(m));})();</script>
+</body>
+</html>

package/project/components/PageHeader/README.md

@@ -0,0 +1,86 @@
+# PageHeader
+
+PageHeader titles a page or section, with optional metadata, status, description and actions. Compact, standard and detail headers are compositions of the same parts, not variants.
+
+- The title renders an `h1`. Use `asChild` to pick another heading level.
+- For a larger title, add `className="nx:typography-heading-large"` to PageHeaderTitle.
+- Put page headers inside `main` and section headers inside their `section`.
+- Actions wrap below the content in narrow containers. Your app owns what they do.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.PageHeader">PageHeader</x-import>
+```
+
+Attributes set props, kebab-case to camelCase. Element content becomes `children`. An attribute holds text, so a prop that takes an element, a function or an object has no attribute.
+
+## Parts
+
+- `Nxds.PageHeader` — Title block of a page or section, with optional description, metadata and
+primary actions.
+- `Nxds.PageHeaderActions` — Primary actions of the page.
+- `Nxds.PageHeaderContent` — Stack of metadata, title and description.
+- `Nxds.PageHeaderDescription` — Supporting text under the title.
+- `Nxds.PageHeaderMeta` — Short line above the title, such as a record ID or parent project.
+- `Nxds.PageHeaderTitle` — Title of the page or section, rendered as an `h1`.
+- `Nxds.PageHeaderTitleRow` — Row that puts a status, such as a Badge, beside the title.
+
+## Props
+
+### PageHeader
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### PageHeaderActions
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### PageHeaderContent
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### PageHeaderDescription
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### PageHeaderMeta
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### PageHeaderTitle
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `asChild` | `boolean` | `false` | toggle |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### PageHeaderTitleRow
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |

package/project/components/PageHeader/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Navigation" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>PageHeader</title>
+<style>
+  body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
+  #root { padding: var(--nx-spacing-6); }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>(()=>{var h=Object.create;var x=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var m=(e,t)=>()=>{try{return t||e((t={exports:{}}).exports,t),t.exports}catch(r){throw t=0,r}};var B=(e,t,r,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of K(t))!v.call(e,n)&&n!==r&&x(e,n,{get:()=>t[n],enumerable:!(d=D(t,n))||d.enumerable});return e};var i=(e,t,r)=>(r=e!=null?h(T(e)):{},B(t||!e||!e.__esModule?x(r,"default",{value:e,enumerable:!0}):r,e));var s=m((j,y)=>{y.exports=window.Nxds});var u=m((C,P)=>{P.exports=window.React});var H=m((I,w)=>{w.exports={createRoot:window.ReactDOM.createRoot}});var l=i(s()),o=i(s());var p=i(u());function g(e,t){return t===void 0?e:{...e,key:t}}function a(e,t,r){return(0,p.createElement)(e,g(t,r))}function c(e,t,r){let{children:d,...n}=t;return(0,p.createElement)(e,g(n,r),...d)}function N({title:e=a(o.PageHeaderTitle,{children:"Activity report"})}){return c(o.PageHeader,{children:[c(o.PageHeaderContent,{children:[e,a(o.PageHeaderDescription,{children:"Review activity for the selected period."})]}),c(o.PageHeaderActions,{children:[a(l.Button,{variant:"outline",children:"Export"}),a(l.Button,{children:"Share"})]})]})}function f(){return a("main",{className:"nx:w-full nx:max-w-5xl nx:p-4",children:a(N,{})})}var R=i(u()),E=i(H());(0,E.createRoot)(document.getElementById("root")).render((0,R.createElement)(f));})();</script>
+</body>
+</html>

package/project/components/Pagination/README.md

@@ -0,0 +1,123 @@
+# Pagination
+
+Pagination links to the pages of a long list or table. Use it when results are split across pages. Your app decides which page numbers to show.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.Pagination">
+  <x-import component-from-global-scope="Nxds.PaginationContent">
+    <x-import component-from-global-scope="Nxds.PaginationItem">
+      <x-import component-from-global-scope="Nxds.PaginationPrevious" href="#"></x-import>
+    </x-import>
+    <x-import component-from-global-scope="Nxds.PaginationItem">
+      <x-import component-from-global-scope="Nxds.PaginationLink" href="#">1</x-import>
+    </x-import>
+    <x-import component-from-global-scope="Nxds.PaginationItem">
+      <x-import component-from-global-scope="Nxds.PaginationLink" href="#" is-active>2</x-import>
+    </x-import>
+    <x-import component-from-global-scope="Nxds.PaginationItem">
+      <x-import component-from-global-scope="Nxds.PaginationLink" href="#">3</x-import>
+    </x-import>
+    <x-import component-from-global-scope="Nxds.PaginationItem">
+      <x-import component-from-global-scope="Nxds.PaginationEllipsis"></x-import>
+    </x-import>
+    <x-import component-from-global-scope="Nxds.PaginationItem">
+      <x-import component-from-global-scope="Nxds.PaginationLink" href="#">10</x-import>
+    </x-import>
+    <x-import component-from-global-scope="Nxds.PaginationItem">
+      <x-import component-from-global-scope="Nxds.PaginationNext" href="#"></x-import>
+    </x-import>
+  </x-import>
+</x-import>
+```
+
+Attributes set props, kebab-case to camelCase. Element content becomes `children`. An attribute holds text, so a prop that takes an element, a function or an object has no attribute.
+
+## Parts
+
+- `Nxds.Pagination` — Page navigation for lists and tables, in a `navigation` landmark.
+- `Nxds.PaginationContent` — `<ul>` that lays out the pagination items in a row.
+- `Nxds.PaginationEllipsis` — Marker for skipped page numbers.
+- `Nxds.PaginationItem` — One `<li>` in the pagination row.
+- `Nxds.PaginationLink` — Page number link styled as a `ghost` button, or `outline` for the current
+page.
+- `Nxds.PaginationNext` — Link to the next page, with the label "Next" and a right chevron.
+- `Nxds.PaginationPrevious` — Link to the previous page, with a left chevron and the label "Previous".
+
+## Props
+
+### Pagination
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### PaginationContent
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### PaginationEllipsis
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### PaginationItem
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `value` | `string \| number \| readonly string[]` |  | none (object) |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### PaginationLink
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `isActive` | `boolean` |  | toggle |
+| `asChild` | `boolean` | `false` | toggle |
+| `href` | `string` |  | text |
+| `target` | `HTMLAttributeAnchorTarget` |  | none (object) |
+| `type` | `string` |  | text |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+| `size` | `"default" \| "sm" \| "lg" \| "icon-sm" \| "icon" \| "icon-lg"` | `"icon"` | dropdown |
+
+### PaginationNext
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `isActive` | `boolean` |  | toggle |
+| `asChild` | `boolean` | `false` | toggle |
+| `href` | `string` |  | text |
+| `target` | `HTMLAttributeAnchorTarget` |  | none (object) |
+| `type` | `string` |  | text |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+| `size` | `"default" \| "sm" \| "lg" \| "icon-sm" \| "icon" \| "icon-lg"` | `"default"` | dropdown |
+
+### PaginationPrevious
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `isActive` | `boolean` |  | toggle |
+| `asChild` | `boolean` | `false` | toggle |
+| `href` | `string` |  | text |
+| `target` | `HTMLAttributeAnchorTarget` |  | none (object) |
+| `type` | `string` |  | text |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+| `size` | `"default" \| "sm" \| "lg" \| "icon-sm" \| "icon" \| "icon-lg"` | `"default"` | dropdown |

package/project/components/Pagination/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Navigation" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Pagination</title>
+<style>
+  body { margin: 0; background: var(--nx-color-background); color: var(--nx-color-foreground); font-family: var(--font-sans); }
+  #root { padding: var(--nx-spacing-6); }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>(()=>{var I=Object.create;var f=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var g=(e,t)=>()=>{try{return t||e((t={exports:{}}).exports,t),t.exports}catch(o){throw t=0,o}};var D=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of R(t))!L.call(e,a)&&a!==o&&f(e,a,{get:()=>t[a],enumerable:!(r=k(t,a))||r.enumerable});return e};var m=(e,t,o)=>(o=e!=null?I(K(e)):{},D(t||!e||!e.__esModule?f(o,"default",{value:e,enumerable:!0}):o,e));var u=g((j,c)=>{c.exports=window.Nxds});var p=g((v,d)=>{d.exports=window.React});var h=g((B,x)=>{x.exports={createRoot:window.ReactDOM.createRoot}});var n=m(u());var P=m(p());function l(e,t){return t===void 0?e:{...e,key:t}}function i(e,t,o){return(0,P.createElement)(e,l(t,o))}function y(e,t,o){let{children:r,...a}=t;return(0,P.createElement)(e,l(a,o),...r)}function s(){return i(n.Pagination,{children:y(n.PaginationContent,{children:[i(n.PaginationItem,{children:i(n.PaginationPrevious,{href:"#"})}),i(n.PaginationItem,{children:i(n.PaginationLink,{href:"#",children:"1"})}),i(n.PaginationItem,{children:i(n.PaginationLink,{href:"#",isActive:!0,children:"2"})}),i(n.PaginationItem,{children:i(n.PaginationLink,{href:"#",children:"3"})}),i(n.PaginationItem,{children:i(n.PaginationEllipsis,{})}),i(n.PaginationItem,{children:i(n.PaginationLink,{href:"#",children:"10"})}),i(n.PaginationItem,{children:i(n.PaginationNext,{href:"#"})})]})})}var w=m(p()),E=m(h());(0,E.createRoot)(document.getElementById("root")).render((0,w.createElement)(s));})();</script>
+</body>
+</html>