lucent-ui 0.25.0 → 0.25.1

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

@@ -177,8 +177,9 @@ export const COMPONENT_MANIFEST = {
             type: 'ReactNode',
             required: false,
             description: 'Full-bleed content rendered at the top of the card (before header). No padding is applied. ' +
-                'Use for hero images, illustrations, or any edge-to-edge top content. The card\'s overflow:hidden ' +
-                'clips media to the border-radius.',
+                'Use for hero images, illustrations, or any edge-to-edge top content. The media slot self-clips ' +
+                'to the card\'s top border-radius. Cards without media default to overflow:visible so nested child ' +
+                'shadows (e.g. an elevated Card inside a Collapsible) are never cut off.',
         },
     ],
     usageExamples: [
@@ -274,17 +275,17 @@ export const COMPONENT_MANIFEST = {
         },
         {
             title: 'CollapsibleCard recipe — outline',
-            code: `<Card variant="outline" padding="none" hoverable>
+            code: `<Card variant="outline" hoverable>
   <Collapsible trigger={<Text as="span" weight="semibold" size="sm">Filters</Text>} defaultOpen>
-    <Text size="sm" color="secondary">Card + Collapsible composed together.</Text>
+    <Text size="sm" color="secondary">Card + Collapsible composed together. Collapsible auto-bleeds to card edges.</Text>
   </Collapsible>
 </Card>`,
         },
         {
             title: 'CollapsibleCard recipe — combo (filled + elevated)',
-            code: `<Card variant="filled" padding="none" hoverable>
+            code: `<Card variant="filled" hoverable>
   <Collapsible trigger={<Text as="span" weight="semibold" size="sm">Details</Text>} padded={false}>
-    <Card variant="elevated" padding="sm">
+    <Card variant="elevated" padding="sm" style={{ margin: 'var(--lucent-space-1) var(--lucent-space-2) var(--lucent-space-2)' }}>
       <Text size="sm" color="secondary">Two-tone: flat trigger on filled surface, content in elevated body.</Text>
     </Card>
   </Collapsible>

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

@@ -11,13 +11,19 @@ export const COMPONENT_MANIFEST = {
         'on expand, scrollHeight is snapshotted and transitioned to, then the fixed height is cleared for reflow; ' +
         'on collapse, the current height is flushed to the DOM, a reflow is forced, then height is set to 0. ' +
         'Content fades in/out with opacity + translateY(-4px) at 80ms, while height transitions at 180ms ' +
-        'using the easing-default token. ' +
+        'using the easing-default token. The animated content wrapper uses overflow:hidden only during the ' +
+        'height transition and switches to overflow:visible once open, so nested child shadows (e.g. an ' +
+        'elevated Card in the combo recipe) are never clipped in the resting state.\n\n' +
         'A built-in chevron rotates 180° on open, giving clear directional affordance. ' +
         'Hover feedback uses a CSS rule via data-lucent-collapsible-trigger (same pattern as NavMenu): ' +
         '5% text-primary tint on the trigger background, chevron darkens to text-primary. ' +
         'The `trigger` prop accepts only label content — the chevron and button chrome are owned by the component ' +
         'so callers cannot accidentally break the expand/collapse contract. ' +
-        'The component supports controlled (open + onOpenChange) and uncontrolled (defaultOpen) modes.',
+        'The component supports controlled (open + onOpenChange) and uncontrolled (defaultOpen) modes.\n\n' +
+        '**Card-aware auto-bleed** — when placed inside a Card, Collapsible consumes CardPaddingContext and ' +
+        'applies negative margins to cancel the Card body\'s padding, so the trigger spans the full card width ' +
+        'and only the Collapsible\'s own padding applies. This means `<Card hoverable><Collapsible>` just works — ' +
+        'no `padding="none"` on Card required.',
     props: [
         {
             name: 'trigger',
@@ -95,18 +101,18 @@ export const COMPONENT_MANIFEST = {
 </Collapsible>`,
         },
         {
-            title: 'CollapsibleCard recipe',
-            code: `<Card variant="outline" padding="none" hoverable>
+            title: 'CollapsibleCard recipe (auto-bleed)',
+            code: `<Card variant="outline" hoverable>
   <Collapsible trigger={<Text as="span" weight="semibold" size="sm">Filters</Text>} defaultOpen>
-    <Text size="sm" color="secondary">Card + Collapsible composed together.</Text>
+    <Text size="sm" color="secondary">Card + Collapsible composed together. No padding="none" needed.</Text>
   </Collapsible>
 </Card>`,
         },
         {
             title: 'CollapsibleCard combo recipe (padded={false})',
-            code: `<Card variant="filled" padding="none" hoverable>
+            code: `<Card variant="filled" hoverable>
   <Collapsible trigger={<Text as="span" weight="semibold" size="sm">Details</Text>} padded={false}>
-    <Card variant="elevated" padding="sm">
+    <Card variant="elevated" padding="sm" style={{ margin: 'var(--lucent-space-1) var(--lucent-space-2) var(--lucent-space-2)' }}>
       <Text size="sm" color="secondary">Nested elevated card inside a filled card.</Text>
     </Card>
   </Collapsible>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucent-ui",
-  "version": "0.25.0",
+  "version": "0.25.1",
   "description": "An AI-first React component library with machine-readable manifests.",
   "type": "module",
   "main": "./dist/index.cjs",