@santi020k/lumen-astro 2.1.0 → 3.0.1

package/README.md

@@ -422,3 +422,10 @@ form a standalone item, or `as="section"` when it is a labeled region in a large
 
 Use `variant="default"` for the original neutral surface, `variant="accent"` for a featured metric,
 or `variant="glass"` for selective translucency.
+
+## Consumer composition recipes
+
+See [consumer UI recipes](../../docs/consumer-ui-recipes.md) for static React icons, responsive
+record tables, keyboard-aware native sheets, whole-unit amount fields, adaptive editors, and
+asynchronous action states. Each recipe identifies the public primitives and the behavior that
+remains owned by the application.

package/components/LineChart.astro

@@ -5,6 +5,7 @@ import {
   alignLumenChartSeries,
   createLumenLineGeometry,
   formatLumenChartSummary,
+  getLumenChartAxisPadding,
   getLumenChartCategories,
   getLumenChartDomain,
   getLumenChartTicks,
@@ -75,15 +76,18 @@ const domain = getLumenChartDomain([
   referenceValue ?? null
 ], false)
 
+const ticks = getLumenChartTicks(domain)
+const paddingLeft = getLumenChartAxisPadding(ticks.map(tick => formatValue(tick)))
+
 const geometries = alignedSeries.map(item => createLumenLineGeometry(item.data, {
   domain,
   height,
   includeZero: false,
   padding,
+  paddingLeft,
   width
 }))
 
-const ticks = getLumenChartTicks(domain)
 const labelStep = Math.max(1, Math.ceil(categories.length / 8))
 let markerStep = 1
 
@@ -139,8 +143,8 @@ const referenceY =
 
             return (
               <>
-                <line x1={padding} x2={width - padding} y1={y} y2={y} />
-                <text x={padding - 8} y={y}>
+                <line x1={paddingLeft} x2={width - padding} y1={y} y2={y} />
+                <text x={paddingLeft - 8} y={y}>
                   {formatValue(tick)}
                 </text>
               </>
@@ -160,7 +164,7 @@ const referenceY =
             const denominator = Math.max(1, categories.length - 1)
 
             const x =
-              padding + (index / denominator) * (width - padding * 2)
+              paddingLeft + (index / denominator) * (width - paddingLeft - padding)
 
             return (
               <text text-anchor="middle" x={x} y={height - 14}>
@@ -174,7 +178,7 @@ const referenceY =
         referenceY !== undefined && (
           <line
             class="ui-chart__reference"
-            x1={padding}
+            x1={paddingLeft}
             x2={width - padding}
             y1={referenceY}
             y2={referenceY}

package/components/Table.astro

@@ -7,17 +7,20 @@ interface Props extends HTMLAttributes<'div'> {
   class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
+  layout?: 'records' | 'scroll'
 }
 
 const {
   class: classProp = '',
   className = '',
   glass = false,
+  layout = 'scroll',
   ...rest
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
   'ui-table-wrap',
+  layout === 'records' && 'ui-table-wrap--records',
   glass && 'ui-table-wrap--glass',
   glass === 'subtle' && 'ui-glass-subtle',
   glass === 'strong' && 'ui-glass-strong'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@santi020k/lumen-astro",
-  "version": "2.1.0",
+  "version": "3.0.1",
   "publishConfig": {
     "access": "public"
   },
@@ -42,15 +42,15 @@
     "lumen": "./bin/lumen.mjs"
   },
   "dependencies": {
-    "uqr": "^0.1.3",
-    "@santi020k/lumen": "^2.1.0",
-    "@santi020k/lumen-core": "^2.1.0"
+    "@santi020k/lumen": "^3.0.1",
+    "@santi020k/lumen-core": "^3.0.1",
+    "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@astrojs/ts-plugin": "^1.10.11",
-    "astro": "^7.2.9",
-    "typescript": "^6.0.3",
-    "vitest": "^4.1.11"
+    "@astrojs/ts-plugin": "^1.10.12",
+    "astro": "^7.3.5",
+    "typescript": "~6.0.3",
+    "vitest": "^5.0.1"
   },
   "peerDependencies": {
     "astro": ">=5"

package/styles/critical.css

@@ -698,7 +698,7 @@
 .ui-badge--warning {
   background: hsl(var(--warning) / 0.12);
   border-color: hsl(var(--warning) / 0.36);
-  color: hsl(var(--warning));
+  color: hsl(var(--ink));
 }
 
 .ui-input,
@@ -893,7 +893,7 @@
 .ui-field > p,
 .ui-field > small {
   margin: 0;
-  color: hsl(var(--ink-muted));
+  color: hsl(var(--ink-soft));
   font-size: 0.8125rem;
   line-height: 1.5;
 }
@@ -1190,6 +1190,61 @@
   font-size: 0.875rem;
 }
 
+.ui-table__label {
+  display: none;
+}
+
+@media (max-width: 48rem) {
+.ui-table-wrap--records table,
+  .ui-table-wrap--records tbody {
+    display: block;
+    min-width: 0;
+  }
+
+.ui-table-wrap--records thead {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+.ui-table-wrap--records tbody tr {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
+    gap: 1rem;
+    padding: 1rem;
+  }
+
+.ui-table-wrap--records tbody tr + tr {
+    border-top: 1px solid hsl(var(--line));
+  }
+
+.ui-table-wrap--records tbody td {
+    display: block;
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    overflow-wrap: anywhere;
+    white-space: normal;
+    text-align: start;
+  }
+
+.ui-table-wrap--records .ui-table__label {
+    display: block;
+    margin-bottom: 0.25rem;
+    color: hsl(var(--ink-soft));
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+
+.ui-table-wrap--records .ui-table__cell--wide {
+    grid-column: 1 / -1;
+  }
+}
+
 .ui-table-wrap th,
 .ui-data-table th {
   border-bottom: 1px solid hsl(var(--line));