rift-ds 1.5.0 → 1.7.0

package/components/ThreadTabs/ThreadTabs.css

@@ -1,7 +1,7 @@
 /* ============================================
    THREAD TABS COMPONENT
    The strip of open chat sessions across a conversation's top edge: pill
-   tabs with a leading glyph, an unread dot, a hover-revealed close button,
+   tabs with a leading glyph, a status dot, a hover-revealed close button,
    and a trailing new-tab action. Deliberately surface-less — the host
    paints the band it sits on.
 
@@ -148,14 +148,24 @@
   outline-offset: -2px;
 }
 
-/* The unread dot: a small status disc leading the label. Sized on the gap
-   scale — there is no icon token this small (ThreadPanel's dot restated). */
-.ds-thread-tabs__unread {
+/* The status dot: a StatusDot at its 8px list-row size leading the label,
+   the same mark ThreadPanel's rows carry. */
+.ds-thread-tabs__status {
   flex: none;
-  width: var(--gap-200);
-  height: var(--gap-200);
-  border-radius: var(--radius-pill);
-  background-color: var(--color-status-info-icon);
+}
+
+/* The status read aloud: the dot is decorative, so its state rides in the
+   tab's text for assistive technology only. */
+.ds-thread-tabs__status-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
 .ds-thread-tabs__icon {

package/components/ThreadTabs/ThreadTabs.d.ts

@@ -1,4 +1,6 @@
 import { default as React } from 'react';
+/** What a tab's leading dot reports — ThreadPanel's thread statuses, so a session reads the same in the rail and in the strip. */
+export type ThreadTabStatus = 'idle' | 'working' | 'unread' | 'waiting' | 'error';
 export interface ThreadTab {
     /** Stable identifier: `activeId` matches against it and the callbacks report it. */
     id: string;
@@ -6,7 +8,9 @@ export interface ThreadTab {
     label: string;
     /** The tab's leading icon — Material Symbol name (string) or custom element (ReactNode). */
     icon?: string | React.ReactNode;
-    /** The thread holds unseen activity: a small status dot leads the label. The dot is decorative — keep the state readable elsewhere when it must be announced. */
+    /** The thread's state, drawn as a dot leading the label: `working` pulses in neutral, `unread`, `waiting` and `error` are solid in the info, warning and error roles. An `idle` tab draws no dot: a strip has no left edge to keep, so only a state worth a glance takes the room. The dot is decorative; the state is also read aloud through `statusLabels`. */
+    status?: ThreadTabStatus;
+    /** Legacy boolean for `status: 'unread'`, ignored when `status` is set. @deprecated Use `status: 'unread'` instead. */
     unread?: boolean;
 }
 /** Props owned by ThreadTabs itself — everything else falls through to the root `<div>`. */
@@ -19,6 +23,8 @@ type ThreadTabsOwnProps = {
     onTabSelect?: (id: string) => void;
     /** Fires with the tab's id when its close button is pressed, or Delete lands on the focused tab. The close affordance renders only when this is given. */
     onTabClose?: (id: string) => void;
+    /** Spoken text for each tab status, read after the tab's label; the dot itself is decorative. Merged over the English defaults (Working, Unread, Needs input, Failed). */
+    statusLabels?: Partial<Record<ThreadTabStatus, string>>;
     /** Accessible name for a tab's close button; the tab's label is appended after it. */
     closeLabel?: string;
     /** Fires when the trailing new-tab button is pressed. The button renders only when this is given. */
@@ -34,7 +40,7 @@ export interface ThreadTabsProps extends ThreadTabsOwnProps, Omit<React.Componen
 }
 /**
  * ThreadTabs is the strip of open chat sessions across a conversation's top
- * edge: pill tabs with a leading glyph, an unread dot, a hover-revealed
+ * edge: pill tabs with a leading glyph, a status dot, a hover-revealed
  * close button, and a trailing new-tab action. Fully controlled — the host
  * owns which tabs exist and which is active; the strip owns the
  * choreography of a tab arriving and leaving. A removed tab is kept on

package/components/ThreadTabs/ThreadTabs.js

@@ -1,15 +1,29 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React from "react";
+import { StatusDot } from "../StatusDot/StatusDot.js";
 import "./ThreadTabs.css";
 import "../../fonts/material-symbols.css";
 const baseClass = "ds-thread-tabs";
+const STATUS_DOTS = {
+  working: { variant: "neutral", pulse: true },
+  unread: { variant: "info" },
+  waiting: { variant: "warning" },
+  error: { variant: "error" }
+};
+const DEFAULT_STATUS_LABELS = {
+  working: "Working",
+  unread: "Unread",
+  waiting: "Needs input",
+  error: "Failed"
+};
 const ThreadTabs = React.forwardRef(
   ({
     tabs,
     activeId,
     onTabSelect,
     onTabClose,
+    statusLabels,
     closeLabel = "Close thread",
     onAdd,
     addLabel = "New thread",
@@ -18,6 +32,7 @@ const ThreadTabs = React.forwardRef(
     ...rest
   }, ref) => {
     const iconClass = "material-symbols-rounded";
+    const labels = { ...DEFAULT_STATUS_LABELS, ...statusLabels };
     const listRef = React.useRef(null);
     const enteredRef = React.useRef(
       new Set(tabs.map((tab) => tab.id))
@@ -90,6 +105,7 @@ const ThreadTabs = React.forwardRef(
     return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
       /* @__PURE__ */ jsx("ul", { className: `${baseClass}__list`, "aria-label": ariaLabel, ref: listRef, children: entries.map(({ tab, leaving: isLeaving }) => {
         const active = !isLeaving && tab.id === activeId;
+        const status = tab.status ?? (tab.unread ? "unread" : "idle");
         const entering = !isLeaving && !enteredRef.current.has(tab.id);
         return /* @__PURE__ */ jsx(
           "li",
@@ -138,11 +154,13 @@ const ThreadTabs = React.forwardRef(
                         }
                       },
                       children: [
-                        tab.unread && /* @__PURE__ */ jsx(
-                          "span",
+                        status !== "idle" && /* @__PURE__ */ jsx(
+                          StatusDot,
                           {
-                            className: `${baseClass}__unread`,
-                            "aria-hidden": "true"
+                            className: `${baseClass}__status`,
+                            size: "xs",
+                            decorative: true,
+                            ...STATUS_DOTS[status]
                           }
                         ),
                         tab.icon && (typeof tab.icon === "string" ? /* @__PURE__ */ jsx(
@@ -160,7 +178,8 @@ const ThreadTabs = React.forwardRef(
                             children: tab.icon
                           }
                         )),
-                        /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: tab.label })
+                        /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: tab.label }),
+                        labels[status] && /* @__PURE__ */ jsx("span", { className: `${baseClass}__status-label`, children: labels[status] })
                       ]
                     }
                   ),

package/components/Widget/Widget.css

@@ -0,0 +1,207 @@
+/* ============================================
+   WIDGET COMPONENT
+   A titled tile for a dashboard or home screen,
+   with its rows, its groups, and the board that
+   packs tiles into columns
+   ============================================ */
+
+/* Tile — the translucent container behind a hairline, blurred so the body
+   stays on a calm field when the tile sits over an ambient background. The
+   navigation-tile radius, per the radius scale. */
+
+.ds-widget {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-300);
+  box-sizing: border-box;
+  min-width: 0;
+  padding: var(--padding-500);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-600);
+  background-color: var(--color-bg-container-primary-semi);
+  -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(24px);
+}
+
+.ds-widget__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-200);
+}
+
+.ds-widget__title {
+  display: flex;
+  align-items: baseline;
+  gap: var(--gap-200);
+  min-width: 0;
+  margin: 0;
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  letter-spacing: var(--font-title-body-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-widget__count {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+.ds-widget__action {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.ds-widget__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-100);
+  min-width: 0;
+}
+
+/* Group — a labelled run of rows */
+
+.ds-widget-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-100);
+  min-width: 0;
+}
+
+.ds-widget-group + .ds-widget-group {
+  margin-top: var(--gap-300);
+}
+
+.ds-widget-group__label {
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  letter-spacing: var(--font-caption-letter-spacing);
+  color: var(--color-text-tertiary);
+}
+
+/* Row — a leading mark, a title over a description, a trailing fact */
+
+.ds-widget-row {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-300);
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: var(--padding-150) 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+}
+
+.ds-widget-row__leading {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  --icon-size: var(--icon-size-600);
+  color: var(--color-icon-secondary);
+}
+
+.ds-widget-row__main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.ds-widget-row__title,
+.ds-widget-row__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-widget-row__title {
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-widget-row__description {
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  letter-spacing: var(--font-caption-letter-spacing);
+  color: var(--color-text-tertiary);
+}
+
+.ds-widget-row__meta {
+  flex-shrink: 0;
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  letter-spacing: var(--font-caption-letter-spacing);
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* A row that goes somewhere: the hover fill bleeds past the text into the
+   tile's padding, so the whole line reads as one target. */
+
+.ds-widget-row--interactive {
+  width: calc(100% + 2 * var(--padding-200));
+  margin-inline: calc(-1 * var(--padding-200));
+  padding-inline: var(--padding-200);
+  border-radius: var(--radius-300);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-widget-row--interactive:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-widget-row--interactive:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* Grid — CSS columns, so tiles of different heights pack with no holes and
+   the board folds as it narrows. The column floor is stated on the icon
+   scale (seven cover icons, the narrowest a row of title, description and
+   fact stays readable), not as a breakpoint. */
+
+.ds-widget-grid {
+  column-gap: var(--gap-400);
+  column-width: calc(var(--icon-size-1200) * 7);
+}
+
+.ds-widget-grid--columns-1 {
+  column-count: 1;
+}
+
+.ds-widget-grid--columns-2 {
+  column-count: 2;
+}
+
+.ds-widget-grid--columns-3 {
+  column-count: 3;
+}
+
+.ds-widget-grid > * {
+  break-inside: avoid;
+  margin-bottom: var(--gap-400);
+}

package/components/Widget/Widget.d.ts

@@ -0,0 +1,83 @@
+import { default as React } from 'react';
+/** Props owned by Widget itself — everything else falls through to the root `<section>`. */
+type WidgetOwnProps = {
+    /** The tile's heading. Also the section's accessible name, unless an `aria-label` is passed. Note: this shadows the native `title` tooltip attribute, which Widget does not expose. */
+    title: string;
+    /** A quiet figure after the title: how many rows the tile holds, how many are open. */
+    count?: number;
+    /** Trailing header slot, opposite the title — a compact button, a link, a period label. */
+    action?: React.ReactNode;
+    /** Heading element for the title, so the tile takes its place in the page's outline. */
+    titleAs?: 'h2' | 'h3' | 'h4';
+    /** The tile's body: WidgetRows, WidgetGroups, a chart, a figure, anything. */
+    children?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface WidgetProps extends WidgetOwnProps, Omit<React.ComponentPropsWithoutRef<'section'>, keyof WidgetOwnProps> {
+}
+/**
+ * Widget — a titled tile for a dashboard or a home screen: a heading with an
+ * optional count, then whatever the tile is about. The surface is the
+ * system's translucent container behind a hairline, so a board of them sits
+ * over an ambient background without going flat. Compose the body from
+ * WidgetRow and WidgetGroup for lists, or pass a chart or a figure.
+ *
+ * Purely presentational: safe to render from a Server Component.
+ */
+export declare const Widget: React.ForwardRefExoticComponent<WidgetProps & React.RefAttributes<HTMLElement>>;
+/** Props owned by WidgetGroup itself — everything else falls through to the root `<div>`. */
+type WidgetGroupOwnProps = {
+    /** The run's quiet label, e.g. "Waiting on you". */
+    label: string;
+    /** The rows in this run. */
+    children?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface WidgetGroupProps extends WidgetGroupOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof WidgetGroupOwnProps> {
+}
+/** WidgetGroup — splits a Widget's rows into labelled runs. */
+export declare const WidgetGroup: React.ForwardRefExoticComponent<WidgetGroupProps & React.RefAttributes<HTMLDivElement>>;
+/** Props owned by WidgetRow itself — everything else falls through to the root element. */
+type WidgetRowOwnProps = {
+    /** The row's main line. Note: this shadows the native `title` tooltip attribute, which WidgetRow does not expose. */
+    title: string;
+    /** A quiet second line under the title: who, where, or how much. */
+    description?: string;
+    /** Leading mark — a StatusDot, a PixelAvatar, an Avatar, a Spinner, an icon. Decorative unless the element names itself. */
+    leading?: React.ReactNode;
+    /** Trailing fact in the caption face: a date, an amount, a state. */
+    meta?: React.ReactNode;
+    /** Renders the row as a link to this URL. */
+    href?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface WidgetRowProps extends WidgetRowOwnProps, Omit<React.HTMLAttributes<HTMLElement>, keyof WidgetRowOwnProps> {
+}
+/**
+ * WidgetRow — one line inside a Widget: a leading mark, a title over an
+ * optional description, and a trailing fact. It is a link when given an
+ * `href`, a button when given an `onClick`, and a plain row otherwise, so a
+ * list only offers a target where there is somewhere to go.
+ */
+export declare const WidgetRow: React.ForwardRefExoticComponent<WidgetRowProps & React.RefAttributes<HTMLElement>>;
+/** Props owned by WidgetGrid itself — everything else falls through to the root `<div>`. */
+type WidgetGridOwnProps = {
+    /** The most columns the board runs to. It folds to fewer as its own width narrows. */
+    columns?: 1 | 2 | 3;
+    /** The Widgets on the board, in reading order: they fill the first column, then the next. */
+    children?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface WidgetGridProps extends WidgetGridOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof WidgetGridOwnProps> {
+}
+/**
+ * WidgetGrid — lays Widgets out as a board. Tiles of different heights pack
+ * into columns with no holes beside the tall ones, and the board folds to
+ * fewer columns as it narrows, with no breakpoint to configure.
+ */
+export declare const WidgetGrid: React.ForwardRefExoticComponent<WidgetGridProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Widget/Widget.js

@@ -0,0 +1,112 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React from "react";
+import "./Widget.css";
+const Widget = React.forwardRef(
+  ({ title, count, action, titleAs: Title = "h3", children, className = "", ...rest }, ref) => {
+    const baseClass = "ds-widget";
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": title,
+        ...rest,
+        ref,
+        className: [baseClass, className].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: `${baseClass}__header`, children: [
+            /* @__PURE__ */ jsxs(Title, { className: `${baseClass}__title`, children: [
+              title,
+              count !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__count`, children: count })
+            ] }),
+            action && /* @__PURE__ */ jsx("span", { className: `${baseClass}__action`, children: action })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children })
+        ]
+      }
+    );
+  }
+);
+Widget.displayName = "Widget";
+const WidgetGroup = React.forwardRef(
+  ({ label, children, className = "", ...rest }, ref) => {
+    const baseClass = "ds-widget-group";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "group",
+        "aria-label": label,
+        ...rest,
+        ref,
+        className: [baseClass, className].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, "aria-hidden": "true", children: label }),
+          children
+        ]
+      }
+    );
+  }
+);
+WidgetGroup.displayName = "WidgetGroup";
+const WidgetRow = React.forwardRef(
+  ({ title, description, leading, meta, href, className = "", onClick, ...rest }, ref) => {
+    const baseClass = "ds-widget-row";
+    const interactive = Boolean(href || onClick);
+    const classes = [baseClass, interactive ? `${baseClass}--interactive` : "", className].filter(Boolean).join(" ");
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      leading && /* @__PURE__ */ jsx("span", { className: `${baseClass}__leading`, children: leading }),
+      /* @__PURE__ */ jsxs("span", { className: `${baseClass}__main`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title }),
+        description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__description`, children: description })
+      ] }),
+      meta !== void 0 && meta !== null && /* @__PURE__ */ jsx("span", { className: `${baseClass}__meta`, children: meta })
+    ] });
+    if (href) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ...rest,
+          ref,
+          href,
+          className: classes,
+          onClick,
+          children: content
+        }
+      );
+    }
+    if (onClick) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ...rest,
+          ref,
+          type: "button",
+          className: classes,
+          onClick,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes, children: content });
+  }
+);
+WidgetRow.displayName = "WidgetRow";
+const WidgetGrid = React.forwardRef(
+  ({ columns = 2, children, className = "", ...rest }, ref) => {
+    const baseClass = "ds-widget-grid";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: [baseClass, `${baseClass}--columns-${columns}`, className].filter(Boolean).join(" "),
+        children
+      }
+    );
+  }
+);
+WidgetGrid.displayName = "WidgetGrid";
+export {
+  Widget,
+  WidgetGrid,
+  WidgetGroup,
+  WidgetRow
+};

package/components/registry.json

@@ -755,6 +755,14 @@
       "category": "maps",
       "client": false
     },
+    {
+      "name": "Mention",
+      "label": "Mention",
+      "slug": "mention",
+      "description": "An inline reference to an entity or a skill, with the menu that @ or / opens while typing and the tag it leaves in the message.",
+      "category": "ai",
+      "client": true
+    },
     {
       "name": "MessageActions",
       "label": "Message actions",
@@ -853,6 +861,14 @@
       "category": "forms",
       "client": true
     },
+    {
+      "name": "PixelAvatar",
+      "label": "Pixel avatar",
+      "slug": "pixel-avatar",
+      "description": "A generated character mark drawn from a name: the same name is always the same pixel creature in the same ink.",
+      "category": "data-display",
+      "client": false
+    },
     {
       "name": "Popover",
       "label": "Popover",
@@ -1017,7 +1033,7 @@
       "slug": "source-chip",
       "description": "A numbered citation pill linking a claim to its source.",
       "category": "ai",
-      "client": false
+      "client": true
     },
     {
       "name": "SourceTrail",
@@ -1153,7 +1169,7 @@
       "name": "ThreadTabs",
       "label": "Thread tabs",
       "slug": "thread-tabs",
-      "description": "The strip of open chat sessions: pill tabs with unread dots and hover-revealed close buttons, a new-tab action, and animated enter and exit.",
+      "description": "The strip of open chat sessions: pill tabs with status dots and hover-revealed close buttons, a new-tab action, and animated enter and exit.",
       "category": "ai",
       "client": true
     },
@@ -1263,6 +1279,14 @@
       "category": "ai",
       "client": false
     },
+    {
+      "name": "Widget",
+      "label": "Widget",
+      "slug": "widget",
+      "description": "A titled tile for a dashboard or home screen, with rows, labelled groups, and a board that packs tiles into columns.",
+      "category": "data-display",
+      "client": false
+    },
     {
       "name": "WorldMap",
       "label": "World map",

package/components/registry.json.d.ts

@@ -755,6 +755,14 @@ declare const _default: {
       "category": "maps",
       "client": false
     },
+    {
+      "name": "Mention",
+      "label": "Mention",
+      "slug": "mention",
+      "description": "An inline reference to an entity or a skill, with the menu that @ or / opens while typing and the tag it leaves in the message.",
+      "category": "ai",
+      "client": true
+    },
     {
       "name": "MessageActions",
       "label": "Message actions",
@@ -853,6 +861,14 @@ declare const _default: {
       "category": "forms",
       "client": true
     },
+    {
+      "name": "PixelAvatar",
+      "label": "Pixel avatar",
+      "slug": "pixel-avatar",
+      "description": "A generated character mark drawn from a name: the same name is always the same pixel creature in the same ink.",
+      "category": "data-display",
+      "client": false
+    },
     {
       "name": "Popover",
       "label": "Popover",
@@ -1017,7 +1033,7 @@ declare const _default: {
       "slug": "source-chip",
       "description": "A numbered citation pill linking a claim to its source.",
       "category": "ai",
-      "client": false
+      "client": true
     },
     {
       "name": "SourceTrail",
@@ -1153,7 +1169,7 @@ declare const _default: {
       "name": "ThreadTabs",
       "label": "Thread tabs",
       "slug": "thread-tabs",
-      "description": "The strip of open chat sessions: pill tabs with unread dots and hover-revealed close buttons, a new-tab action, and animated enter and exit.",
+      "description": "The strip of open chat sessions: pill tabs with status dots and hover-revealed close buttons, a new-tab action, and animated enter and exit.",
       "category": "ai",
       "client": true
     },
@@ -1263,6 +1279,14 @@ declare const _default: {
       "category": "ai",
       "client": false
     },
+    {
+      "name": "Widget",
+      "label": "Widget",
+      "slug": "widget",
+      "description": "A titled tile for a dashboard or home screen, with rows, labelled groups, and a board that packs tiles into columns.",
+      "category": "data-display",
+      "client": false
+    },
     {
       "name": "WorldMap",
       "label": "World map",