@tempoxyz/ds 0.2.4 → 0.2.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tempoxyz/ds",
   "type": "module",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "license": "MIT",
   "files": [
     "DESIGN.md",

package/src/web/components/IconChip.tsx

@@ -32,7 +32,6 @@ namespace styles {
     {
       base: {
         alignItems: 'center',
-        // grayAlpha 100 in light mode and 300 in dark, where 100 reads as black.
         backgroundColor: 'background.chip',
         borderRadius: '12',
         boxSizing: 'border-box',

package/src/web/components/Rows.tsx

@@ -66,7 +66,13 @@ export namespace Rows {
   export function Info(props: Info.Props) {
     const { className, vars, ...attributes } = props
 
-    return <span {...attributes} {...styles.info({ className, style: props.style, vars })} />
+    return (
+      <span
+        {...attributes}
+        data-info=""
+        {...styles.info({ className, style: props.style, vars })}
+      />
+    )
   }
 
   export namespace Info {
@@ -141,7 +147,9 @@ export namespace Rows {
   }
 
   /**
-   * `size` sets one row height for every row. `inset` dividers start where the row text does.
+   * `size` sets one row height for every row. A 32px control fits `small` and `medium` rows, and a
+   * 40px control fits `large` rows, without changing that height. `inset` dividers start where the
+   * row text does.
    * Inside a `Surface`, rows reach its edges. Variants default to `dividers="inset"`,
    * `size="medium"`.
    */
@@ -392,8 +400,9 @@ namespace styles {
         typography: 'label.14.strong',
         selectors: {
           '& [data-divider]': { position: 'relative' },
+          // The faintest gray keeps dividers quiet on filled surfaces as well as on the page.
           '& [data-divider]::before': {
-            backgroundColor: 'grayAlpha.200',
+            backgroundColor: 'grayAlpha.100',
             content: '"" !custom',
             height: '1',
             insetBlockStart: '0',
@@ -428,11 +437,20 @@ namespace styles {
           inset: { selectors: { '& [data-divider]::before': { insetInline: '16' } } },
           none: { selectors: { '& [data-divider]::before': { display: 'none' } } },
         },
-        // Panels share the rows' side padding so their text lines up.
+        // Panels share the rows' side padding so their text lines up. Info takes back the block
+        // padding that small and medium rows trim for controls, so two-line text keeps its room.
         size: {
           large: { selectors: { '& [data-panel]': { paddingInline: '24' } } },
-          medium: { selectors: { '& [data-panel]': { paddingInline: '20' } } },
-          small: { typography: 'label.13.strong' },
+          medium: {
+            selectors: {
+              '& [data-info]': { paddingBlock: '4' },
+              '& [data-panel]': { paddingInline: '20' },
+            },
+          },
+          small: {
+            typography: 'label.13.strong',
+            selectors: { '& [data-info]': { paddingBlock: '2' } },
+          },
         },
       },
     },
@@ -491,11 +509,12 @@ namespace styles {
       ],
       defaultVariants: { size: 'medium', spacing: 'both' },
       variants: {
-        // 36, 40 and 56px. Small rows sit a step taller than 32px controls so list text can breathe.
+        // 36, 40 and 56px. Block padding leaves room for a 32px control in small and medium rows and a
+        // 40px control in large rows, so a row with a control matches the text rows beside it.
         size: {
           large: { minHeight: '56' },
-          medium: { minHeight: '40' },
-          small: { minHeight: '36', paddingBlock: '4' },
+          medium: { minHeight: '40', paddingBlock: '4' },
+          small: { minHeight: '36', paddingBlock: '2' },
         },
         spacing: {
           both: { paddingInline: '16' },

package/src/web/components/Surface.tsx

@@ -11,7 +11,7 @@ import { variants, vars } from '../zyzz.config.js'
  * - `size` sets the corner radius and padding together.
  * - Name the card with `Surface.Title`, which renders an `h2`, so headings keep the card navigable.
  * - A pressable surface should hold no other interactive controls, since nested targets conflict.
- * - A direct child `table` or `Rows` bleeds into the inline padding, so row fills reach the edges.
+ * - A direct child `table` or `Rows` bleeds into the padding, so row fills reach the edges.
  *
  * @example
  * <Surface>
@@ -251,8 +251,8 @@ namespace styles {
         // Padding is one and a half times the radius, and they scale together. A direct child
         // table or Rows bleeds into the inline padding so fills reach the edges. Table cells at the
         // edges take back exactly the padding, so their text aligns with the content edge, while rows
-        // keep their own side padding. Rows also take half the block padding, since each row brings
-        // its own.
+        // keep their own side padding. Rows at the top or bottom edge take the full block padding,
+        // since each row brings its own, and take half beside other content.
         size: {
           large: {
             borderRadius: '16',
@@ -260,6 +260,8 @@ namespace styles {
             selectors: {
               '& > table, & > [data-rows]': { marginInline: '-24' },
               '& > [data-rows]': { marginBlock: '-12' },
+              '& > [data-rows]:first-child': { marginBlockStart: '-24' },
+              '& > [data-rows]:last-child': { marginBlockEnd: '-24' },
               '& > table': { width: `calc(100% + ${vars.spacing['48']}) !custom` },
               '& > table > caption, & > table tr > :first-child': {
                 paddingInlineStart: '24',
@@ -283,6 +285,8 @@ namespace styles {
             selectors: {
               '& > table, & > [data-rows]': { marginInline: '-16' },
               '& > [data-rows]': { marginBlock: '-8' },
+              '& > [data-rows]:first-child': { marginBlockStart: '-16' },
+              '& > [data-rows]:last-child': { marginBlockEnd: '-16' },
               '& > table': { width: `calc(100% + ${vars.spacing['32']}) !custom` },
               '& > table > caption, & > table tr > :first-child': {
                 paddingInlineStart: '16',
@@ -306,6 +310,8 @@ namespace styles {
             selectors: {
               '& > table, & > [data-rows]': { marginInline: '-12' },
               '& > [data-rows]': { marginBlock: '-6' },
+              '& > [data-rows]:first-child': { marginBlockStart: '-12' },
+              '& > [data-rows]:last-child': { marginBlockEnd: '-12' },
               '& > table': { width: `calc(100% + ${vars.spacing['24']}) !custom` },
               '& > table > caption, & > table tr > :first-child': {
                 paddingInlineStart: '12',

package/src/web/components/internal/InputGroup.ts

@@ -234,6 +234,16 @@ export namespace styles {
             },
           },
           default: {},
+          // Fills only on hover, for a picker inside a row. As a button, it sizes to its content.
+          text: {
+            backgroundColor: 'transparent !custom',
+            selectors: {
+              '&:is(button)': { width: 'auto !custom' },
+              '&:hover:not(:disabled, [data-disabled], :has(input:disabled))': {
+                backgroundColor: 'grayAlpha.100',
+              },
+            },
+          },
         },
       },
     },

package/src/web/vars.ts

@@ -58,10 +58,10 @@ export const variables = Vars.define(
       },
       // Lifts surfaces off the near-black page in dark mode, so cards and popups stay distinct.
       // `raised` fills popups and dialogs above surfaces. `indicator` fills the selected segment of a
-      // segmented control. The status fills tint callouts with step 300 in light mode and step 100 in
-      // dark mode.
+      // segmented control. `chip` matches grayAlpha 100, so it stays dim on gray fills. The status
+      // fills tint callouts with step 300 in light mode and step 100 in dark mode.
       background: {
-        chip: { dark: '#ffffff21', light: '#0000000d' },
+        chip: { dark: '#ffffff12', light: '#0000000d' },
         indicator: { dark: 'rgb(255 255 255 / 0.16)', light: '#fff' },
         info: { dark: '#161b29', light: '#e6eefe' },
         negative: { dark: '#2a1410', light: '#ffe6e0' },