@nxds/claude-design 0.0.0-stage → 0.5.0

package/project/components/Attachment/README.md

@@ -0,0 +1,127 @@
+# Attachment
+
+Attachment shows one file with its preview, name, size and upload state. Use it in upload queues and message composers. For a general list row, use Item.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.Attachment" class-name="nx:w-80">
+  <x-import component-from-global-scope="Nxds.AttachmentMedia" variant="icon">
+    <x-import component-from-global-scope="Nxds.Icons.IconFileTypePdf"></x-import>
+  </x-import>
+  <x-import component-from-global-scope="Nxds.AttachmentContent">
+    <x-import component-from-global-scope="Nxds.AttachmentTitle">report.pdf</x-import>
+    <x-import component-from-global-scope="Nxds.AttachmentDescription">2.4 MB</x-import>
+  </x-import>
+  <x-import component-from-global-scope="Nxds.AttachmentActions">
+    <x-import component-from-global-scope="Nxds.Button" variant="ghost" size="icon-sm" aria-label="Remove report.pdf">
+      <x-import component-from-global-scope="Nxds.Icons.IconX"></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.Attachment` — One file with its preview, name, size, actions and upload state.
+- `Nxds.AttachmentActions` — Trailing controls, such as remove or retry.
+- `Nxds.AttachmentContent` — Middle column for the title, description and progress.
+- `Nxds.AttachmentDescription` — Line under the file name, such as size or an error reason.
+- `Nxds.AttachmentGroup` — Horizontally scrolling strip of attachments.
+- `Nxds.AttachmentMedia` — Thumbnail or file-type icon.
+- `Nxds.AttachmentProgress` — Upload progress bar for `AttachmentContent`.
+- `Nxds.AttachmentTitle` — File name, truncated to one line.
+- `Nxds.AttachmentTrigger` — Makes the whole card open or preview the file.
+
+## Props
+
+### Attachment
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `state` | `"done" \| "error" \| "idle" \| "uploading" \| "processing"` | `"done"` | dropdown |
+| `statusLabel` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `size` | `"default" \| "sm"` | `"default"` | dropdown |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | dropdown |
+
+### AttachmentActions
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### AttachmentContent
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### AttachmentDescription
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### AttachmentGroup
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `aria-label` | `string` |  | text |
+| `aria-labelledby` | `string` |  | text |
+
+### AttachmentMedia
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+| `variant` | `"image" \| "default" \| "icon"` | `"default"` | dropdown |
+
+### AttachmentProgress
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `value` | `number` |  | number |
+| `max` | `number` |  | number |
+| `getValueLabel` | `(value: number, max: number) => string` |  | none (function) |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+
+### AttachmentTitle
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `trailing` | `React.ReactNode` |  | none (element) |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### AttachmentTrigger
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `asChild` | `boolean` | `false` | toggle |
+| `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 |

package/project/components/Attachment/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Messaging" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Attachment</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 g=Object.create;var u=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var i=(e,t)=>()=>{try{return t||e((t={exports:{}}).exports,t),t.exports}catch(o){throw t=0,o}};var N=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of I(t))!v.call(e,c)&&c!==o&&u(e,c,{get:()=>t[c],enumerable:!(a=B(t,c))||a.enumerable});return e};var m=(e,t,o)=>(o=e!=null?g(M(e)):{},N(t||!e||!e.__esModule?u(o,"default",{value:e,enumerable:!0}):o,e));var y=i((C,A)=>{A.exports=window.Nxds.Icons});var d=i((F,x)=>{x.exports=window.Nxds});var f=i((b,w)=>{w.exports=window.React});var T=i((S,P)=>{P.exports={createRoot:window.ReactDOM.createRoot}});var s=m(y()),n=m(d()),R=m(d());var p=m(f());function E(e,t){return t===void 0?e:{...e,key:t}}function r(e,t,o){return(0,p.createElement)(e,E(t,o))}function l(e,t,o){let{children:a,...c}=t;return(0,p.createElement)(e,E(c,o),...a)}function h(){return l(n.Attachment,{className:"nx:w-80",children:[r(n.AttachmentMedia,{variant:"icon",children:r(s.IconFileTypePdf,{})}),l(n.AttachmentContent,{children:[r(n.AttachmentTitle,{children:"report.pdf"}),r(n.AttachmentDescription,{children:"2.4 MB"})]}),r(n.AttachmentActions,{children:r(R.Button,{variant:"ghost",size:"icon-sm","aria-label":"Remove report.pdf",children:r(s.IconX,{})})})]})}var D=m(f()),K=m(T());(0,K.createRoot)(document.getElementById("root")).render((0,D.createElement)(h));})();</script>
+</body>
+</html>

package/project/components/Avatar/README.md

@@ -0,0 +1,76 @@
+# Avatar
+
+Avatar shows a person's profile image, with initials as the fallback. Use AvatarGroup to stack several people and AvatarStatus to show presence.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.Avatar" size="md" shape="circle" ring="false">
+  <x-import component-from-global-scope="Nxds.AvatarImage" src="/avatars/ada.svg" alt="Ada Lovelace"></x-import>
+  <x-import component-from-global-scope="Nxds.AvatarFallback">AL</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.Avatar` — Shows a person's profile image, with initials or an icon as the fallback.
+- `Nxds.AvatarFallback` — Shows while the image loads or if it fails, usually initials or an icon.
+- `Nxds.AvatarGroup`
+- `Nxds.AvatarImage` — Profile image.
+- `Nxds.AvatarStatus` — Presence dot in the avatar's corner, with a hidden label such as "Online" for screen readers.
+
+## Props
+
+### Avatar
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `ring` | `boolean` | `false` | toggle |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+| `size` | `"sm" \| "lg" \| "2xs" \| "xs" \| "md" \| "xl" \| "2xl" \| "3xl" \| "4xl"` | `"md"` | dropdown |
+| `shape` | `"circle" \| "rounded"` | `"circle"` | dropdown |
+
+### AvatarFallback
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `delayMs` | `number` |  | number |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+
+### AvatarGroup
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `max` | `number` |  | number |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+| `size` | `"sm" \| "lg" \| "2xs" \| "xs" \| "md" \| "xl" \| "2xl" \| "3xl" \| "4xl"` | `"md"` | dropdown |
+| `shape` | `"circle" \| "rounded"` | `"circle"` | dropdown |
+
+### AvatarImage
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `onLoadingStatusChange` | `(status: ImageLoadingStatus) => void` |  | none (function) |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+
+### AvatarStatus
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `label` | `string` |  | text |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `status` | `"online" \| "away" \| "busy" \| "offline"` | `"online"` | dropdown |

package/project/components/Avatar/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Data display" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Avatar</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 Z=Object.create;var C=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var n=Object.getPrototypeOf,o=Object.prototype.hasOwnProperty;var u=(L,M)=>()=>{try{return M||L((M={exports:{}}).exports,M),M.exports}catch(j){throw M=0,j}};var b=(L,M,j,I)=>{if(M&&typeof M=="object"||typeof M=="function")for(let N of E(M))!o.call(L,N)&&N!==j&&C(L,N,{get:()=>M[N],enumerable:!(I=d(M,N))||I.enumerable});return L};var y=(L,M,j)=>(j=L!=null?Z(n(L)):{},b(M||!L||!L.__esModule?C(j,"default",{value:L,enumerable:!0}):j,L));var A=u((p,S)=>{S.exports=window.Nxds});var i=u((O,z)=>{z.exports=window.React});var x=u((v,m)=>{m.exports={createRoot:window.ReactDOM.createRoot}});var g=y(A());var t=y(i());function e(L,M){return M===void 0?L:{...L,key:M}}function c(L,M,j){return(0,t.createElement)(L,e(M,j))}function D(L,M,j){let{children:I,...N}=M;return(0,t.createElement)(L,e(N,j),...I)}function T(){return D(g.Avatar,{size:"md",shape:"circle",ring:!1,children:[c(g.AvatarImage,{src:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NjAgNTYwIiBmaWxsPSJub25lIiBzaGFwZS1yZW5kZXJpbmc9ImF1dG8iPjxtZXRhZGF0YSB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnhzaT0iaHR0cDovL3d3dy53My5vcmcvMjAwMS9YTUxTY2hlbWEtaW5zdGFuY2UiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6ZGN0ZXJtcz0iaHR0cDovL3B1cmwub3JnL2RjL3Rlcm1zLyI+PHJkZjpSREY+PHJkZjpEZXNjcmlwdGlvbj48ZGM6dGl0bGU+Tm90aW9uaXN0czwvZGM6dGl0bGU+PGRjOmNyZWF0b3I+Wm9pc2g8L2RjOmNyZWF0b3I+PGRjOnNvdXJjZSB4c2k6dHlwZT0iZGN0ZXJtczpVUkkiPmh0dHBzOi8vaGV5em9pc2guZ3Vtcm9hZC5jb20vbC9ub3Rpb25pc3RzPC9kYzpzb3VyY2U+PGRjdGVybXM6bGljZW5zZSB4c2k6dHlwZT0iZGN0ZXJtczpVUkkiPmh0dHBzOi8vY3JlYXRpdmVjb21tb25zLm9yZy9wdWJsaWNkb21haW4vemVyby8xLjAvPC9kY3Rlcm1zOmxpY2Vuc2U+PGRjOnJpZ2h0cz5SZW1peCBvZiDigJ5Ob3Rpb25pc3Rz4oCdIChodHRwczovL2hleXpvaXNoLmd1bXJvYWQuY29tL2wvbm90aW9uaXN0cykgYnkg4oCeWm9pc2jigJ0sIGxpY2Vuc2VkIHVuZGVyIOKAnkNDMCAxLjDigJ0gKGh0dHBzOi8vY3JlYXRpdmVjb21tb25zLm9yZy9wdWJsaWNkb21haW4vemVyby8xLjAvKTwvZGM6cmlnaHRzPjwvcmRmOkRlc2NyaXB0aW9uPjwvcmRmOlJERj48L21ldGFkYXRhPjxtYXNrIGlkPSJ2aWV3Ym94TWFzayI+PHJlY3Qgd2lkdGg9IjU2MCIgaGVpZ2h0PSI1NjAiIHJ4PSIwIiByeT0iMCIgeD0iMCIgeT0iMCIgZmlsbD0iI2ZmZiIgLz48L21hc2s+PGcgbWFzaz0idXJsKCN2aWV3Ym94TWFzaykiPjxyZWN0IGZpbGw9IiNmZmM1Y2QiIHdpZHRoPSI1NjAiIGhlaWdodD0iNTYwIiB4PSIwIiB5PSIwIiAvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzNiAzMjgpIj48cGF0aCBkPSJNODAuNyA2NS40Yy0xLjEtNC42LTIuOC04LjggMi0xMC44Qzg2LjcgNTMgOTAgNTUgOTMgNThhNzYgNzYgMCAwIDAgMzQuNCAyMWMyNyA2LjcgNTEtLjUgNzEuMi0xOS45IDMuNC0zLjIgNi43LTYuNSAxMC4yLTkuNSAyLjQtMiA1LjEtMy4yIDgtLjcgMyAyLjcgMS41IDUuNC0uMSA4LTEzLjYgMjEuNC0zMS43IDM1LjgtNTguMSAzNy04IC4zLTE2LjEgMS0yNC4xLjgtMjIuNC0uNi0zOC0xNC4zLTUzLjgtMjkuM1pNNDkuMyA1NC41Yy40LTE1LjUgOC0yNS40IDE5LjctMzMgNC43LTMgOS40LTQgMTQuNS0yLjcgMy4zIDEgNi41IDIuNyA3IDYuNi43IDQuMy0yLjQgNS42LTYgNi44YTMwLjUgMzAuNSAwIDAgMC0yMS40IDIyLjljLTEgNC4zLTIgOS03IDkuNC01LjkuNi01LjItNS40LTYuOC0xMFpNMjMwLjQgMzVjMC04LjggNS40LTcuNCA5LjctNiA3LjIgMi4zIDE2IDE4LjYgMTQuNyAyNi41LS40IDIuNS0uNCA1LjMtMy4zIDYuNC0zLjQgMS4zLTUuOC0uNC03LjUtMy4xYTcxMCA3MTAgMCAwIDEtMTMuNi0yMy45WiIgZmlsbD0iIzAwMCIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNDYgMTI1KSI+PHBhdGggZD0iTTQxLjIgMTk3LjZjLTUuNC00LjgtMTAuMi05LjQtNS41LTE1LjggNS02LjcgOS44LjEgMTQuNyAxLjQgMy4yLjkgNS42IDQuNCA5LjMgMy4zIDYuNS0xLjggMTQtMi41IDE1LTExLjQuOC04LjUtNi0xMC41LTExLjctMTMuMS00LjQtMi0xMyAxLTExLjMtOCAxLjUtOC4zIDkuMS03LjcgMTUuNi03LjFhMjUgMjUgMCAwIDEgMjQgMjVjLjUgMTYuMi04LjQgMjguNS0yMy4zIDMwLTguNyAxLTE4IDItMjYuOC00LjNaIiBmaWxsPSIjMDAwIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00NSAxMzcpIj48cGF0aCBkPSJNNDE5LjYgMTExYy00LjItOS41LTkuOS0xNS4yLTE5LjgtMTUuNy02LS4zLTctNS4xLTguOS05LjggMi0xLjUgMy41LTMuNyA1LjMtMy44IDIxLjEtMS43IDQyLjQtMS44IDYzLjUtLjEgNiAuNCA5LjMgOCAzLjIgMTAuNC0xMCA0LTEyLjUgMTMuMi0xOC41IDE5LjgtOC4yIDktMTUuMiA5LjEtMjQuOC0uOFpNMjI4LjYgODEuNGMxMi4yLjcgMjMuMSAxIDM0IDIgMy42LjMgOCAxLjggOCA2LjcgMCA1LjYtNC42IDUuMi04LjMgNS4xLTYuMyAwLTkuNyAyLjctMTIuNSA4LjYtMy40IDcuNC02LjkgMTUuMy0xOCAxNC44LTEwLjUtLjUtMTUuMS03LjItMTguMS0xNS4yLTIuMi01LjctNS04LjQtMTEtOC4yLTMuNC4xLTcuMS0uMi03LjUtNC45LS40LTUgMy02IDctNy4yYTY3LjkgNjcuOSAwIDAgMSAyNi40LTEuN1oiIGZpbGw9IiMwMDAiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQ1IDEzNykiPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMTkgMTE0KSI+PHBhdGggZD0iTTU3LjUgNDEuOEM1MS4zIDQxLjMgNDYgNDEgNDEgNDFjLTUuNy0uMi04LjUtMy40LTktOC44LS41LTUuMyAzLTcgNy41LTguNSA4LjYtMyAxNy4xLS41IDI1LjIuNyAxNS40IDIuMSAzMS41LS42IDQ2LjQgNi4zIDUgMi4zIDguMyA0LjcgNi40IDEwLjMtMS44IDUuMi02LjEgNS4yLTEwLjYgNC4xLTE2LTMuNy0zMi40LjktNDkuNC0zLjNaTTI1MS44IDMyYzE3LjIuOSAzMy4xLTUgNDkuMy0xLjIgNCAxIDkgLjcgOC44IDcgMCA2LjItNC43IDcuNC05LjUgOC0xOSAyLjItMzggNC01Ni45IDYuNC01LjcuNy0xMSAuMS0xMi42LTUuNi0xLjctNS43IDQtNy44IDgtMTAgMy41LTIuMSA3LjgtMy4xIDEyLjktNC43WiIgZmlsbD0iIzAwMCIvPjwvZz48L2c+PC9zdmc+",alt:"Ada Lovelace"}),c(g.AvatarFallback,{children:"AL"})]})}var a=y(i()),Y=y(x());(0,Y.createRoot)(document.getElementById("root")).render((0,a.createElement)(T));})();</script>
+</body>
+</html>

package/project/components/Badge/README.md

@@ -0,0 +1,27 @@
+# Badge
+
+Badge labels an item with a short status, category or count. It is not interactive. Pair a status color with text or an icon, because color alone doesn't carry meaning.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.Badge">Badge</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.
+
+## Props
+
+### Badge
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `isCaps` | `boolean` | `true` | toggle |
+| `isNumber` | `boolean` | `false` | toggle |
+| `leftIcon` | `React.ReactNode` |  | none (element) |
+| `rightIcon` | `React.ReactNode` |  | none (element) |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+| `fill` | `"outline" \| "solid" \| "light"` | `"solid"` | dropdown |
+| `variant` | `"default" \| "success" \| "information" \| "warning" \| "error" \| "secondary"` | `"default"` | dropdown |

package/project/components/Badge/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Data display" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Badge</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 R=Object.create;var c=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(r){throw e=0,r}};var D=(t,e,r,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of K(e))!h.call(t,o)&&o!==r&&c(t,o,{get:()=>e[o],enumerable:!(i=B(e,o))||i.enumerable});return t};var n=(t,e,r)=>(r=t!=null?R(P(t)):{},D(e||!t||!t.__esModule?c(r,"default",{value:t,enumerable:!0}):r,t));var u=p((k,s)=>{s.exports=window.Nxds});var d=p((F,f)=>{f.exports=window.React});var w=p((O,x)=>{x.exports={createRoot:window.ReactDOM.createRoot}});var l=n(u());var m=n(d());function T(t,e){return e===void 0?t:{...t,key:e}}function y(t,e,r){return(0,m.createElement)(t,T(e,r))}function a(){return y(l.Badge,{children:"Badge"})}var E=n(d()),g=n(w());(0,g.createRoot)(document.getElementById("root")).render((0,E.createElement)(a));})();</script>
+</body>
+</html>

package/project/components/Breadcrumb/README.md

@@ -0,0 +1,117 @@
+# Breadcrumb
+
+Breadcrumb shows where the current page sits in your app's hierarchy. Use it on pages two or more levels deep. For top-level navigation, use NavigationMenu or Sidebar.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.Breadcrumb">
+  <x-import component-from-global-scope="Nxds.BreadcrumbList">
+    <x-import component-from-global-scope="Nxds.BreadcrumbItem">
+      <x-import component-from-global-scope="Nxds.BreadcrumbLink" href="#">Home</x-import>
+    </x-import>
+    <x-import component-from-global-scope="Nxds.BreadcrumbSeparator"></x-import>
+    <x-import component-from-global-scope="Nxds.BreadcrumbItem">
+      <x-import component-from-global-scope="Nxds.BreadcrumbLink" href="#">Components</x-import>
+    </x-import>
+    <x-import component-from-global-scope="Nxds.BreadcrumbSeparator"></x-import>
+    <x-import component-from-global-scope="Nxds.BreadcrumbItem">
+      <x-import component-from-global-scope="Nxds.BreadcrumbPage">Breadcrumb</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.Breadcrumb` — Navigation trail in a `nav` landmark, showing where the current page sits.
+- `Nxds.BreadcrumbEllipsis` — Button that stands in for collapsed middle items.
+- `Nxds.BreadcrumbItem` — One `<li>` in the trail.
+- `Nxds.BreadcrumbLink` — Link to an ancestor page.
+- `Nxds.BreadcrumbList` — Ordered list that lays out the trail in one row.
+- `Nxds.BreadcrumbMenuTrigger` — Icon button that shows alternate paths for the segment beside it.
+- `Nxds.BreadcrumbPage` — Current page, marked with `aria-current="page"`.
+- `Nxds.BreadcrumbSeparator` — Divider between items, a slash by default.
+
+## Props
+
+### Breadcrumb
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### BreadcrumbEllipsis
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `disabled` | `boolean` |  | toggle |
+| `name` | `string` |  | text |
+| `type` | `"button" \| "submit" \| "reset"` | `"button"` | dropdown |
+| `value` | `string \| number \| readonly string[]` |  | none (object) |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### BreadcrumbItem
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `value` | `string \| number \| readonly string[]` |  | none (object) |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### BreadcrumbLink
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `asChild` | `boolean` |  | toggle |
+| `href` | `string` |  | text |
+| `target` | `HTMLAttributeAnchorTarget` |  | none (object) |
+| `type` | `string` |  | text |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### BreadcrumbList
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `type` | `"a" \| "i" \| "1" \| "A" \| "I"` |  | dropdown |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### BreadcrumbMenuTrigger
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `disabled` | `boolean` |  | toggle |
+| `name` | `string` |  | text |
+| `type` | `"button" \| "submit" \| "reset"` | `"button"` | dropdown |
+| `value` | `string \| number \| readonly string[]` |  | none (object) |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### BreadcrumbPage
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### BreadcrumbSeparator
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `value` | `string \| number \| readonly string[]` |  | none (object) |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |

package/project/components/Breadcrumb/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Navigation" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Breadcrumb</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 R=Object.create;var s=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var u=(r,e)=>()=>{try{return e||r((e={exports:{}}).exports,e),e.exports}catch(o){throw e=0,o}};var L=(r,e,o,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let m of h(e))!K.call(r,m)&&m!==o&&s(r,m,{get:()=>e[m],enumerable:!(a=g(e,m))||a.enumerable});return r};var c=(r,e,o)=>(o=r!=null?R(I(r)):{},L(e||!r||!r.__esModule?s(o,"default",{value:r,enumerable:!0}):o,r));var b=u((D,B)=>{B.exports=window.Nxds});var i=u((T,f)=>{f.exports=window.React});var w=u((F,x)=>{x.exports={createRoot:window.ReactDOM.createRoot}});var t=c(b());var d=c(i());function y(r,e){return e===void 0?r:{...r,key:e}}function n(r,e,o){return(0,d.createElement)(r,y(e,o))}function l(r,e,o){let{children:a,...m}=e;return(0,d.createElement)(r,y(m,o),...a)}function p(){return n(t.Breadcrumb,{children:l(t.BreadcrumbList,{children:[n(t.BreadcrumbItem,{children:n(t.BreadcrumbLink,{href:"#",children:"Home"})}),n(t.BreadcrumbSeparator,{}),n(t.BreadcrumbItem,{children:n(t.BreadcrumbLink,{href:"#",children:"Components"})}),n(t.BreadcrumbSeparator,{}),n(t.BreadcrumbItem,{children:n(t.BreadcrumbPage,{children:"Breadcrumb"})})]})})}var E=c(i()),P=c(w());(0,P.createRoot)(document.getElementById("root")).render((0,E.createElement)(p));})();</script>
+</body>
+</html>

package/project/components/Bubble/README.md

@@ -0,0 +1,57 @@
+# Bubble
+
+Bubble shows one message in a conversation. Use it as the body of a chat or assistant turn. For the avatar, header and footer around it, use Message.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.Bubble" align="end" variant="destructive">Bubble</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.Bubble` — One message in a conversation.
+- `Nxds.BubbleContent` — Message body.
+- `Nxds.BubbleGroup` — Vertical stack of consecutive bubbles.
+- `Nxds.BubbleReactions` — Reaction pill overhanging a corner of the bubble.
+
+## Props
+
+### Bubble
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+| `align` | `"end" \| "start"` |  | dropdown |
+| `variant` | `"destructive" \| "outline" \| "ghost" \| "muted" \| "primary"` | `"muted"` | dropdown |
+
+### BubbleContent
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `asChild` | `boolean` | `false` | toggle |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### BubbleGroup
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+
+### BubbleReactions
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+| `align` | `"end" \| "start"` | `"end"` | dropdown |
+| `side` | `"top" \| "bottom"` | `"bottom"` | dropdown |

package/project/components/Bubble/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Messaging" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Bubble</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 d=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(n){throw e=0,n}};var T=(t,e,n,u)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of K(e))!C.call(t,o)&&o!==n&&d(t,o,{get:()=>e[o],enumerable:!(u=R(e,o))||u.enumerable});return t};var i=(t,e,n)=>(n=t!=null?h(P(t)):{},T(e||!t||!t.__esModule?d(n,"default",{value:t,enumerable:!0}):n,t));var b=m((G,c)=>{c.exports=window.Nxds});var p=m((N,f)=>{f.exports=window.React});var g=m((A,w)=>{w.exports={createRoot:window.ReactDOM.createRoot}});var r=i(b());var a=i(p());function y(t,e){return e===void 0?t:{...t,key:e}}function l(t,e,n){return(0,a.createElement)(t,y(e,n))}function x(t,e,n){let{children:u,...o}=e;return(0,a.createElement)(t,y(o,n),...u)}var j="nx:w-full nx:max-w-md";function s(){return x(r.BubbleGroup,{className:j,children:[l(r.Bubble,{align:"start",children:l(r.BubbleContent,{children:"Start-aligned turns hug the inline start."})}),l(r.Bubble,{align:"end",variant:"primary",children:l(r.BubbleContent,{children:"End-aligned turns hug the inline end."})})]})}var B=i(p()),E=i(g());(0,E.createRoot)(document.getElementById("root")).render((0,B.createElement)(s));})();</script>
+</body>
+</html>

package/project/components/Button/README.md

@@ -0,0 +1,35 @@
+# Button
+
+Button triggers an action. Use it for short, visible labels.
+
+- Use one decorative icon slot at most: `startIcon` or `endIcon`.
+- A loading button shows only a spinner and hides its icons.
+- Icon-only buttons need `aria-label` or `aria-labelledby`.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.Button">Button</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.
+
+## Props
+
+### Button
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `asChild` | `boolean` | `false` | toggle |
+| `loading` | `boolean` | `false` | toggle |
+| `startIcon` | `React.ReactNode` |  | none (element) |
+| `endIcon` | `React.ReactNode` |  | none (element) |
+| `disabled` | `boolean` |  | toggle |
+| `name` | `string` |  | text |
+| `type` | `"button" \| "submit" \| "reset"` | `"button"` | dropdown |
+| `value` | `string \| number \| readonly string[]` |  | none (object) |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+| `variant` | `"link" \| "default" \| "destructive" \| "error" \| "outline" \| "dashed" \| "secondary" \| "ghost"` | `"default"` | dropdown |
+| `size` | `"default" \| "sm" \| "lg" \| "icon-sm" \| "icon" \| "icon-lg"` | `"default"` | dropdown |

package/project/components/Button/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Actions" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Button</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 B=Object.create;var s=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>{try{return e||t((e={exports:{}}).exports,e),e.exports}catch(o){throw e=0,o}};var D=(t,e,o,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of P(e))!h.call(t,r)&&r!==o&&s(t,r,{get:()=>e[r],enumerable:!(c=K(e,r))||c.enumerable});return t};var n=(t,e,o)=>(o=t!=null?B(g(t)):{},D(e||!t||!t.__esModule?s(o,"default",{value:t,enumerable:!0}):o,t));var a=p((k,d)=>{d.exports=window.Nxds});var m=p((F,f)=>{f.exports=window.React});var w=p((O,x)=>{x.exports={createRoot:window.ReactDOM.createRoot}});var l=n(a());var u=n(m());function T(t,e){return e===void 0?t:{...t,key:e}}function y(t,e,o){return(0,u.createElement)(t,T(e,o))}function i(){return y(l.Button,{children:"Button"})}var E=n(m()),R=n(w());(0,R.createRoot)(document.getElementById("root")).render((0,E.createElement)(i));})();</script>
+</body>
+</html>

package/project/components/ButtonGroup/README.md

@@ -0,0 +1,54 @@
+# ButtonGroup
+
+ButtonGroup joins related buttons into one cluster with shared borders. Use it for a set of related actions or a split button. For an input with addons, use InputGroup.
+
+## On the canvas
+
+```html
+<x-import component-from-global-scope="Nxds.ButtonGroup">
+  <x-import component-from-global-scope="Nxds.Button" variant="outline">Day</x-import>
+  <x-import component-from-global-scope="Nxds.Button" variant="outline">Week</x-import>
+  <x-import component-from-global-scope="Nxds.Button" variant="outline">Month</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.ButtonGroup` — Joins Buttons, menu or select triggers, `ButtonGroupText` and `ButtonGroupSeparator` into one cluster with shared borders.
+- `Nxds.ButtonGroupSeparator` — Divider between sub-groups that spans the whole group.
+- `Nxds.ButtonGroupText` — Label or addon in a group, such as a prefix, unit or count.
+
+## Props
+
+### ButtonGroup
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `size` | `"default" \| "sm" \| "lg"` | `"default"` | dropdown |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | dropdown |
+
+### ButtonGroupSeparator
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `orientation` | `"horizontal" \| "vertical"` | `"vertical"` | dropdown |
+| `decorative` | `boolean` | `true` | toggle |
+| `children` | `React.ReactNode` |  | content |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `asChild` | `boolean` |  | toggle |
+
+### ButtonGroupText
+
+| Prop | Type | Default | Control |
+| --- | --- | --- | --- |
+| `asChild` | `boolean` | `false` | toggle |
+| `size` | `"default" \| "sm" \| "lg"` |  | dropdown |
+| `className` | `string` |  | text |
+| `id` | `string` |  | text |
+| `children` | `React.ReactNode` |  | content |

package/project/components/ButtonGroup/preview.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Actions" height=120 -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>ButtonGroup</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 f=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var m=(e,t)=>()=>{try{return t||e((t={exports:{}}).exports,t),t.exports}catch(o){throw t=0,o}};var T=(e,t,o,u)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of g(t))!G.call(e,n)&&n!==o&&f(e,n,{get:()=>t[n],enumerable:!(u=D(t,n))||u.enumerable});return e};var r=(e,t,o)=>(o=e!=null?h(v(e)):{},T(t||!e||!e.__esModule?f(o,"default",{value:e,enumerable:!0}):o,e));var c=m((k,l)=>{l.exports=window.Nxds});var s=m((M,y)=>{y.exports=window.React});var R=m((O,E)=>{E.exports={createRoot:window.ReactDOM.createRoot}});var B=r(c()),a=r(c());var i=r(s());function x(e,t){return t===void 0?e:{...e,key:t}}function p(e,t,o){return(0,i.createElement)(e,x(t,o))}function w(e,t,o){let{children:u,...n}=t;return(0,i.createElement)(e,x(n,o),...u)}function d(){return w(B.ButtonGroup,{children:[p(a.Button,{variant:"outline",children:"Day"}),p(a.Button,{variant:"outline",children:"Week"}),p(a.Button,{variant:"outline",children:"Month"})]})}var K=r(s()),P=r(R());(0,P.createRoot)(document.getElementById("root")).render((0,K.createElement)(d));})();</script>
+</body>
+</html>