@tempoxyz/ds 0.2.4 → 0.2.6

package/src/web/components/Rows.tsx

@@ -3,7 +3,6 @@ import type { ComponentPropsWithRef, ReactNode } from 'react'
 import { use } from 'react'
 import type * as zyzz from 'zyzz'
 import { keyframes } from 'zyzz/web'
-import { ChevronDown } from '../icons/ChevronDown.js'
 import { ChevronRight } from '../icons/ChevronRight.js'
 import { style, variants } from '../zyzz.config.js'
 import * as RowsSize from './internal/RowsSize.js'
@@ -51,29 +50,52 @@ export namespace Rows {
       zyzz.Props.Variants<typeof styles.description>
   }
 
-  /** A block wrapper for a run of rows. `RowGroupLoader` renders the same wrapper while loading. */
+  /**
+   * A block wrapper for a run of rows. `RowGroupLoader` renders the same wrapper while loading.
+   * Directly after an expanded row, or after a group that follows one, its dividers start at the
+   * row text.
+   */
   export function Group(props: Group.Props) {
     const { className, vars, ...attributes } = props
 
-    return <div {...attributes} {...styles.group({ className, style: props.style, vars })} />
+    return (
+      <div
+        {...attributes}
+        data-group=""
+        {...styles.group({ className, style: props.style, vars })}
+      />
+    )
   }
 
   export namespace Group {
     export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.group>
   }
 
-  /** Groups a `Rows.Title` and `Rows.Description` beside a control. */
+  /**
+   * Groups a `Rows.Title` and `Rows.Description` beside a control, or stacks a `Rows.Label` over a
+   * short paragraph that does not fit on one line beside it.
+   */
   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 {
     export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.info>
   }
 
-  /** The key of a key-value row. It keeps its width and pushes the content after it to the end. */
+  /**
+   * The key of a key-value row. It keeps its width, holds at least half the row, and pushes the
+   * content after it to the end. The value then takes at most the other half, so a `Hex` truncates
+   * and long text wraps.
+   */
   export function Label(props: Label.Props) {
     const { className, vars, ...attributes } = props
 
@@ -92,7 +114,7 @@ export namespace Rows {
 
   /**
    * Content revealed by an expandable row. Mount it directly after the row while open. It eases in
-   * on mount, and the divider between it and an `aria-expanded="true"` row is hidden.
+   * on mount, and the divider above it starts at the row text.
    */
   export function Panel(props: Panel.Props) {
     const { className, vars, ...attributes } = props
@@ -141,7 +163,10 @@ 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. Dividers in a `Rows.Panel` or `Rows.Group` directly after an expanded row start
+   * there with `full` dividers too.
    * Inside a `Surface`, rows reach its edges. Variants default to `dividers="inset"`,
    * `size="medium"`.
    */
@@ -202,7 +227,7 @@ export namespace Rows {
         children: (
           <>
             <span {...styles.content()}>{children}</span>
-            {action === 'expand' && <ChevronDown data-indicator="" {...styles.indicator()} />}
+            {action === 'expand' && <ChevronRight data-indicator="" {...styles.indicator()} />}
             {action === 'navigation' && <ChevronRight {...styles.indicator()} />}
           </>
         ),
@@ -216,8 +241,9 @@ export namespace Rows {
     export type Props = Omit<useRender.ComponentProps<'div'>, 'children'> &
       Omit<zyzz.Props.Variants<typeof styles.row>, 'size'> & {
         /**
-         * `expand` shows a chevron that turns with `aria-expanded`. `navigation` shows a trailing
-         * chevron. Either makes the row a button unless `render` is set.
+         * `expand` shows a trailing chevron that turns from right to down while `aria-expanded` is
+         * true. `navigation` shows a trailing chevron. Either makes the row a button unless `render`
+         * is set.
          * @default 'none'
          */
         action?: 'expand' | 'navigation' | 'none' | undefined
@@ -255,6 +281,7 @@ export namespace Rows {
         aria-label="Loading"
         role="status"
         {...attributes}
+        data-group=""
         {...styles.group({ className, style: props.style, vars })}
       >
         {['30%', '45%'].map((width) => (
@@ -347,6 +374,29 @@ namespace styles {
         color: 'gray.900',
         flexShrink: '0 !custom',
         marginInlineEnd: 'auto !custom',
+        // Holding half the row leaves the value at most the other half, however long it is.
+        minWidth: '50% !custom',
+        selectors: {
+          // A `Hex` value yields the width of its leading identicon and gap back from this half.
+          '&:has(~ [data-hex] > [data-identicon="16"]:first-child)': {
+            minWidth: 'calc(50% - 24px) !custom',
+          },
+          '&:has(~ [data-hex] > [data-identicon="24"]:first-child)': {
+            minWidth: 'calc(50% - 32px) !custom',
+          },
+          '&:has(~ [data-hex] > [data-identicon="32"]:first-child)': {
+            minWidth: 'calc(50% - 40px) !custom',
+          },
+          '&:has(~ [data-hex] > [data-identicon="40"]:first-child)': {
+            minWidth: 'calc(50% - 48px) !custom',
+          },
+          '&:has(~ [data-hex] > [data-identicon="48"]:first-child)': {
+            minWidth: 'calc(50% - 56px) !custom',
+          },
+          '&:has(~ [data-hex] > [data-identicon="64"]:first-child)': {
+            minWidth: 'calc(50% - 72px) !custom',
+          },
+        },
       },
     },
     { id: 'tds/web/rows/label' },
@@ -392,8 +442,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',
@@ -406,8 +457,8 @@ namespace styles {
             { display: 'none' },
           '& :is(button, a[href], [role="button"])[data-divider]:hover:not(:disabled, [aria-disabled="true"]) + [data-divider]::before':
             { display: 'none' },
-          // An expanded row and its panel read as one item.
-          '& [aria-expanded="true"] + [data-divider]::before': { display: 'none' },
+          '& :is(button, a[href], [role="button"])[data-divider]:hover:not(:disabled, [aria-disabled="true"]) + [data-group] > [data-divider]:first-child::before':
+            { display: 'none' },
         },
       },
       // Inset dividers start where the row text does: 16, 20 or 24px in.
@@ -428,11 +479,37 @@ 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.
+        // Dividers in content revealed by an expanded row start at the row text, even with `full`
+        // dividers, so the content reads as nested under the row.
         size: {
-          large: { selectors: { '& [data-panel]': { paddingInline: '24' } } },
-          medium: { selectors: { '& [data-panel]': { paddingInline: '20' } } },
-          small: { typography: 'label.13.strong' },
+          large: {
+            selectors: {
+              '& :is([aria-expanded="true"] + [data-group], [aria-expanded="true"] + [data-group] + [data-group]) > [data-divider]::before':
+                { insetInlineStart: '24' },
+              '& [aria-expanded="true"] + [data-panel]::before': { insetInlineStart: '24' },
+              '& [data-panel]': { paddingInline: '24' },
+            },
+          },
+          medium: {
+            selectors: {
+              '& :is([aria-expanded="true"] + [data-group], [aria-expanded="true"] + [data-group] + [data-group]) > [data-divider]::before':
+                { insetInlineStart: '20' },
+              '& [aria-expanded="true"] + [data-panel]::before': { insetInlineStart: '20' },
+              '& [data-info]': { paddingBlock: '4' },
+              '& [data-panel]': { paddingInline: '20' },
+            },
+          },
+          small: {
+            typography: 'label.13.strong',
+            selectors: {
+              '& :is([aria-expanded="true"] + [data-group], [aria-expanded="true"] + [data-group] + [data-group]) > [data-divider]::before':
+                { insetInlineStart: '16' },
+              '& [aria-expanded="true"] + [data-panel]::before': { insetInlineStart: '16' },
+              '& [data-info]': { paddingBlock: '2' },
+            },
+          },
         },
       },
     },
@@ -474,7 +551,7 @@ namespace styles {
             outlineOffset: '-2',
           },
           '&:disabled, &[aria-disabled="true"]': { cursor: 'default', opacity: 'disabled' },
-          '&[aria-expanded="true"] [data-indicator]': { transform: 'rotate(180deg) !custom' },
+          '&[aria-expanded="true"] [data-indicator]': { transform: 'rotate(90deg) !custom' },
         },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color, opacity, outline-color',
@@ -491,11 +568,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' },
@@ -405,6 +405,15 @@ export const variables = Vars.define(
             fontWeight: 400,
             letterSpacing: '0px',
             lineHeight: '18px',
+            // Matches the 500 weight of `label.*.strong` row text, for a Hex value in a row.
+            strong: {
+              fontFamily:
+                '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+              fontSize: '13px',
+              fontWeight: 500,
+              letterSpacing: '0px',
+              lineHeight: '18px',
+            },
           },
         },
         '14': {

package/src/web/zyzz.config.ts

@@ -32,12 +32,83 @@ export const { style, variants, vars } = Config.create({
   vars: variables,
 })
 
+// Inter's subsets, written by `scripts/subset-fonts.ts`. A browser downloads only the subsets whose
+// `unicodeRange` the page's text uses, and a face declared later takes precedence where ranges
+// overlap, so the order is intentional: `symbols` first and `latin` last, as Google Fonts orders them.
 fontFace({
   fontDisplay: 'swap',
   fontFamily: 'Inter',
   fontStyle: 'normal',
   fontWeight: '100 900',
-  src: "url('../fonts/Inter-Variable.woff2') format('woff2')",
+  src: "url('../fonts/Inter-symbols.woff2') format('woff2')",
+  unicodeRange:
+    'U+02CD-036F,U+0E3F,U+1DC0-1DFF,U+2070-2298,U+2303-232B,U+2380-238B,U+23CE-23CF,U+2423-2468,U+24B6-24EA,U+25A0-26A0,U+2713-2788,U+27EF-27FA,U+2913,U+2A38,U+2B06-2B24,U+2E18,U+A92E,U+E000-E163,U+E1C3-E2DC,U+EE01-EEE1,U+F6C3,U+1F12F-1F16B,U+1F850-1F852',
+})
+
+fontFace({
+  fontDisplay: 'swap',
+  fontFamily: 'Inter',
+  fontStyle: 'normal',
+  fontWeight: '100 900',
+  src: "url('../fonts/Inter-cyrillic-ext.woff2') format('woff2')",
+  unicodeRange: 'U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F',
+})
+
+fontFace({
+  fontDisplay: 'swap',
+  fontFamily: 'Inter',
+  fontStyle: 'normal',
+  fontWeight: '100 900',
+  src: "url('../fonts/Inter-cyrillic.woff2') format('woff2')",
+  unicodeRange: 'U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116',
+})
+
+fontFace({
+  fontDisplay: 'swap',
+  fontFamily: 'Inter',
+  fontStyle: 'normal',
+  fontWeight: '100 900',
+  src: "url('../fonts/Inter-greek-ext.woff2') format('woff2')",
+  unicodeRange: 'U+1F00-1FFF',
+})
+
+fontFace({
+  fontDisplay: 'swap',
+  fontFamily: 'Inter',
+  fontStyle: 'normal',
+  fontWeight: '100 900',
+  src: "url('../fonts/Inter-greek.woff2') format('woff2')",
+  unicodeRange: 'U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF',
+})
+
+fontFace({
+  fontDisplay: 'swap',
+  fontFamily: 'Inter',
+  fontStyle: 'normal',
+  fontWeight: '100 900',
+  src: "url('../fonts/Inter-vietnamese.woff2') format('woff2')",
+  unicodeRange:
+    'U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB',
+})
+
+fontFace({
+  fontDisplay: 'swap',
+  fontFamily: 'Inter',
+  fontStyle: 'normal',
+  fontWeight: '100 900',
+  src: "url('../fonts/Inter-latin-ext.woff2') format('woff2')",
+  unicodeRange:
+    'U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF',
+})
+
+fontFace({
+  fontDisplay: 'swap',
+  fontFamily: 'Inter',
+  fontStyle: 'normal',
+  fontWeight: '100 900',
+  src: "url('../fonts/Inter-latin.woff2') format('woff2')",
+  unicodeRange:
+    'U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD',
 })
 
 fontFace({

package/dist/mobile/internal/useColor.d.ts

@@ -1,4 +0,0 @@
-import type { ColorValue } from 'react-native';
-/** Resolves a compiled style's color for props that take a color instead of a style, such as SVG fills. */
-export declare function useColor(style: Readonly<Record<string, string | number | undefined>> | undefined): ColorValue;
-//# sourceMappingURL=useColor.d.ts.map

package/dist/mobile/internal/useColor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useColor.d.ts","sourceRoot":"","sources":["../../../src/mobile/internal/useColor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAG9C,2GAA2G;AAC3G,wBAAgB,QAAQ,CACtB,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,GAAG,SAAS,GACvE,UAAU,CAMZ"}

package/dist/mobile/internal/useColor.js

@@ -1,12 +0,0 @@
-import { useStyles } from 'zyzz/react-native';
-/** Resolves a compiled style's color for props that take a color instead of a style, such as SVG fills. */
-export function useColor(style) {
-    const color = useStyles().style(style).color;
-    if (typeof color === 'string')
-        return color;
-    // iOS resolves `system` schemes to dynamic colors, which Zyzz's resolved style type omits.
-    if (color && typeof color === 'object')
-        return color;
-    throw new Error('Expected a compiled style with a color');
-}
-//# sourceMappingURL=useColor.js.map

package/dist/mobile/internal/useColor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useColor.js","sourceRoot":"","sources":["../../../src/mobile/internal/useColor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAE7C,2GAA2G;AAC3G,MAAM,UAAU,QAAQ,CACtB,KAAwE;IAExE,MAAM,KAAK,GAAY,SAAS,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,CAAA;IACrD,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAA;IAC3C,2FAA2F;IAC3F,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAmB,CAAA;IAClE,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAA;AAC3D,CAAC"}

package/src/mobile/internal/useColor.ts

@@ -1,13 +0,0 @@
-import type { ColorValue } from 'react-native'
-import { useStyles } from 'zyzz/react-native'
-
-/** Resolves a compiled style's color for props that take a color instead of a style, such as SVG fills. */
-export function useColor(
-  style: Readonly<Record<string, string | number | undefined>> | undefined,
-): ColorValue {
-  const color: unknown = useStyles().style(style).color
-  if (typeof color === 'string') return color
-  // iOS resolves `system` schemes to dynamic colors, which Zyzz's resolved style type omits.
-  if (color && typeof color === 'object') return color as ColorValue
-  throw new Error('Expected a compiled style with a color')
-}