@tempoxyz/ds 0.2.0 → 0.2.4

package/src/oxlint/rules/RequireAccessibleName.ts

@@ -0,0 +1,132 @@
+/** Requires a name on `@tempoxyz/ds` components that render no text of their own. @module */
+import type { ESTree, Rule } from '@oxlint/plugins'
+import * as Imports from '../internal/Imports.ts'
+
+type Target = {
+  /** Attributes that name the element. */
+  readonly names: readonly string[]
+  /** An attribute and value that make the component icon-only. When absent, every use needs a name. */
+  readonly when?: { readonly attribute: string; readonly value: string } | undefined
+}
+
+const list = new Intl.ListFormat('en', { type: 'disjunction' })
+const web = ['aria-label', 'aria-labelledby']
+const mobile = ['accessibilityLabel', 'accessibilityLabelledBy', 'aria-label', 'aria-labelledby']
+
+// Components from each surface whose rendered output has no text to name it.
+const targets: Record<Imports.Surface, Record<string, Target>> = {
+  mobile: { IconButton: { names: mobile } },
+  web: {
+    Button: { names: web, when: { attribute: 'shape', value: 'icon' } },
+    'Button.Link': { names: web, when: { attribute: 'shape', value: 'icon' } },
+    Gauge: { names: web },
+  },
+}
+
+/**
+ * Reports an icon-only `Button` or `Button.Link`, a `Gauge`, or a Mobile `IconButton` without an
+ * accessible name. An element passed to a `render` prop can take its name from the element that
+ * owns the prop. Elements with a spread attribute are skipped, since the spread can supply the name.
+ */
+export const rule: Rule = {
+  meta: {
+    docs: { description: 'Name `@tempoxyz/ds` components that render no text.' },
+    messages: {
+      missing: "'{{component}}' renders no text. Name it with {{names}}.",
+    },
+    schema: [],
+    type: 'problem',
+  },
+  create(context) {
+    type Binding = { imported: string | undefined; surface: Imports.Surface }
+
+    const bindings = new Map<string, Binding>()
+
+    function attribute(node: ESTree.JSXOpeningElement, name: string) {
+      return node.attributes.find(
+        (attribute): attribute is ESTree.JSXAttribute =>
+          attribute.type === 'JSXAttribute' &&
+          attribute.name.type === 'JSXIdentifier' &&
+          attribute.name.name === name,
+      )
+    }
+
+    function literal(node: ESTree.JSXAttribute) {
+      const value =
+        node.value?.type === 'JSXExpressionContainer' ? node.value.expression : node.value
+
+      return value?.type === 'Literal' ? value.value : undefined
+    }
+
+    function named(target: Target, node: ESTree.JSXOpeningElement) {
+      if (node.attributes.some((attribute) => attribute.type === 'JSXSpreadAttribute')) return true
+
+      return target.names.some((name) => {
+        const found = attribute(node, name)
+
+        return found !== undefined && literal(found) !== ''
+      })
+    }
+
+    function path(node: ESTree.JSXElementName | ESTree.JSXMemberExpressionObject): string[] {
+      if (node.type === 'JSXIdentifier') return [node.name]
+      if (node.type === 'JSXMemberExpression') return [...path(node.object), node.property.name]
+      return []
+    }
+
+    return {
+      ImportDeclaration(node) {
+        const surface = Imports.surface(node.source.value)
+
+        if (!surface || node.importKind === 'type') return
+        for (const specifier of node.specifiers) {
+          if (specifier.type === 'ImportNamespaceSpecifier')
+            bindings.set(specifier.local.name, { imported: undefined, surface })
+          if (specifier.type === 'ImportSpecifier' && specifier.importKind !== 'type')
+            bindings.set(specifier.local.name, {
+              imported:
+                specifier.imported.type === 'Identifier'
+                  ? specifier.imported.name
+                  : String(specifier.imported.value),
+              surface,
+            })
+        }
+      },
+      JSXOpeningElement(node) {
+        const [head, ...rest] = path(node.name)
+        const binding = head === undefined ? undefined : bindings.get(head)
+
+        if (!binding) return
+
+        const component = (binding.imported ? [binding.imported, ...rest] : rest).join('.')
+        const target = targets[binding.surface][component]
+
+        if (!target) return
+        if (target.when) {
+          const condition = attribute(node, target.when.attribute)
+
+          if (!condition || literal(condition) !== target.when.value) return
+        }
+
+        // An element passed to `render` takes its attributes from the element that owns the prop.
+        const owner = (() => {
+          for (let parent: ESTree.Node | null = node.parent; parent; parent = parent.parent)
+            if (
+              parent.type === 'JSXAttribute' &&
+              parent.name.type === 'JSXIdentifier' &&
+              parent.name.name === 'render'
+            )
+              return parent.parent.type === 'JSXOpeningElement' ? parent.parent : undefined
+          return undefined
+        })()
+
+        if (!named(target, node) && (!owner || !named(target, owner)))
+          context.report({
+            data: { component, names: list.format(target.names.map((name) => `\`${name}\``)) },
+            messageId: 'missing',
+            node,
+          })
+      },
+    }
+  },
+}

package/src/web/components/Accordion.tsx

@@ -143,7 +143,7 @@ namespace styles {
     {
       flexShrink: '0 !custom',
       height: '16',
-      transitionDuration: '240ms',
+      transitionDuration: '240',
       transitionProperty: 'transform',
       transitionTimingFunction: 'spring',
       width: '16',
@@ -169,11 +169,11 @@ namespace styles {
         height: 'var(--accordion-panel-height) !custom',
         overflow: 'hidden',
         // Revealing content needs its measured height, which a transform cannot provide.
-        transitionDuration: '240ms',
+        transitionDuration: '240',
         transitionProperty: 'height, opacity',
         transitionTimingFunction: 'spring',
         selectors: {
-          '&[data-ending-style]': { transitionDuration: '180ms' },
+          '&[data-ending-style]': { transitionDuration: '180' },
           '&[data-ending-style], &[data-starting-style]': {
             height: '0',
             opacity: '0 !custom',
@@ -232,21 +232,21 @@ namespace styles {
         justifyContent: 'space-between',
         minHeight: '40',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         paddingBlock: '8',
         paddingInline: '0',
         textAlign: 'start',
-        transitionDuration: '160ms',
+        transitionDuration: '160',
         transitionProperty: 'opacity, outline-color, outline-offset',
         transitionTimingFunction: 'snappy',
         // Weight overrides the typography token, so it stays after it.
         typography: 'button.14',
         width: '100% !custom',
         selectors: {
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
-          '&[data-disabled]': { cursor: 'default', opacity: '0.4 !custom' },
+          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
+          '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
         },
         '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'opacity, outline-color' },
       },

package/src/web/components/AlertDialog.tsx

@@ -107,31 +107,34 @@ export namespace AlertDialog {
 namespace styles {
   export const popup = style(
     {
-      backgroundColor: 'light-dark(#fff, #1f1e1e) !custom',
+      backgroundColor: 'background.raised',
       borderRadius: '16',
-      boxShadow: '0 32px 64px -16px rgb(0 0 0 / 0.28) !custom',
+      boxShadow: 'modal',
       boxSizing: 'border-box',
       color: 'foreground',
       maxWidth: '384',
       outline: 'none !custom',
       padding: '24',
-      transitionDuration: '280ms',
-      transitionProperty: 'opacity, transform',
+      transitionDuration: '280',
+      transitionProperty: 'opacity, scale',
       transitionTimingFunction: 'spring',
       typography: 'copy.14',
       width: '100% !custom',
       selectors: {
         '&[data-ending-style]': {
           opacity: '0 !custom',
-          transform: 'scale(0.96) !custom',
-          transitionDuration: '180ms',
+          scale: 'enter',
+          transitionDuration: '180',
+        },
+        '&[data-starting-style]': {
+          opacity: '0 !custom',
+          scale: 'enter',
         },
-        '&[data-starting-style]': { opacity: '0 !custom', transform: 'scale(0.96) !custom' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'opacity',
         selectors: {
-          '&[data-ending-style], &[data-starting-style]': { transform: 'none !custom' },
+          '&[data-ending-style], &[data-starting-style]': { scale: 'none !custom' },
         },
       },
     },

package/src/web/components/Amount.tsx

@@ -3,9 +3,9 @@ import type * as zyzz from 'zyzz'
 import { style, variants } from '../zyzz.config.js'
 
 /**
- * Formats a number in the user's locale inside a `span` with tabular figures. `currency` formats
- * an ISO 4217 code as money, and `symbol` follows the number with a token symbol. The two are
- * mutually exclusive.
+ * Formats a number in `en-US`, or in `locale` when set, inside a `span` with tabular figures.
+ * `currency` formats an ISO 4217 code as money, and `symbol` follows the number with a token
+ * symbol. The two are mutually exclusive.
  *
  * - Pass amounts as decimal strings to avoid floating-point rounding.
  * - Always pass `currency` or `symbol` so the unit does not depend on surrounding context.
@@ -24,6 +24,7 @@ export function Amount(props: Amount.Props) {
   const {
     className,
     currency,
+    locale,
     maxDecimals,
     precise,
     sign,
@@ -48,7 +49,7 @@ export function Amount(props: Amount.Props) {
       })}
     >
       {sign}
-      {format({ currency, maxDecimals, precise, value })}
+      {format({ currency, locale, maxDecimals, precise, value })}
       {symbol && <span {...styles.symbol()}> {symbol}</span>}
     </span>
   )
@@ -57,6 +58,13 @@ export function Amount(props: Amount.Props) {
 export namespace Amount {
   export type Props = Omit<ComponentPropsWithRef<'span'>, 'children'> &
     zyzz.Props.Variants<typeof styles.amount> & {
+      /**
+       * BCP 47 tag, such as `de-DE`, for grouping, decimal marks, and currency symbols. The default
+       * does not depend on the runtime locale, so server and browser render the same text. A tag
+       * that `Intl` rejects, such as `""` or `"en_US"`, falls back to `en-US` instead of throwing.
+       * @default 'en-US'
+       */
+      locale?: string | undefined
       /**
        * Caps the fraction digits shown. With `currency`, it never exceeds the currency's own digits
        * and sets the exact count, so `0` renders `$5`.
@@ -88,29 +96,41 @@ export namespace Amount {
     )
 }
 
-function format(options: Pick<Amount.Props, 'currency' | 'maxDecimals' | 'precise' | 'value'>) {
+function format(
+  options: Pick<Amount.Props, 'currency' | 'locale' | 'maxDecimals' | 'precise' | 'value'>,
+) {
   const { currency, maxDecimals, precise, value } = options
   // ES2023 formats decimal strings exactly. The signature keeps ES2022 libs compiling.
   const exact = (formatter: Intl.NumberFormat) =>
     (formatter.format as (value: number | string) => string)(value)
 
+  // `Intl.NumberFormat` throws for a malformed tag and replaces an unsupported one with the
+  // runtime locale, so both resolve to `en-US` here.
+  const locale = (() => {
+    try {
+      return Intl.NumberFormat.supportedLocalesOf(options.locale)[0] ?? 'en-US'
+    } catch {
+      return 'en-US'
+    }
+  })()
+
   if (currency) {
     const money = { currency, style: 'currency' } as const
-    const max = new Intl.NumberFormat(undefined, money).resolvedOptions().maximumFractionDigits!
+    const max = new Intl.NumberFormat(locale, money).resolvedOptions().maximumFractionDigits!
     const digits = Math.min(maxDecimals ?? max, max)
     const number = Number(value)
     const sub = number !== 0 && Math.abs(number) < 10 ** -digits
 
     if (sub && precise)
       return exact(
-        new Intl.NumberFormat(undefined, {
+        new Intl.NumberFormat(locale, {
           ...money,
           maximumFractionDigits: 20,
           maximumSignificantDigits: 2,
         }),
       )
 
-    const formatter = new Intl.NumberFormat(undefined, {
+    const formatter = new Intl.NumberFormat(locale, {
       ...money,
       maximumFractionDigits: digits,
       minimumFractionDigits: digits,
@@ -124,7 +144,7 @@ function format(options: Pick<Amount.Props, 'currency' | 'maxDecimals' | 'precis
   const digits = Math.min(maxDecimals ?? fraction, fraction)
 
   return exact(
-    new Intl.NumberFormat(undefined, {
+    new Intl.NumberFormat(locale, {
       maximumFractionDigits: digits,
       minimumFractionDigits: typeof value === 'string' ? digits : 0,
     }),

package/src/web/components/AmountInput.tsx

@@ -6,8 +6,21 @@ import { Input } from './Input.js'
 import * as AmountContext from './internal/AmountContext.js'
 
 /**
- * Decimal amount entry. The value is a raw string without grouping commas, and input that is
- * not a non-negative decimal is rejected.
+ * Decimal amount entry. The value is a raw string with a dot separator and no grouping
+ * separators, and input that is not a non-negative decimal is rejected.
+ *
+ * The text around a comma decides whether it groups thousands or separates decimals:
+ *
+ * - With both a dot and a comma, the last one separates decimals and the other groups thousands:
+ *   `1,250.50` and `1.250,50` are both `1250.50`.
+ * - Several commas group thousands: `1,250,000` is `1250000`.
+ * - A lone comma groups thousands after one to three digits that do not start with `0`, when
+ *   exactly three digits follow it: `1,250` is `1250`.
+ * - Any other lone comma separates decimals: `1,5` is `1.5`, `0,250` is `0.250`, `1234,567` is
+ *   `1234.567`, and `12,` is `12.`.
+ *
+ * The field shows a lone comma as typed until a dot or a second comma settles it, then shows the
+ * value.
  *
  * `Control` is a text input with `inputMode="decimal"`, so mobile keyboards show digits without
  * the scroll and spinner behavior of `type="number"`.
@@ -46,10 +59,8 @@ export namespace AmountInput {
         value={{
           value,
           setValue(next) {
-            const clean = next.replaceAll(',', '')
-            if (!/^\d*\.?\d*$/.test(clean)) return
-            setUncontrolled(clean)
-            onValueChange?.(clean)
+            setUncontrolled(next)
+            onValueChange?.(next)
           },
         }}
       >
@@ -70,9 +81,11 @@ export namespace AmountInput {
   /** Text field whose digits morph as the value changes. Motion stops under reduced motion. */
   export function Control(props: Control.Props) {
     const amount = AmountContext.use()
-    const [typed, setTyped] = useState<{ caret: number | null; value: string }>()
+    const [typed, setTyped] = useState<{ caret: number | null; text: string; value: string }>()
     // Typed edits morph at the caret. Other changes, such as Max, roll digits by place value.
-    const caret = typed?.value === amount.value ? (typed.caret ?? undefined) : undefined
+    const edit = typed?.value === amount.value ? typed : undefined
+    const caret = edit?.caret ?? undefined
+    const text = edit?.text ?? amount.value
 
     return (
       <span {...styles.control()}>
@@ -82,15 +95,20 @@ export namespace AmountInput {
           {...props}
           {...styles.input({ className: props.className, style: props.style })}
           onValueChange={(next, details) => {
+            const value = parse(next)
+            if (value === undefined) return
+
             const input = details.event.target as HTMLInputElement
-            setTyped({ caret: input.selectionStart, value: next.replaceAll(',', '') })
-            amount.setValue(next)
+            // The digits typed after a lone comma can still change its role, so it stays in place.
+            const lone = !next.includes('.') && next.split(',').length === 2
+            setTyped({ caret: input.selectionStart, text: lone ? next : value, value })
+            amount.setValue(value)
           }}
           type="text"
-          value={amount.value}
+          value={text}
         />
         <span aria-hidden="true" {...styles.morph()}>
-          <TextMorph {...(caret !== undefined && { cursorIndex: caret })}>{amount.value}</TextMorph>
+          <TextMorph {...(caret !== undefined && { cursorIndex: caret })}>{text}</TextMorph>
         </span>
       </span>
     )
@@ -133,6 +151,24 @@ export namespace AmountInput {
   export const Suffix = Input.Suffix
 }
 
+/** Returns the raw decimal for typed text, or `undefined` when it is not a non-negative decimal. */
+function parse(text: string) {
+  const value = (() => {
+    const dot = text.lastIndexOf('.')
+    if (dot !== -1 && text.lastIndexOf(',') > dot)
+      return text.replaceAll('.', '').replaceAll(',', '.')
+
+    // Grouping needs a first group of one to three digits without a leading zero, so `0,250` and
+    // `1234,567` are decimals.
+    if (/^[^,.]*,[^,.]*$/.test(text) && !/^[1-9]\d{0,2},\d{3}$/.test(text))
+      return text.replace(',', '.')
+
+    return text.replaceAll(',', '')
+  })()
+
+  return /^\d*\.?\d*$/.test(value) ? value : undefined
+}
+
 namespace styles {
   export const control = style(
     {
@@ -163,33 +199,33 @@ namespace styles {
       cursor: 'pointer',
       flexShrink: '0 !custom',
       outlineColor: 'transparent !custom',
-      outlineOffset: '0px !custom',
+      outlineOffset: '0',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2px !custom',
+      outlineWidth: '2',
       position: 'relative',
-      transitionDuration: '160ms',
-      transitionProperty: 'background-color, outline-color, outline-offset, transform',
+      transitionDuration: '160',
+      transitionProperty: 'background-color, outline-color, outline-offset, scale',
       transitionTimingFunction: 'snappy',
       selectors: {
         // Each field size insets Max equally from the end and the top, with a concentric radius.
         '[data-size="large"] > &': {
           borderRadius: '8',
           height: '40',
-          marginInlineEnd: '-12px !custom',
+          marginInlineEnd: '-12',
           paddingInline: '16',
           typography: 'button.14',
         },
         '[data-size="medium"] > &': {
           borderRadius: '6',
           height: '28',
-          marginInlineEnd: '-10px !custom',
+          marginInlineEnd: '-10',
           paddingInline: '12',
           typography: 'button.12',
         },
         '[data-size="small"] > &': {
           borderRadius: '4',
           height: '24',
-          marginInlineEnd: '-8px !custom',
+          marginInlineEnd: '-8',
           paddingInline: '8',
           typography: 'button.12',
         },
@@ -197,7 +233,7 @@ namespace styles {
         '[data-variant="stacked"] > [data-size="small"] > &': {
           borderRadius: '6',
           height: '28',
-          marginInlineEnd: '-10px !custom',
+          marginInlineEnd: '-10',
           paddingInline: '12',
           typography: 'button.12',
         },
@@ -209,15 +245,15 @@ namespace styles {
           paddingInline: '12',
           typography: 'button.12',
         },
-        '&::after': { content: '"" !custom', inset: '-4px !custom', position: 'absolute' },
-        '&:active': { transform: 'scale(0.98) !custom' },
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+        '&::after': { content: '"" !custom', inset: '-4', position: 'absolute' },
+        '&:active': { scale: 'press' },
+        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
         '&:hover': { backgroundColor: 'grayAlpha.300' },
         '[data-invalid] &': { display: 'none' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'background-color, outline-color',
-        selectors: { '&:active': { transform: 'none !custom' } },
+        selectors: { '&:active': { scale: 'none !custom' } },
       },
     },
     { id: 'tds/web/amount-input/max' },

package/src/web/components/AppShell.tsx

@@ -294,12 +294,12 @@ namespace styles {
       inset: '0',
       opacity: '0.6 !custom',
       position: 'fixed',
-      transitionDuration: '280ms !custom',
+      transitionDuration: '280',
       transitionProperty: 'opacity !custom',
       transitionTimingFunction: 'spring',
-      zIndex: '40 !custom',
+      zIndex: 'overlay',
       selectors: {
-        '&[data-ending-style]': { opacity: '0 !custom', transitionDuration: '200ms !custom' },
+        '&[data-ending-style]': { opacity: '0 !custom', transitionDuration: '200' },
         '&[data-starting-style]': { opacity: '0 !custom' },
       },
     },
@@ -310,23 +310,23 @@ namespace styles {
     {
       backgroundColor: 'currentColor !custom',
       borderRadius: 'full',
-      height: '1.5px !custom',
+      height: '2',
       insetInlineStart: '0',
       position: 'absolute',
       top: '50% !custom',
-      transitionDuration: '240ms !custom',
+      transitionDuration: '240',
       transitionProperty: 'transform !custom',
       transitionTimingFunction: 'spring',
       width: '100% !custom',
       selectors: {
         // Two bars 6px apart meet at the centre and cross into a close mark while the drawer is open.
-        '&:first-child': { transform: 'translateY(-3.75px) !custom' },
-        '&:last-child': { transform: 'translateY(2.25px) !custom' },
+        '&:first-child': { transform: 'translateY(-4px) !custom' },
+        '&:last-child': { transform: 'translateY(2px) !custom' },
         '[data-popup-open] &:first-child': {
-          transform: 'translateY(-0.75px) rotate(45deg) !custom',
+          transform: 'translateY(-1px) rotate(45deg) !custom',
         },
         '[data-popup-open] &:last-child': {
-          transform: 'translateY(-0.75px) rotate(-45deg) !custom',
+          transform: 'translateY(-1px) rotate(-45deg) !custom',
         },
       },
       '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'none !custom' },
@@ -348,17 +348,17 @@ namespace styles {
       outline: 'none !custom',
       overflowY: 'auto',
       transform: 'translateX(var(--drawer-swipe-movement-x, 0px)) !custom',
-      transitionDuration: '280ms !custom',
+      transitionDuration: '280',
       transitionProperty: 'transform !custom',
       transitionTimingFunction: 'spring',
       width: 'min(18rem, 85vw) !custom',
       selectors: {
         '&[data-ending-style]': {
           transform: 'translateX(100%) !custom',
-          transitionDuration: '200ms !custom',
+          transitionDuration: '200',
         },
         '&[data-starting-style]': { transform: 'translateX(100%) !custom' },
-        '&[data-swiping]': { transitionDuration: '0ms !custom', userSelect: 'none' },
+        '&[data-swiping]': { transitionDuration: '0', userSelect: 'none' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'opacity !custom',
@@ -452,7 +452,7 @@ namespace styles {
         flexShrink: '0 !custom',
         minHeight: '0',
         paddingBottom: '20',
-        paddingInline: '10px !custom',
+        paddingInline: '10',
         rowGap: '24',
       },
     },
@@ -481,11 +481,11 @@ namespace styles {
       base: {
         flex: '1 !custom',
         // Bleeding into the sidebar's inline padding puts the scrollbar at the sidebar edge.
-        marginInline: '-10px !custom',
+        marginInline: '-10',
         minHeight: '0',
         overflowY: 'auto',
         overscrollBehavior: 'contain',
-        paddingInline: '10px !custom',
+        paddingInline: '10',
         // Classic scrollbars keep their own lane instead of covering content at the edge.
         scrollbarGutter: 'stable',
         scrollbarWidth: 'thin',
@@ -560,7 +560,7 @@ namespace styles {
         borderColor: 'grayAlpha.200',
         borderRadius: 'full',
         borderStyle: 'solid',
-        borderWidth: '1px !custom',
+        borderWidth: '1',
         boxShadow: 'raised',
         boxSizing: 'border-box',
         color: 'foreground',
@@ -571,26 +571,26 @@ namespace styles {
         insetInlineEnd: '16',
         justifyContent: 'center',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         padding: '0',
         // Fixed above the drawer and its backdrop, so the same button closes what it opened.
         position: 'fixed',
-        transitionDuration: '160ms !custom',
+        transitionDuration: '160',
         transitionProperty: 'background-color, outline-color, outline-offset, transform !custom',
         transitionTimingFunction: 'snappy',
         width: '40',
-        zIndex: '60 !custom',
+        zIndex: 'modal',
         selectors: {
           '&:active': { transform: 'scale(0.96) !custom' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
           '&:hover': { backgroundColor: 'gray.100' },
           // While open, the button rides out with the drawer and rests 8px outside its left edge,
           // so the close mark never covers the sidebar. The width matches the drawer's.
           '&[data-popup-open]': {
             transform: 'translateX(calc(8px - min(18rem, 85vw))) !custom',
-            transitionDuration: '280ms !custom',
+            transitionDuration: '280',
             transitionTimingFunction: 'spring',
           },
         },
@@ -610,7 +610,7 @@ namespace styles {
       inset: '0',
       justifyContent: 'flex-end',
       position: 'fixed',
-      zIndex: '50 !custom',
+      zIndex: 'popover',
     },
     { id: 'tds/web/app-shell/viewport' },
   )

package/src/web/components/Avatar.tsx

@@ -141,7 +141,7 @@ namespace styles {
               // Margin changes the group's width, which a transform cannot. Transitions retarget from
               // the current margin, so a brief hover reverses smoothly.
               '& > * + *': {
-                transitionDuration: '220ms',
+                transitionDuration: '220',
                 transitionProperty: 'margin-inline-start',
                 transitionTimingFunction: 'snappy',
               },
@@ -160,11 +160,11 @@ namespace styles {
           false: { columnGap: '8' },
           true: {
             selectors: {
-              '& > * + *': { marginInlineStart: '-0.5rem !custom' },
+              '& > * + *': { marginInlineStart: '-8' },
               '& > *': {
                 outlineColor: 'background.primary',
                 outlineStyle: 'solid !custom',
-                outlineWidth: '2px !custom',
+                outlineWidth: '2',
               },
             },
           },