@chronogrove/ui 0.84.1 → 0.85.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chronogrove/ui",
-  "version": "0.84.1",
+  "version": "0.85.0",
   "description": "Chronogrove Theme UI theme, color mode helpers, and shared UI primitives",
   "license": "MIT",
   "type": "module",

package/src/__snapshots__/theme.spec.js.snap

@@ -918,6 +918,16 @@ exports[`Theme Configuration a snapshot of the configuration matches the snapsho
     },
   },
   "text": {
+    "mutedSans": {
+      "color": "textMuted",
+      "fontFamily": "heading",
+      "fontSize": [
+        0,
+        1,
+      ],
+      "fontStyle": "italic",
+      "lineHeight": 1.35,
+    },
     "title": {
       "color": "primary",
       "fontFamily": "heading",

package/src/action-button.js

@@ -25,7 +25,9 @@ const ActionButton = ({ children, href, onClick, variant = 'primary', size = 'me
   const sizeVariants = {
     small: { fontSize: ['11px', '12px'], padding: '6px 10px', gap: 1 },
     medium: { fontSize: ['12px', '13px'], padding: '8px 12px', gap: 1 },
-    large: { fontSize: ['13px', '14px'], padding: '10px 16px', gap: 2 }
+    large: { fontSize: ['13px', '14px'], padding: '10px 16px', gap: 2 },
+    /** Prominent inline actions (e.g. widget read-more toggles) */
+    xlarge: { fontSize: ['14px', '16px'], padding: '12px 20px', gap: 2 }
   }
   const sizeStyles = sizeVariants[size] || sizeVariants.medium
 

package/src/action-button.spec.js

@@ -116,6 +116,16 @@ describe('ActionButton', () => {
     })
   })
 
+  it('applies xlarge size styles', () => {
+    renderWithProviders(<ActionButton size='xlarge'>XLarge Button</ActionButton>)
+
+    const button = screen.getByRole('button', { name: /xlarge button/i })
+    expect(button).toHaveStyle({
+      fontSize: '14px',
+      padding: '12px 20px'
+    })
+  })
+
   it('renders with icon', () => {
     const TestIcon = () => <span data-testid='test-icon'>→</span>
     renderWithProviders(<ActionButton icon={<TestIcon />}>Button with Icon</ActionButton>)

package/src/theme.js

@@ -683,6 +683,17 @@ export default merge(tailwind, {
       fontSize: [1, 2],
       fontWeight: '550',
       textTransform: 'uppercase'
+    },
+    /**
+     * Secondary / meta lines (e.g. AI attribution): sans, italic, one step under `[1,2]` on the scale.
+     * Use `textMuted` (surface tokens), not Tailwind `colors.muted`—preset grays are often below WCAG AA for this size on `background` / panels.
+     */
+    mutedSans: {
+      color: 'textMuted',
+      fontFamily: 'heading',
+      fontSize: [0, 1],
+      fontStyle: 'italic',
+      lineHeight: 1.35
     }
   },
 

package/src/widget-header.js

@@ -21,7 +21,7 @@ const METRIC_CHIP_BORDER_ALPHA = 34 / 255
  * a label on a physical card index tab. Metrics are monospaced square chips:
  * number + unit in a bordered box, no rounded pills.
  */
-const WidgetHeader = ({ aside, children, icon, metrics, metricsLoading }) => {
+const WidgetHeader = ({ aside, children, icon, metrics, metricsLoading, sx: sxProp }) => {
   const hasMetrics = (Array.isArray(metrics) && metrics.length > 0) || metricsLoading
 
   // Placeholder chips while loading
@@ -38,7 +38,8 @@ const WidgetHeader = ({ aside, children, icon, metrics, metricsLoading }) => {
         gap: [2, 3],
         flexWrap: 'wrap',
         pb: 3,
-        mb: hasMetrics ? 4 : 2
+        mb: hasMetrics ? 4 : 2,
+        ...(typeof sxProp === 'object' && sxProp !== null ? sxProp : {})
       }}
     >
       {/* Left cluster: icon chip (center-aligned) + heading/CTA sub-row (baseline-aligned) */}