@nadicodeai/design-system 12.1.77 → 12.1.79

package/AGENTS.md

@@ -5,8 +5,8 @@ every component, website section and product screen builds on. React components
 belong to `@nadicodeai/ui`; `examples/` contains rendered specimens.
 
 - Design and CSS changes: the relevant section of `DESIGN.md`.
-- Placement: this package and `@nadicodeai/ui` hold the Foundation and what at
-  least two products use; what one product alone needs lives in that product.
+- Placement: `../ui/AGENTS.md`. Every reusable component lives in
+  `@nadicodeai/ui`, even while one product alone uses it.
 - Terms: `GLOSSARY.md`. Static consumption: `README.md`.
 - React consumption: `../ui/README.md`.
 - Visual checks: `playwright.visual.config.ts` and `tests/visual/`, run by

package/DESIGN.md

@@ -227,13 +227,13 @@ spacing:
 
 ## Overview
 
-This file is nadicode's design system and its only design authority. The tokens above are the values; the sections below are the rules for applying them. Every component in `@nadicodeai/ui`, every website section, and every screen in the Portal and in Nadia builds on it. Another document may say how one product applies a rule, and links here for the rule; it never restates one. A rule that is missing here is added here first.
+This file is nadicode's design system and its only design authority. The tokens above are the values; the sections below are the rules for applying them. Every component in `@nadicodeai/ui`, every website section, and every screen in the Portal, Nadia and Alveare builds on it. Another document may say how one product applies a rule, and links here for the rule; it never restates one. A rule that is missing here is added here first.
 
 nadicode puts AI Agents to work inside small and mid-sized companies. Its sites and products read as a technology company with a real product: the interface is neutral and exact, the product is shown working, and colour and depth give the page its energy. Three ideas carry every screen:
 
 - **Neutral structure.** Chrome, controls and text sit on an achromatic spine, so a desaturated screen loses nothing structural. The strongest contrast on a screen belongs to the action.
-- **Colour as stage.** The five identity hues are full-strength grounds for sections, stages behind product views and glass, and the colour of Agents. They carry the brand; they never decorate a control.
-- **Real depth.** Surfaces sit at four heights. A 1 px edge shows the height in both modes, with a faint shadow under it. Glass floats over colour and moving Agents.
+- **Colour as stage.** The five identity hues appear at full strength only in the places "Colour as stage" lists, the colour of Agents among them, and never as a section's ground. They carry the brand; they never decorate a control.
+- **Real depth.** Surfaces sit at four heights. A 1 px edge shows the height in both modes, with a faint shadow under it. Glass floats over content that scrolls or moves under it.
 
 The products are still: only Agents move on their own. The website moves with purpose: the product at work, Agents and its few shader objects ("Motion").
 
@@ -254,7 +254,7 @@ The neutral spine carries grounds, chrome, text and every control: `{colors.ink}
 
 ### Colour as stage
 
-The identity palette is the brand's colour: cobalto `{colors.identity-cobalto}`, verde `{colors.identity-verde}`, arancio `{colors.identity-arancio}`, giallo `{colors.identity-giallo}` and rosso `{colors.identity-rosso}`, with `{colors.identity-ink}` and `{colors.identity-white}` as the poles type sits on. Azzurro `{colors.identity-azzurro}` has one job: the first stripe of Nadia's ribbon.
+The identity palette is the brand's colour: cobalto `{colors.identity-cobalto}`, verde `{colors.identity-verde}`, arancio `{colors.identity-arancio}`, giallo `{colors.identity-giallo}` and rosso `{colors.identity-rosso}`, with `{colors.identity-ink}` and `{colors.identity-white}` as the poles type sits on. Azzurro `{colors.identity-azzurro}` has two jobs: the first stripe of Nadia's ribbon, and a band of a company's card foil ("Company card").
 
 The hues appear at full strength and flat, with no tints, steps, gradients or hover variants, in these places. The one exception is the website's shader objects, each the material of one object and never a section's ground: the threads she holds, a fan of lines in her stripes from her orb to her colleagues, on black; Alveare's hive, cells that light in its hues as the work passes; and the company card's holographic foil ("Company card"). Stripes and cells stay pure bands of their hues, never a colour between two of them. Ruled by the founder on 27 September 2026: "shaders are not backgrounds all over the place".
 
@@ -329,11 +329,11 @@ Geist and Geist Mono are the two families. The twelve tokens are named by role,
 | `{typography.code}` | Tool calls, snippets, traces. |
 | `{typography.label-mono}` | Opaque identifiers, codes and mono eyebrows; never a person's, Agent's or computer's display name. |
 
-A token has one size at every width; nothing is sized in `vw` or `vh`. Only the three display tokens carry negative tracking. Card, panel and section titles are sentence-case Geist. The website and the CSS components name the tokens through the `nc-type-*` classes; product UI in `@nadicodeai/ui`, the Portal and Nadia sizes text with Tailwind's `text-xs`, `text-sm` and `text-base`, which match `caption`, `body-sm` and `body-md` in size.
+A token has one size at every width; nothing is sized in `vw` or `vh`. Only the three display tokens carry negative tracking. Card, panel and section titles are sentence-case Geist. The website and the CSS components name the tokens by role, through the `nc-type-*` classes or the theme's `text-<token>` utilities (`text-display-md`); product UI in `@nadicodeai/ui`, the Portal and Nadia sizes text with Tailwind's `text-xs`, `text-sm` and `text-base`, which match `caption`, `body-sm` and `body-md` in size.
 
 ### The website's text
 
-The website keeps one token per role on every page: a hero's title `{typography.display-lg}` (`{typography.display-md}` under 640 px), a section's title `{typography.display-md}` (`{typography.heading-lg}` under 768 px), a lead `{typography.body-lg}` at a measure of 60 characters, a card's or a tour stop's title `{typography.heading-md}`, an item's title `{typography.heading-sm}` and its words `{typography.body-md}`, and a product view's caption `{typography.label-mono}`. A section's words start at the column's edge; only a page's hero and its showcase centre them. A page's calls to action are the large button, in its hero and its closing band; every other way onward is a link with an arrow.
+The website keeps one token per role on every page: a hero's title `{typography.display-lg}` (`{typography.display-md}` under 640 px), a section's title `{typography.display-md}` (`{typography.heading-lg}` under 768 px), a lead `{typography.body-lg}` at a measure of 60 characters under a section's title, 52 in the closing band, whose row it shares with the band's object, and `40rem` in a hero, a card's or a tour stop's title `{typography.heading-md}`, an item's title `{typography.heading-sm}` and its words `{typography.body-md}`, and a product view's caption `{typography.label-mono}`. A section's words start at the column's edge; only a page's hero and its showcase centre them. A page's calls to action are the large button, in its hero and its closing band; every other way onward is a link with an arrow.
 
 ### Entry screens
 
@@ -421,15 +421,15 @@ Product UI sits on one continuous workspace ground, `{colors.material-workspace}
 | Outlined | `{colors.material-solid}` | None; one `line` border | A flat panel: fact cells inside a record, the website's explanatory cards. |
 | Plain | `{colors.material-solid}` | None | A structural card with no edge of its own. |
 
-**Glass** is a material, not a height: the floating fill at 60% over a 20 px backdrop blur at 180% saturation, so colour behind it comes through saturated rather than grey. Its edge is the floating recipe, whose inset top highlight and inner hairline show once the fill turns translucent, and a 5% monochrome grain keeps the blurred colour from banding. Glass may go where something behind it moves or carries colour:
+**Glass** is a material, not a height: the floating fill at 60% over a 20 px backdrop blur at 180% saturation, so colour behind it comes through saturated rather than grey. Its edge is the floating recipe, its 1 px ring and faint shadow, and a 5% monochrome grain keeps the blurred colour from banding. Glass may go where something behind it moves or carries colour:
 
 - floating chrome over our own content: popovers, selects, comboboxes, the menubar, navigation popups, the command palette and control bars, including a collection's toolbar over the rows that scroll under it (on a page whose rows never pass under it, the toolbar is the plain row, with no fill or edge of its own) and Nadia's chat bar over her conversation;
 - the website header as the page scrolls under it;
-- a small floating card over a colour ground or moving Agents.
+- a small floating card over moving Agents.
 
 Content stays solid: cards, KPIs, tables, chat, forms, and dialog, sheet and drawer bodies. Menus stay solid: a dropdown menu and a context menu open over dense rows their labels would compete with, and one set of commands reached both ways looks the same both ways. Glass over a plain white or black ground shows nothing, so it never goes there. Reduced transparency replaces glass with the same solid surface at the same height.
 
-**Product views on the website** are the product itself, built from the real components with example data that is labelled as such; never a screenshot, a device mockup or an invented interface. A product window takes the raised height on its ground; a card that overlaps it floats; its chrome may be glass over a colour or black ground; in a black section it renders in dark mode.
+**Product views on the website** are the product itself, built from the real components with example data that is labelled as such; never a screenshot, a device mockup or an invented interface. A product window takes the raised height on its ground; a card that overlaps it floats; in a black section it renders in dark mode.
 
 Absence follows its container. A page or region with nothing in it is an opaque region with a dashed boundary; an empty state inside a card is unframed, because the card already owns the edge. `EmptyState` (`@nadicodeai/ui/components/empty-state`) is the only owner of an absence: nothing else draws one, and its `scope` (`page`, `region` or `card`) sets that frame. A collection's `DataTable` takes the same props as `empty`. Its kind decides everything it shows:
 
@@ -468,7 +468,7 @@ The easings are `emphasized`, `out-strong`, `in-out-strong` and `drawer`; the wa
 
 ## Components
 
-Every product builds from `@nadicodeai/ui`: stock shadcn components on Base UI, the chart kit, the assistant-ui conversation interface, and the compositions below. A component styles itself only through the roles and tokens in this file; it carries no raw colour, no `dark:` utility and no theme of its own. A page arranges and sizes a component and never restyles it: a new appearance is a typed variant or slot added to the component, and a missing composition is added to the package once two products need it. Visible controls always come from the package.
+Every product builds from `@nadicodeai/ui`: stock shadcn components on Base UI, the chart kit, the assistant-ui conversation interface, and the compositions below. A component styles itself only through the roles and tokens in this file; it carries no raw colour, no `dark:` utility and no theme of its own. A page arranges and sizes a component and never restyles it: a new appearance is a typed variant or slot added to the component, and a missing composition is added to the package, even while one product alone needs it. Visible controls always come from the package.
 
 ### Controls
 
@@ -492,7 +492,7 @@ Every collection has the same toolbar: Add filter when the collection has facets
 
 ### Tables and missing values
 
-A table is native table structure at one density: 48 px body rows. A collection row is one line: the record's identity and at most about five facts, and anything more lives on the record's page. Rows explain themselves by their cells (an identity with its orb or mark, a status badge, a tag, a relative time), so a collection's column header row is kept for screen readers only. A table whose columns are figures a reader cannot tell apart without their names, such as a statement or an analytics comparison, opts in to a visible header row of 36 px. The table inherits its enclosing surface, whose Card owns the outer edge; a visible header and every record except the last end with a quiet 1 px `border` divider. A body row takes the full `accent` fill on hover, on keyboard focus within it and while its menu is open; a selected row takes `muted`; headers and footers never highlight. A collection fits its container without sideways scrolling: identity and actions keep their columns, and supporting facts move into a detail row inside the same record before the table gets cramped. The identity column claims up to a third of the table, gives it back down to a floor, and holds its name on one line: a long name ends in an ellipsis and is whole in its title, as a dashboard row does. A fact holds one line at its own width; a column of words, such as a summary or a sentence, wraps between them above a floor of its own; in the compact layout every cell but the identity wraps between words. Text anywhere in the product breaks between words, and inside a word only when that word alone cannot fit a line; a machine string such as a hash or a key may break at any character. One categorical fact in a row, such as an installation or a partner, is a `Tag`: a 24 px pill with its mark, dashed when the fact states an absence. An app in a row is its brand mark in the 28 px tile.
+A table is native table structure at one density: 48 px body rows. A collection row is one line: the record's identity and at most about five facts, and anything more lives on the record's page. Rows explain themselves by their cells (an identity with its orb or mark, a status badge, a tag, a relative time), so a collection's column header row is kept for screen readers only. A table whose columns are figures a reader cannot tell apart without their names, such as a statement or an analytics comparison, opts in to a visible header row of 36 px. The table inherits its enclosing surface, whose Card owns the outer edge; a visible header and every record except the last end with a quiet 1 px `border` divider. A body row takes the full `accent` fill on hover, on keyboard focus within it and while its menu is open; a selected row takes `muted`; headers and footers never highlight. A collection fits its container without sideways scrolling: identity and actions keep their columns, and supporting facts move into a detail row inside the same record before the table gets cramped. The identity column claims up to a third of the table, gives it back down to a floor, and holds its name on one line: a long name ends in an ellipsis and is whole in its title, as a dashboard row does. A fact holds one line at its own width; a column of words, such as a summary or a sentence, holds one line up to a cap of `16rem`, shrinks to a floor of its own in a narrow table, and past the cap ends in an ellipsis, whole in its title, as a long name does. A document's table, such as a legal page's, is read whole instead: its columns take the `wraps` option, so their words wrap and the row grows, and it shows its header row. In the compact layout every cell but the identity wraps between words. Text anywhere in the product breaks between words, and inside a word only when that word alone cannot fit a line; a machine string such as a hash or a key may break at any character. One categorical fact in a row, such as an installation or a partner, is a `Tag`: a 24 px pill with its mark, dashed when the fact states an absence. An app in a row is its brand mark in the 28 px tile.
 
 An unknown or not-applicable value in a table, a comparison list or a set of facts is a muted `—` with screen-reader text, in the same slot as a present value; zero stays zero. An absent report is not `None`: `None` is only for a complete report that found nothing. A stale value keeps its last reading with a short `Stale` qualifier. Loading, failure, missing permission and actionable setup each keep their own visible state and never turn into a dash. Essential reasons and actions never live only in a hover tooltip.
 
@@ -508,7 +508,7 @@ A status is one Badge: a mark and a word in one of five tones, so it reads witho
 | Amber | Waiting on a person's decision | `{colors.warning-soft}` / `{colors.warning-deep}` |
 | Blue | A step in motion | `{colors.info-soft}` / `{colors.info-deep}` |
 
-Both products draw every status with the one `StatusBadge` in `@nadicodeai/ui`, which owns the tones and their marks; each app keeps only its value-to-tone map in one module, and nothing else chooses a status colour. A status never moves.
+The Portal, Nadia and Alveare draw every status with the one `StatusBadge` in `@nadicodeai/ui`, which owns the tones and their marks; each app keeps only its value-to-tone map in one module, and nothing else chooses a status colour. A status never moves.
 
 ### System activity
 
@@ -559,7 +559,7 @@ The sign-up page draws the account being made as the company's card: one object
 
 ### Identity marks
 
-A recognised app, platform or model maker is drawn with its genuine mark beside its readable name, in a tile that owns the box; an unknown one keeps its name and a text monogram, never a guessed logo. The tile is 24 px, the size a 40 px table row holds, wherever a mark names a row; a mark grows only where it stands for the object itself, as on its card or at the head of its page, and there every surface of that object draws it at one size. A mark identifies and never replaces the label, and its colour identifies the maker, never a connection's health. Marks are used nominatively, to name a platform, an integration or a provider, never next to wording that implies endorsement. A brand mark never stands in for a UI icon, and a UI icon never stands in for a brand. A Library skill is drawn with its line icon on a `card` tile with a hairline `border`, the tile an app mark sits in, and a plugin with its line icon on the `info-soft` tile (`CatalogTile`), at 40 px in a row and 64 px at the head of its page, so the tile's ground says which kind it is; the icon is one of the catalog's fixed set, never a brand mark, and an app keeps its brand mark. In a chart, a model is named by its label, and marks stay out of legends.
+A recognised app, platform or model maker is drawn with its genuine mark beside its readable name, in a tile that owns the box; an unknown one keeps its name and a text monogram, never a guessed logo. Where a mark names a row, the tile is 28 px for an app or a channel, in a collection's 48 px row, and 24 px for a model's maker, in a model list, a routing table or a setting, and on the website's lists of apps and makers; a mark grows only where it stands for the object itself, as on its card or at the head of its page, and there every surface of that object draws it at one size. A mark identifies and never replaces the label, and its colour identifies the maker, never a connection's health. Marks are used nominatively, to name a platform, an integration or a provider, never next to wording that implies endorsement. A brand mark never stands in for a UI icon, and a UI icon never stands in for a brand. A Library skill is drawn with its line icon on a `card` tile with a hairline `border`, the tile an app mark sits in, and a plugin with its line icon on the `info-soft` tile (`CatalogTile`), at 40 px in a row and 64 px at the head of its page, so the tile's ground says which kind it is; the icon is one of the catalog's fixed set, never a brand mark, and an app keeps its brand mark. In a chart, a model is named by its label, and marks stay out of legends.
 
 ### Product views
 
@@ -606,9 +606,9 @@ The clear space is one stroke width of the rendered logo on every side. The mini
 | Website | `apps/website/docs/design-doctrine.md` | `register.website.layout` | A light page; a black section scopes `.dark` for the product views in it |
 | Portal | `apps/portal/docs/information-architecture.md` and `apps/portal/docs/design-doctrine.md` | None | System, light or dark, on the `.dark` class |
 | Nadia | `apps/nadia/docs/design-doctrine.md` | None | System by default, light or dark, on the `.dark` class |
-| Alveare | `apps/alveare/docs/design-doctrine.md` | None | Light or dark, on Buzz's own theme pair |
+| Alveare | `apps/alveare/docs/design-doctrine.md` | None | System, light or dark, on Buzz's own theme pair |
 
-- **Website.** The page grammar is "The website column": full-bleed sections on white, soft, black and colour grounds, alternating, with product views floating on them. Its cards are outlined; its product views take their real heights.
+- **Website.** The page grammar is "The website column": full-bleed sections on white, soft and black grounds, alternating, with product views on them. Its cards are outlined; its product views take their real heights.
 - **Portal.** A product shell on the workspace ground, built from the page compositions and the package components, with `globals.css` giving every elevated surface its tone.
 - **Nadia.** Nadia draws her own window through Hermes's `window.shell` area, inside Hermes's app, which owns Tailwind and its own surface layering. Nadia's theme paints Hermes's roles with the shared `semantic` roles and core radii, and imports `@nadicodeai/ui/components.css` with the design system's host stylesheet, so the package components render with the same recipes and glass. The window follows the operating system's material where the system composites it. Hermes answers reduced motion by cutting every transition and animation; Nadia's stylesheet gives her own parts, the package overlays, the entry screen and the waiting line, the reduced-motion policy in "Motion" back.
   Her conversation is one centred column of `56rem` holding her replies, the person's messages and the chat bar: her reply is plain text across the column, only the person's message is a bubble, on the `raised` step at the column's trailing edge, and the chat bar floats over the messages as the lightest step, in glass. The selected Agent row carries the sidebar's selected fill, as the Agents list draws it.
@@ -616,10 +616,10 @@ The clear space is one stroke width of the rendered logo on every side. The mini
 
 ## Do's and Don'ts
 
-- Do keep the brand still: only Agents, and the product at work, move. Don't animate sections, pictures or scrolling.
-- Do use the identity hues at full strength as grounds, stages and Agents, with the text pole that clears AA. Don't tint them, grade them, or paint a control, chrome or a status with them.
+- Do keep the brand still: only Agents, the product at work and the website's shader objects move. Don't animate sections, pictures or scrolling.
+- Do use the identity hues at full strength in the places "Colour as stage" lists, with the text pole that clears AA. Don't tint them, grade them, or paint a control, chrome or a status with them.
 - Do choose a surface's height by its physical role, and let its edge and faint shadow show it in both modes. Don't add a border, ring or second shadow to an elevated surface.
-- Do put glass on floating chrome over colour or motion. Don't make content glass, or put glass over a plain ground.
+- Do put glass on floating chrome over content that scrolls or moves under it. Don't make content glass, or put glass over a plain ground.
 - Do show the product with its real components. Don't use screenshots, device frames or invented interfaces.
 - Do give each thing the corner its role takes on the scale ("Shapes"). Don't give a higher surface a bigger corner.
 - Do give every line one owner, and draw focus only with the focus outline.
@@ -630,7 +630,7 @@ The clear space is one stroke width of the rendered logo on every side. The mini
 
 ## Token extension
 
-The YAML front matter holds the four groups the DESIGN.md format defines: colors, typography, rounded and spacing. Everything else is authored in the one `json design-tokens` fence below, in the W3C design-tokens format: `core.material` (the scrim and glass values), `core.elevation` (four recipes per mode), `core.motion` (durations and easings), `semantic` (the shared colour roles) and `register.website` (the website column). An alias is written `{core.color.canvas}`. In CSS a token is `--nc-<name>`, an elevation is reached only through `nc-elevation-<height>`, and Tailwind names the values through the `nc-` and `nadicode-` namespaces. How the build turns this file into CSS and token files is described in `packages/design-system/README.md`.
+The YAML front matter holds the four groups the DESIGN.md format defines: colors, typography, rounded and spacing. Everything else is authored in the one `json design-tokens` fence below, in the W3C design-tokens format: `core.material` (the scrim and glass values), `core.elevation` (four recipes per mode), `core.motion` (durations and easings), `semantic` (the shared colour roles and radius) and `register.website` (the website column). An alias is written `{core.color.canvas}`. In CSS a token is `--nc-<name>`, an elevation is reached only through `nc-elevation-<height>`, and Tailwind names the values through the `nc-` and `nadicode-` namespaces. How the build turns this file into CSS and token files is described in `packages/design-system/README.md`.
 
 ```json design-tokens
 {

package/GLOSSARY.md

@@ -18,14 +18,11 @@ _Avoid_: Theme, skin
 The achromatic colour roles that carry grounds, chrome, hierarchy, and every control in every Register. Chromatic colour belongs to the Identity palette, the semantic feedback roles and the chart palette.
 
 **Identity palette**:
-The brand's colour: five full-strength hues, cobalto, verde, arancio, giallo and rosso, with the white and ink poles type sits on. They appear flat as website section grounds, stages, accents on the website, Agents, the logo and imagery, and never on a control.
+The brand's colour: five full-strength hues, cobalto, verde, arancio, giallo and rosso, with the white and ink poles type sits on. They appear flat behind glass, as accents on the website, in Agents, objects, the logo and imagery, and never as a website section's ground or on a control.
 _Avoid_: Swatch, theme color, Agent identity palette
 
 **Identity plane**:
-A flat surface painted edge to edge in one Identity palette hue, such as a website section's ground, a stage, or a field in an image.
-
-**Stage**:
-The Identity palette ground behind a floating product view, which glass over it shows through.
+A flat surface painted edge to edge in one Identity palette hue, such as a field in an image.
 
 ### Structure and surfaces
 
@@ -61,7 +58,7 @@ The identity of one Agent across products: one of seven forms in one chosen colo
 _Avoid_: Agent glyph, Agent avatar, Agent visual
 
 **Product view**:
-A live, inert fragment of the Portal or Nadia on the website, built from the real components with example data marked as example.
+A live, inert fragment of the Portal, Nadia or Alveare on the website, built from the real components with example data marked as example.
 
 **System activity**:
 What a person sees while the system does work they asked for: a pending label, then one waiting line, a counted progress line, or still skeletons. It never takes an orb, because an orb means an Agent.

package/README.md

@@ -56,11 +56,11 @@ The clear-space, minimum-size, accessibility, background, and prohibited-use rul
 
 ## Data-only consumption
 
-A consumer that generates its own theme takes the token files and the assets. The Nadia desktop app's theme script reads `tokens/dtcg-resolved` this way, and its desktop imports `css/tokens` and `css/host` rather than the complete bundle.
+A consumer that generates its own theme takes the token files and the assets. The Nadia desktop app's theme script reads `tokens/dtcg-resolved` this way, and its desktop imports `css/host` rather than the complete bundle.
 
 Pin an exact version, never a range: the DTCG group paths are the interface, and a new group arrives in a minor. `npm view @nadicodeai/design-system version` reports the published one.
 
-Two token files ship, both rooted at `nadicode`: `nadicode.core.*` is the foundation, `nadicode.semantic.*` the shared colour roles per mode, and `nadicode.register.<product>.*` one product's own values:
+Two DTCG token files ship, both rooted at `nadicode`: `nadicode.core.*` is the foundation, `nadicode.semantic.*` the shared colour roles per mode, and `nadicode.register.<product>.*` one product's own values:
 
 | Import | What it holds | What it is for |
 | --- | --- | --- |
@@ -129,7 +129,7 @@ fresh build, and `tests/guards/` holds the structural checks on every output.
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <!-- One stylesheet: tokens, geometry, components, and the brand typeface -->
-    <link rel="stylesheet" href="https://unpkg.com/@nadicodeai/design-system/css" />
+    <link rel="stylesheet" href="https://unpkg.com/@nadicodeai/design-system@<version>/dist/css/index.css" />
     <!-- In a bundler, prefer a CSS entry: @import "@nadicodeai/design-system/css"; -->
   </head>
   <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "12.1.77",
+  "version": "12.1.79",
   "type": "module",
   "publishConfig": {
     "access": "public"