@tempoxyz/ds 0.3.0 → 0.3.2

package/src/web/components/Toast.tsx

@@ -42,6 +42,51 @@ export namespace Toast {
   /** Sets the leading icon and its color. `neutral` shows no icon. */
   export type Intent = 'info' | 'negative' | 'neutral' | 'positive' | 'warning'
 
+  /**
+   * One toast: an elevated card with the icon of its intent, its title and description in Pilat,
+   * an optional action, and a Dismiss button. `Toast.Viewport` renders one for each queued toast.
+   * Render it yourself only under `Toast.Provider`, such as in a custom viewport, with a `toast`
+   * object from the queue. Its `type` sets the intent. The item is absolutely positioned at the
+   * bottom of its containing block, as the viewport stacks it.
+   */
+  export function Item(props: Item.Props) {
+    const { className, toast, vars, ...attributes } = props
+    const intent = (toast.type ?? 'neutral') as Intent
+    const Glyph = intent === 'neutral' ? undefined : icons[intent]
+
+    return (
+      <BaseUi.Toast.Root
+        {...attributes}
+        toast={toast}
+        {...styles.root({ className, style: props.style, vars })}
+      >
+        <BaseUi.Toast.Content {...styles.content()}>
+          {Glyph && (
+            <span aria-hidden="true" data-icon="" {...styles.icon({ intent })}>
+              <Glyph />
+            </span>
+          )}
+          <div {...styles.body()}>
+            <BaseUi.Toast.Title {...styles.title()} />
+            <BaseUi.Toast.Description {...styles.description()} />
+          </div>
+          {toast.actionProps && <BaseUi.Toast.Action {...styles.action()} />}
+          <BaseUi.Toast.Close aria-label="Dismiss" {...styles.close()}>
+            <Close />
+          </BaseUi.Toast.Close>
+        </BaseUi.Toast.Content>
+      </BaseUi.Toast.Root>
+    )
+  }
+
+  export namespace Item {
+    export type Props = Omit<ComponentPropsWithRef<'div'>, 'children'> &
+      zyzz.Props.Variants<typeof styles.root> & {
+        /** The queued toast, whose `title`, `description`, `type` and `actionProps` it renders. */
+        toast: BaseUi.Toast.Root.ToastObject
+      }
+  }
+
   /**
    * Holds the toast queue for `Toast.useToast` and `Toast.Viewport` beneath it. The oldest toasts
    * past `limit` stay mounted but hidden.
@@ -97,9 +142,8 @@ export namespace Toast {
   }
 
   /**
-   * Renders the queued toasts in a portal, each with its title, description, optional action and
-   * a Dismiss button. It spans the bottom edge on narrow screens and sits 24rem wide at the bottom
-   * end from 40rem up.
+   * Renders a `Toast.Item` for each queued toast in a portal. It spans the bottom edge on narrow
+   * screens and sits 20rem wide at the bottom end from 40rem up.
    */
   export function Viewport(props: Viewport.Props) {
     const { className, vars, ...attributes } = props
@@ -111,30 +155,9 @@ export namespace Toast {
           {...attributes}
           {...styles.viewport({ className, style: props.style, vars })}
         >
-          {toasts.map((toast) => {
-            const intent = (toast.type ?? 'neutral') as Intent
-            const Glyph = intent === 'neutral' ? undefined : icons[intent]
-
-            return (
-              <BaseUi.Toast.Root key={toast.id} toast={toast} {...styles.root()}>
-                <BaseUi.Toast.Content {...styles.content()}>
-                  {Glyph && (
-                    <span aria-hidden="true" {...styles.icon({ intent })}>
-                      <Glyph />
-                    </span>
-                  )}
-                  <div {...styles.body()}>
-                    <BaseUi.Toast.Title {...styles.title()} />
-                    <BaseUi.Toast.Description {...styles.description()} />
-                  </div>
-                  {toast.actionProps && <BaseUi.Toast.Action {...styles.action()} />}
-                  <BaseUi.Toast.Close aria-label="Dismiss" {...styles.close()}>
-                    <Close />
-                  </BaseUi.Toast.Close>
-                </BaseUi.Toast.Content>
-              </BaseUi.Toast.Root>
-            )
-          })}
+          {toasts.map((toast) => (
+            <Item key={toast.id} toast={toast} />
+          ))}
         </BaseUi.Toast.Viewport>
       </BaseUi.Toast.Portal>
     )
@@ -159,6 +182,8 @@ namespace styles {
       display: 'inline-flex',
       flexShrink: '0 !custom',
       height: '32',
+      // The 32px button centers on the 20px first line of the title.
+      marginBlock: '-6',
       paddingInline: '12',
       // Weight overrides the typography token, so it stays after it.
       typography: 'body.b3Strong',
@@ -210,6 +235,8 @@ namespace styles {
       fontSize: '16',
       height: '24',
       justifyContent: 'center',
+      // The 24px button centers on the 20px first line of the title.
+      marginBlock: '-0.125rem !custom',
       padding: '0',
       width: '24',
       outlineColor: 'transparent !custom',
@@ -232,20 +259,24 @@ namespace styles {
     { id: 'tds/web/toast/close' },
   )
 
+  // The icon, the action and the Dismiss button center on the first line of the title.
   export const content = style(
     {
-      alignItems: 'center',
+      alignItems: 'flex-start',
       boxSizing: 'border-box',
       columnGap: '12',
       display: 'flex',
       height: '100% !custom',
       overflow: 'hidden',
       paddingBlock: '16',
-      paddingInline: '20',
+      paddingInlineEnd: '16',
+      paddingInlineStart: '20',
       transitionDuration: '200',
       transitionProperty: 'opacity',
       transitionTimingFunction: 'snappy',
       selectors: {
+        // A leading icon starts 16px from the edge, and the text 12px after it.
+        '&:has(> [data-icon])': { paddingInlineStart: '16' },
         '&[data-behind]': { opacity: '0 !custom', pointerEvents: 'none' },
         '&[data-expanded]': { opacity: '1 !custom' },
       },
@@ -253,8 +284,10 @@ namespace styles {
     { id: 'tds/web/toast/content' },
   )
 
+  // The title and description set Pilat at the size of their typography set, so the family
+  // follows the set, which sets the family of the body.
   export const description = style(
-    { color: 'content.secondary', margin: '0', typography: 'body.b2' },
+    { color: 'content.secondary', margin: '0', typography: 'body.b3Strong', fontFamily: 'heading' },
     { id: 'tds/web/toast/description' },
   )
 
@@ -278,7 +311,7 @@ namespace styles {
     {
       backgroundColor: 'background.elevated',
       borderRadius: 'sm',
-      boxShadow: 'regular',
+      boxShadow: 'large',
       boxSizing: 'border-box',
       color: 'content.primary',
       height: 'var(--toast-frontmost-height, var(--toast-height)) !custom',
@@ -334,7 +367,7 @@ namespace styles {
   )
 
   export const title = style(
-    { color: 'content.primary', margin: '0', typography: 'body.b2Strong' },
+    { color: 'content.primary', margin: '0', typography: 'body.b2Strong', fontFamily: 'heading' },
     { id: 'tds/web/toast/title' },
   )
 
@@ -343,13 +376,13 @@ namespace styles {
       insetBlockEnd: '16',
       insetInline: '16',
       margin: 'auto !custom',
-      maxWidth: '360',
+      maxWidth: '320',
       position: 'fixed',
       zIndex: 'toast',
       '@media (min-width: 40rem)': {
         insetInlineStart: 'auto !custom',
         margin: '0',
-        width: '360',
+        width: '320',
       },
     },
     { id: 'tds/web/toast/viewport' },

package/src/web/components/Tooltip.tsx

@@ -96,14 +96,16 @@ export namespace Tooltip {
 }
 
 namespace styles {
+  // An elevated label with an 8px corner, padded 8px above and below and 12px at the sides.
   export const popup = style(
     {
-      backgroundColor: 'content.primary',
-      borderRadius: 'xs',
+      backgroundColor: 'background.elevated',
+      borderRadius: '2xs',
+      boxShadow: 'small',
       boxSizing: 'border-box',
-      color: 'background.primary',
+      color: 'content.primary',
       maxWidth: '320',
-      paddingBlock: '6',
+      paddingBlock: '8',
       paddingInline: '12',
       transformOrigin: 'var(--transform-origin) !custom',
       transitionDuration: '160',