lucent-ui 0.15.0 → 0.17.0

package/dist-server/src/components/atoms/ColorPicker/ColorPicker.manifest.js

@@ -34,6 +34,20 @@ export const COMPONENT_MANIFEST = {
             required: false,
             description: 'Array of hex color strings shown as clickable swatches. Defaults to a 16-color palette.',
         },
+        {
+            name: 'size',
+            type: 'string',
+            required: false,
+            default: '"md"',
+            description: 'Swatch trigger size. "sm" renders a 24px swatch, "md" renders 40px.',
+        },
+        {
+            name: 'inline',
+            type: 'boolean',
+            required: false,
+            default: 'false',
+            description: 'Places the label beside the swatch instead of above it. Useful for compact layouts.',
+        },
         {
             name: 'disabled',
             type: 'boolean',

package/dist-server/src/components/atoms/NavLink/NavLink.manifest.js

@@ -44,6 +44,14 @@ export const COMPONENT_MANIFEST = {
             default: 'false',
             description: 'Disables interaction and renders muted text. Removes href and onClick.',
         },
+        {
+            name: 'inverse',
+            type: 'boolean',
+            required: false,
+            default: 'false',
+            description: 'Uses surface background with primary text instead of accent for the active state. ' +
+                'Ideal for sidebar navigation on tinted chrome where the accent highlight would be too heavy.',
+        },
         {
             name: 'onClick',
             type: 'function',

package/dist-server/src/components/molecules/PageLayout/PageLayout.manifest.js

@@ -5,7 +5,9 @@ export const COMPONENT_MANIFEST = {
     domain: 'neutral',
     specVersion: '0.1',
     description: 'Full-viewport shell layout with optional header, left sidebar, right panel, and footer slots arranged in a flex column/row structure.',
-    designIntent: 'PageLayout owns the outermost chrome of an application page. The body row is a flex row containing ' +
+    designIntent: 'PageLayout owns the outermost chrome of an application page. Chrome regions (header, sidebar, footer) ' +
+        'default to bgBase so the main content card feels elevated against the page canvas — especially ' +
+        'noticeable with tinted bgBase values. The body row is a flex row containing ' +
         'an optional left sidebar, a bordered main content card, and an optional right panel — all as structural ' +
         'siblings so they share the same vertical space. The header and footer sit outside the body row as ' +
         'flex children of the outer column, ensuring they span the full width. Sidebars collapse to zero width ' +
@@ -87,6 +89,16 @@ export const COMPONENT_MANIFEST = {
             default: '28',
             description: 'Footer height in px (number) or any CSS value (string). Default: 28 — sized for a compact status bar.',
         },
+        {
+            name: 'chromeBackground',
+            type: 'string',
+            required: false,
+            default: '"bgBase"',
+            description: 'Background token for chrome regions (header, sidebar, footer). ' +
+                '"bgBase" uses the page canvas color so the main content card feels elevated; ' +
+                '"bgSubtle" uses a subtle shade of bgBase for chrome distinction; ' +
+                '"surface" matches the old behavior where chrome and content share the same background.',
+        },
         {
             name: 'mainStyle',
             type: 'object',

package/dist-server/src/manifest/examples/button.manifest.js

@@ -8,24 +8,38 @@ export const ButtonManifest = {
     designIntent: 'Buttons communicate available actions. Variant conveys hierarchy: use "primary" for the ' +
         'single most important action in a view, "secondary" for supporting actions, "ghost" for ' +
         'low-emphasis actions in dense UIs, "outline" for bordered buttons with no fill, and "danger" exclusively for destructive or irreversible ' +
-        'operations. Size should match surrounding content density — prefer "md" as the default, ' +
-        '"sm" for toolbars or tables, and "xs" for compact UIs like customizer panels.',
+        'operations. Use "danger-ghost" for low-emphasis destructive actions (red text, no fill) and ' +
+        '"danger-outline" for bordered destructive buttons. Size should match surrounding content density — prefer "md" as the default, ' +
+        '"sm" for toolbars or tables, "xs" for compact UIs like customizer panels, and "2xs" for ' +
+        'ultra-dense inline controls (~22px height) such as table-inline actions or toolbar icon triggers.',
     props: [
         {
             name: 'variant',
             type: 'enum',
             required: false,
             default: 'primary',
-            description: 'Visual style conveying action hierarchy.',
-            enumValues: ['primary', 'secondary', 'outline', 'ghost', 'danger'],
+            description: 'Visual style conveying action hierarchy. ' +
+                '"primary" — filled accent for the single most important action. ' +
+                '"secondary" — subtle accent-tinted fill for supporting actions. ' +
+                '"outline" — bordered with no fill, for neutral secondary actions. ' +
+                '"ghost" — transparent with no border, for low-emphasis or inline actions. ' +
+                '"danger" — filled red for irreversible destructive actions (e.g. "Delete account"). ' +
+                '"danger-outline" — red border + red text for destructive actions that need visual weight without a filled background. ' +
+                '"danger-ghost" — red text only, for low-emphasis destructive actions (e.g. "Remove" in a list row).',
+            enumValues: ['primary', 'secondary', 'outline', 'ghost', 'danger', 'danger-outline', 'danger-ghost'],
         },
         {
             name: 'size',
             type: 'enum',
             required: false,
             default: 'md',
-            description: 'Controls height and padding.',
-            enumValues: ['xs', 'sm', 'md', 'lg'],
+            description: 'Controls height and padding. ' +
+                '"lg" (48px) — hero sections, onboarding flows. ' +
+                '"md" (42px) — default for most forms and dialogs. ' +
+                '"sm" (34px) — toolbars, table headers, card actions. ' +
+                '"xs" (26px) — compact UIs like customizer panels, inline controls. ' +
+                '"2xs" (22px) — ultra-dense inline icon triggers, table-row actions, dashboard toolbar buttons.',
+            enumValues: ['2xs', 'xs', 'sm', 'md', 'lg'],
         },
         {
             name: 'children',
@@ -135,6 +149,18 @@ export const ButtonManifest = {
             title: 'Dropdown trigger',
             code: `<Button variant="outline" chevron>Options</Button>`,
         },
+        {
+            title: 'Bordered destructive action',
+            code: `<Button variant="danger-outline" onClick={handleRevoke}>Revoke access</Button>`,
+        },
+        {
+            title: 'Low-emphasis destructive action',
+            code: `<Button variant="danger-ghost" onClick={handleRemove}>Remove</Button>`,
+        },
+        {
+            title: 'Dense inline action',
+            code: `<Button variant="ghost" size="2xs" leftIcon={<RefreshIcon />}>Retry</Button>`,
+        },
     ],
     compositionGraph: [],
     accessibility: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucent-ui",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "description": "An AI-first React component library with machine-readable manifests.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -35,7 +35,7 @@
   "homepage": "https://lucentui.dev",
   "repository": {
     "type": "git",
-    "url": "https://github.com/rozinashopify/lucent-ui"
+    "url": "https://github.com/rozina-hudson/lucent-ui"
   },
   "author": "Rozina Szogyenyi",
   "license": "MIT",