@ttoss/fsl-ui 0.2.5 → 0.2.7

package/dist/components/Table/Table.mjs

@@ -0,0 +1,239 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { focusRingOutline } from "../../tokens/focusRing.mjs";
+import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
+import { Icon } from "../Icon/Icon.mjs";
+import { vars } from "@ttoss/fsl-theme/vars";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Cell, Column, Row, Table, TableBody, TableHeader } from "react-aria-components";
+
+//#region src/components/Table/Table.tsx
+/** Formal semantic identity — Table root (Collection entity, surface). */
+var tableMeta = {
+  displayName: "Table",
+  entity: "Collection",
+  structure: "root"
+};
+/** Formal semantic identity — TableColumn header (Collection `title` role). */
+var tableColumnMeta = {
+  displayName: "TableColumn",
+  entity: "Collection",
+  structure: "title"
+};
+/** Formal semantic identity — TableRow (Selection entity, selectable row). */
+var tableRowMeta = {
+  displayName: "TableRow",
+  entity: "Selection",
+  structure: "item",
+  composition: "selection"
+};
+/** Formal semantic identity — TableCell (Collection `content` role). */
+var tableCellMeta = {
+  displayName: "TableCell",
+  entity: "Collection",
+  structure: "content"
+};
+/**
+* A semantic data table built on React Aria's `Table` — column headers,
+* keyboard grid navigation, sorting, and row selection.
+*
+* Per ADR-007 the CONTAINER is Entity = Collection (an `informational`
+* surface) and each `TableRow` is Entity = Selection (`input` chrome, the
+* `selected` State). Compose `TableHeader` + `TableColumn` for the header
+* and `TableBody` + `TableRow` + `TableCell` for the data. Sorting is
+* controlled via `sortDescriptor`/`onSortChange` with `allowsSorting` on the
+* sortable columns. Row selection uses React Aria's `selectionMode`;
+* clicking a row toggles it (there is no checkbox column yet — it ships
+* when a consumer demands bulk actions).
+*
+* @example
+* ```tsx
+* <Table aria-label="Team" sortDescriptor={sort} onSortChange={setSort}>
+*   <TableHeader>
+*     <TableColumn id="name" isRowHeader allowsSorting>Name</TableColumn>
+*     <TableColumn id="role">Role</TableColumn>
+*   </TableHeader>
+*   <TableBody>
+*     <TableRow id="ada">
+*       <TableCell>Ada Lovelace</TableCell>
+*       <TableCell>Admin</TableCell>
+*     </TableRow>
+*   </TableBody>
+* </Table>
+* ```
+*/
+var Table$1 = props => {
+  const surface = vars.colors.informational.primary;
+  return /* @__PURE__ */jsx(Table, {
+    ...props,
+    "data-scope": "table",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      inlineSize: "100%",
+      borderCollapse: "separate",
+      borderSpacing: 0,
+      borderRadius: vars.radii.surface,
+      borderWidth: vars.border.outline.surface.width,
+      borderStyle: vars.border.outline.surface.style,
+      borderColor: surface?.border?.default ?? "transparent",
+      backgroundColor: surface?.background?.default,
+      color: surface?.text?.default
+    }
+  });
+};
+Table$1.displayName = tableMeta.displayName;
+/**
+* The header row group. An internal frame part — place `TableColumn`s
+* inside it.
+*/
+var TableHeader$1 = props => {
+  return /* @__PURE__ */jsx(TableHeader, {
+    ...props,
+    "data-scope": "table",
+    "data-part": "header"
+  });
+};
+TableHeader$1.displayName = "TableHeader";
+/**
+* A column header (Collection `title` role). With `allowsSorting`, React
+* Aria makes it a keyboard-operable sort control (`aria-sort` included) and
+* the current direction renders as an arrow Icon
+* (`action.sortAscending` / `action.sortDescending`).
+*
+* Set `isRowHeader` on the column whose cells name the row for assistive
+* technology.
+*/
+var TableColumn = ({
+  children,
+  ...props
+}) => {
+  const colors = vars.colors.informational.muted;
+  return /* @__PURE__ */jsx(Column, {
+    ...props,
+    "data-scope": "table",
+    "data-part": "title",
+    style: ({
+      allowsSorting,
+      isHovered,
+      isFocusVisible
+    }) => {
+      return {
+        boxSizing: "border-box",
+        textAlign: "start",
+        paddingBlock: vars.spacing.inset.control.sm,
+        paddingInline: vars.spacing.inset.control.md,
+        ...vars.text.label.sm,
+        cursor: allowsSorting ? "pointer" : void 0,
+        transitionProperty: "color",
+        transitionDuration: vars.motion.feedback.duration,
+        transitionTimingFunction: vars.motion.feedback.easing,
+        color: allowsSorting ? resolveInteractiveStyle(colors?.text, {
+          isHovered
+        }) : colors?.text?.default,
+        borderBlockEndWidth: vars.border.divider.width,
+        borderBlockEndStyle: vars.border.divider.style,
+        borderBlockEndColor: colors?.border?.default ?? "transparent",
+        outline: focusRingOutline(isFocusVisible),
+        outlineOffset: "-2px"
+      };
+    },
+    children: ({
+      allowsSorting,
+      sortDirection
+    }) => {
+      return /* @__PURE__ */jsxs("span", {
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: vars.spacing.gap.inline.sm
+        },
+        children: [children, allowsSorting && sortDirection && /* @__PURE__ */jsx(Icon, {
+          intent: sortDirection === "ascending" ? "action.sortAscending" : "action.sortDescending",
+          size: "sm"
+        })]
+      });
+    }
+  });
+};
+TableColumn.displayName = tableColumnMeta.displayName;
+/** The data row group. An internal frame part — place `TableRow`s inside. */
+var TableBody$1 = props => {
+  return /* @__PURE__ */jsx(TableBody, {
+    ...props,
+    "data-scope": "table",
+    "data-part": "body"
+  });
+};
+TableBody$1.displayName = "TableBody";
+/**
+* A single data row. Entity = Selection → reads `vars.colors.input.*` and
+* surfaces the `selected` State when the parent Table has a `selectionMode`.
+*/
+var TableRow = props => {
+  const c = vars.colors.input.primary;
+  return /* @__PURE__ */jsx(Row, {
+    ...props,
+    "data-scope": "table",
+    "data-part": "item",
+    style: ({
+      isSelected,
+      isHovered,
+      isFocusVisible,
+      isDisabled,
+      selectionMode
+    }) => {
+      return {
+        boxSizing: "border-box",
+        blockSize: vars.sizing.hit,
+        cursor: selectionMode === "none" ? void 0 : isDisabled ? "not-allowed" : "pointer",
+        opacity: isDisabled ? vars.opacity.disabled : void 0,
+        transitionProperty: "background-color, color",
+        transitionDuration: vars.motion.feedback.duration,
+        transitionTimingFunction: vars.motion.feedback.easing,
+        backgroundColor: resolveInteractiveStyle(c?.background, {
+          isDisabled,
+          isSelected,
+          isHovered: isHovered && selectionMode !== "none"
+        }),
+        color: resolveInteractiveStyle(c?.text, {
+          isDisabled,
+          isSelected
+        }),
+        outline: focusRingOutline(isFocusVisible),
+        outlineOffset: "-2px"
+      };
+    }
+  });
+};
+TableRow.displayName = tableRowMeta.displayName;
+/**
+* A data cell (Collection `content` role). Focusable during keyboard grid
+* navigation; typography and color inherit from the row.
+*/
+var TableCell = props => {
+  const colors = vars.colors.informational.muted;
+  return /* @__PURE__ */jsx(Cell, {
+    ...props,
+    "data-scope": "table",
+    "data-part": "content",
+    style: ({
+      isFocusVisible
+    }) => {
+      return {
+        boxSizing: "border-box",
+        paddingBlock: vars.spacing.inset.control.sm,
+        paddingInline: vars.spacing.inset.control.md,
+        ...vars.text.body.sm,
+        borderBlockEndWidth: vars.border.divider.width,
+        borderBlockEndStyle: vars.border.divider.style,
+        borderBlockEndColor: colors?.border?.default ?? "transparent",
+        outline: focusRingOutline(isFocusVisible),
+        outlineOffset: "-2px"
+      };
+    }
+  });
+};
+TableCell.displayName = tableCellMeta.displayName;
+
+//#endregion
+export { Table$1 as Table, TableBody$1 as TableBody, TableCell, TableColumn, TableHeader$1 as TableHeader, TableRow, tableCellMeta, tableColumnMeta, tableMeta, tableRowMeta };

package/dist/components/Tabs/Tabs.cjs

@@ -1,9 +1,12 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 const require_focusRing = require('../../tokens/focusRing.cjs');
 const require_resolveInteractiveStyle = require('../../tokens/resolveInteractiveStyle.cjs');
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_aria_components = require("react-aria-components");
+let react = require("react");
+react = require_runtime.__toESM(react);
 
 //#region src/components/Tabs/Tabs.tsx
 /** Formal semantic identity — Tabs root (Navigation entity). */
@@ -47,21 +50,30 @@ var tabPanelMeta = {
 * </Tabs>
 * ```
 */
+/**
+* Orientation reaches `Tab` through this context — RAC exposes it in
+* `TabList`'s render props but not in `Tab`'s, and the selected-tab
+* indicator must switch edges with the orientation (friction F-003).
+*/
+var TabsOrientationContext = react.createContext("horizontal");
 var Tabs = ({
   orientation = "horizontal",
   ...props
 }) => {
-  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Tabs, {
-    ...props,
-    orientation,
-    "data-scope": "tabs",
-    "data-part": "root",
-    style: {
-      boxSizing: "border-box",
-      display: "flex",
-      flexDirection: orientation === "vertical" ? "row" : "column",
-      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.sm
-    }
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(TabsOrientationContext.Provider, {
+    value: orientation,
+    children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Tabs, {
+      ...props,
+      orientation,
+      "data-scope": "tabs",
+      "data-part": "root",
+      style: {
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: orientation === "vertical" ? "row" : "column",
+        gap: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.sm
+      }
+    })
   });
 };
 Tabs.displayName = tabsMeta.displayName;
@@ -74,23 +86,62 @@ var TabList = props => {
     ...props,
     "data-scope": "tabs",
     "data-part": "control",
-    style: {
-      boxSizing: "border-box",
-      display: "flex",
-      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.inline.sm,
-      borderBlockEndWidth: _ttoss_fsl_theme_vars.vars.border.divider.width,
-      borderBlockEndStyle: _ttoss_fsl_theme_vars.vars.border.divider.style,
-      borderBlockEndColor: _ttoss_fsl_theme_vars.vars.colors.navigation.muted?.border?.default ?? "transparent"
+    style: ({
+      orientation
+    }) => {
+      const isVertical = orientation === "vertical";
+      return {
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: isVertical ? "column" : "row",
+        gap: isVertical ? _ttoss_fsl_theme_vars.vars.spacing.gap.stack.sm : _ttoss_fsl_theme_vars.vars.spacing.gap.inline.sm,
+        ...(isVertical ? {
+          borderInlineEndWidth: _ttoss_fsl_theme_vars.vars.border.divider.width,
+          borderInlineEndStyle: _ttoss_fsl_theme_vars.vars.border.divider.style,
+          borderInlineEndColor: _ttoss_fsl_theme_vars.vars.colors.navigation.muted?.border?.default ?? "transparent"
+        } : {
+          borderBlockEndWidth: _ttoss_fsl_theme_vars.vars.border.divider.width,
+          borderBlockEndStyle: _ttoss_fsl_theme_vars.vars.border.divider.style,
+          borderBlockEndColor: _ttoss_fsl_theme_vars.vars.colors.navigation.muted?.border?.default ?? "transparent"
+        })
+      };
     }
   });
 };
 TabList.displayName = tabListMeta.displayName;
 /**
+* Style for the decorative active-tab indicator line — block-end underline
+* when horizontal, inline-start bar when vertical (F-003).
+*/
+var tabIndicatorStyle = orientation => {
+  const color = _ttoss_fsl_theme_vars.vars.colors.navigation.primary?.border?.current ?? _ttoss_fsl_theme_vars.vars.colors.navigation.primary?.border?.default;
+  const style = _ttoss_fsl_theme_vars.vars.border.outline.control.style;
+  if (orientation === "vertical") return {
+    position: "absolute",
+    insetBlockStart: 0,
+    insetBlockEnd: 0,
+    insetInlineStart: 0,
+    borderInlineStartWidth: _ttoss_fsl_theme_vars.vars.border.outline.selected.width,
+    borderInlineStartStyle: style,
+    borderInlineStartColor: color
+  };
+  return {
+    position: "absolute",
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
+    insetBlockEnd: 0,
+    borderBlockEndWidth: _ttoss_fsl_theme_vars.vars.border.outline.selected.width,
+    borderBlockEndStyle: style,
+    borderBlockEndColor: color
+  };
+};
+/**
 * A single selectable tab. The selected tab reads the navigation `current`
 * color and shows an underline indicator; others use hover/default.
 */
 var Tab = props => {
   const colors = _ttoss_fsl_theme_vars.vars.colors.navigation.primary;
+  const orientation = react.useContext(TabsOrientationContext);
   return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Tab, {
     ...props,
     "data-scope": "tabs",
@@ -131,15 +182,7 @@ var Tab = props => {
           "data-scope": "tabs",
           "data-part": "indicator",
           "aria-hidden": true,
-          style: {
-            position: "absolute",
-            insetInlineStart: 0,
-            insetInlineEnd: 0,
-            insetBlockEnd: 0,
-            borderBlockEndWidth: _ttoss_fsl_theme_vars.vars.border.outline.selected.width,
-            borderBlockEndStyle: _ttoss_fsl_theme_vars.vars.border.outline.control.style,
-            borderBlockEndColor: _ttoss_fsl_theme_vars.vars.colors.navigation.primary?.border?.current ?? _ttoss_fsl_theme_vars.vars.colors.navigation.primary?.border?.default
-          }
+          style: tabIndicatorStyle(orientation)
         })]
       });
     }

package/dist/components/Tabs/Tabs.d.cts

@@ -28,23 +28,6 @@ declare const tabPanelMeta: {
 };
 /** Props for the Tabs root. */
 type TabsProps$1 = Omit<TabsProps, 'style'>;
-/**
- * A tabbed navigation widget (Navigation entity). Compose with `TabList` +
- * `Tab` for the switcher and `TabPanel` for each view. React Aria manages
- * selection, arrow-key navigation, and panel association.
- *
- * @example
- * ```tsx
- * <Tabs>
- *   <TabList aria-label="Sections">
- *     <Tab id="a">Overview</Tab>
- *     <Tab id="b">Details</Tab>
- *   </TabList>
- *   <TabPanel id="a">Overview content</TabPanel>
- *   <TabPanel id="b">Details content</TabPanel>
- * </Tabs>
- * ```
- */
 declare const Tabs: {
   ({
     orientation,

package/dist/components/Tabs/Tabs.d.mts

@@ -28,23 +28,6 @@ declare const tabPanelMeta: {
 };
 /** Props for the Tabs root. */
 type TabsProps$1 = Omit<TabsProps, 'style'>;
-/**
- * A tabbed navigation widget (Navigation entity). Compose with `TabList` +
- * `Tab` for the switcher and `TabPanel` for each view. React Aria manages
- * selection, arrow-key navigation, and panel association.
- *
- * @example
- * ```tsx
- * <Tabs>
- *   <TabList aria-label="Sections">
- *     <Tab id="a">Overview</Tab>
- *     <Tab id="b">Details</Tab>
- *   </TabList>
- *   <TabPanel id="a">Overview content</TabPanel>
- *   <TabPanel id="b">Details content</TabPanel>
- * </Tabs>
- * ```
- */
 declare const Tabs$1: {
   ({
     orientation,

package/dist/components/Tabs/Tabs.mjs

@@ -4,6 +4,7 @@ import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mj
 import { vars } from "@ttoss/fsl-theme/vars";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Tab, TabList, TabPanel, Tabs } from "react-aria-components";
+import * as React from "react";
 
 //#region src/components/Tabs/Tabs.tsx
 /** Formal semantic identity — Tabs root (Navigation entity). */
@@ -47,21 +48,30 @@ var tabPanelMeta = {
 * </Tabs>
 * ```
 */
+/**
+* Orientation reaches `Tab` through this context — RAC exposes it in
+* `TabList`'s render props but not in `Tab`'s, and the selected-tab
+* indicator must switch edges with the orientation (friction F-003).
+*/
+var TabsOrientationContext = React.createContext("horizontal");
 var Tabs$1 = ({
   orientation = "horizontal",
   ...props
 }) => {
-  return /* @__PURE__ */jsx(Tabs, {
-    ...props,
-    orientation,
-    "data-scope": "tabs",
-    "data-part": "root",
-    style: {
-      boxSizing: "border-box",
-      display: "flex",
-      flexDirection: orientation === "vertical" ? "row" : "column",
-      gap: vars.spacing.gap.stack.sm
-    }
+  return /* @__PURE__ */jsx(TabsOrientationContext.Provider, {
+    value: orientation,
+    children: /* @__PURE__ */jsx(Tabs, {
+      ...props,
+      orientation,
+      "data-scope": "tabs",
+      "data-part": "root",
+      style: {
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: orientation === "vertical" ? "row" : "column",
+        gap: vars.spacing.gap.stack.sm
+      }
+    })
   });
 };
 Tabs$1.displayName = tabsMeta.displayName;
@@ -74,23 +84,62 @@ var TabList$1 = props => {
     ...props,
     "data-scope": "tabs",
     "data-part": "control",
-    style: {
-      boxSizing: "border-box",
-      display: "flex",
-      gap: vars.spacing.gap.inline.sm,
-      borderBlockEndWidth: vars.border.divider.width,
-      borderBlockEndStyle: vars.border.divider.style,
-      borderBlockEndColor: vars.colors.navigation.muted?.border?.default ?? "transparent"
+    style: ({
+      orientation
+    }) => {
+      const isVertical = orientation === "vertical";
+      return {
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: isVertical ? "column" : "row",
+        gap: isVertical ? vars.spacing.gap.stack.sm : vars.spacing.gap.inline.sm,
+        ...(isVertical ? {
+          borderInlineEndWidth: vars.border.divider.width,
+          borderInlineEndStyle: vars.border.divider.style,
+          borderInlineEndColor: vars.colors.navigation.muted?.border?.default ?? "transparent"
+        } : {
+          borderBlockEndWidth: vars.border.divider.width,
+          borderBlockEndStyle: vars.border.divider.style,
+          borderBlockEndColor: vars.colors.navigation.muted?.border?.default ?? "transparent"
+        })
+      };
     }
   });
 };
 TabList$1.displayName = tabListMeta.displayName;
 /**
+* Style for the decorative active-tab indicator line — block-end underline
+* when horizontal, inline-start bar when vertical (F-003).
+*/
+var tabIndicatorStyle = orientation => {
+  const color = vars.colors.navigation.primary?.border?.current ?? vars.colors.navigation.primary?.border?.default;
+  const style = vars.border.outline.control.style;
+  if (orientation === "vertical") return {
+    position: "absolute",
+    insetBlockStart: 0,
+    insetBlockEnd: 0,
+    insetInlineStart: 0,
+    borderInlineStartWidth: vars.border.outline.selected.width,
+    borderInlineStartStyle: style,
+    borderInlineStartColor: color
+  };
+  return {
+    position: "absolute",
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
+    insetBlockEnd: 0,
+    borderBlockEndWidth: vars.border.outline.selected.width,
+    borderBlockEndStyle: style,
+    borderBlockEndColor: color
+  };
+};
+/**
 * A single selectable tab. The selected tab reads the navigation `current`
 * color and shows an underline indicator; others use hover/default.
 */
 var Tab$1 = props => {
   const colors = vars.colors.navigation.primary;
+  const orientation = React.useContext(TabsOrientationContext);
   return /* @__PURE__ */jsx(Tab, {
     ...props,
     "data-scope": "tabs",
@@ -131,15 +180,7 @@ var Tab$1 = props => {
           "data-scope": "tabs",
           "data-part": "indicator",
           "aria-hidden": true,
-          style: {
-            position: "absolute",
-            insetInlineStart: 0,
-            insetInlineEnd: 0,
-            insetBlockEnd: 0,
-            borderBlockEndWidth: vars.border.outline.selected.width,
-            borderBlockEndStyle: vars.border.outline.control.style,
-            borderBlockEndColor: vars.colors.navigation.primary?.border?.current ?? vars.colors.navigation.primary?.border?.default
-          }
+          style: tabIndicatorStyle(orientation)
         })]
       });
     }

package/dist/components/Text/Text.cjs

@@ -11,6 +11,7 @@ var textMeta = {
 };
 /** Typography token per variant — the scale reaches the DOM only here. */
 var TYPE_BY_VARIANT = {
+  "display-sm": _ttoss_fsl_theme_vars.vars.text.display.sm,
   "body-lg": _ttoss_fsl_theme_vars.vars.text.body.lg,
   "body-md": _ttoss_fsl_theme_vars.vars.text.body.md,
   "body-sm": _ttoss_fsl_theme_vars.vars.text.body.sm,

package/dist/components/Text/Text.d.cts

@@ -8,8 +8,13 @@ declare const textMeta: {
   readonly entity: "Structure";
   readonly structure: "root";
 };
-/** A step of the body/label type scale (`{family}-{step}`). */
-type TextVariant = 'body-lg' | 'body-md' | 'body-sm' | 'label-lg' | 'label-md' | 'label-sm';
+/**
+ * A step of the body/label type scale (`{family}-{step}`). `display-sm` is
+ * the stat step: display-scale figures that are *data*, not document
+ * headings (KPI values, prices) — admitted on the Dashboard/Pricing blocks'
+ * evidence (friction F-014).
+ */
+type TextVariant = 'display-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'label-lg' | 'label-md' | 'label-sm';
 /** The tone of the text colour — default inherits; `muted` recedes. */
 type TextTone = 'default' | 'muted';
 /** Inline text alignment. */

package/dist/components/Text/Text.d.mts

@@ -8,8 +8,13 @@ declare const textMeta: {
   readonly entity: "Structure";
   readonly structure: "root";
 };
-/** A step of the body/label type scale (`{family}-{step}`). */
-type TextVariant = 'body-lg' | 'body-md' | 'body-sm' | 'label-lg' | 'label-md' | 'label-sm';
+/**
+ * A step of the body/label type scale (`{family}-{step}`). `display-sm` is
+ * the stat step: display-scale figures that are *data*, not document
+ * headings (KPI values, prices) — admitted on the Dashboard/Pricing blocks'
+ * evidence (friction F-014).
+ */
+type TextVariant = 'display-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'label-lg' | 'label-md' | 'label-sm';
 /** The tone of the text colour — default inherits; `muted` recedes. */
 type TextTone = 'default' | 'muted';
 /** Inline text alignment. */

package/dist/components/Text/Text.mjs

@@ -11,6 +11,7 @@ var textMeta = {
 };
 /** Typography token per variant — the scale reaches the DOM only here. */
 var TYPE_BY_VARIANT = {
+  "display-sm": vars.text.display.sm,
   "body-lg": vars.text.body.lg,
   "body-md": vars.text.body.md,
   "body-sm": vars.text.body.sm,

package/dist/index.cjs

@@ -9,6 +9,8 @@ const require_Badge = require('./components/Badge/Badge.cjs');
 const require_Box = require('./components/Box/Box.cjs');
 const require_Breadcrumbs = require('./components/Breadcrumbs/Breadcrumbs.cjs');
 const require_Button = require('./components/Button/Button.cjs');
+const require_Icon = require('./components/Icon/Icon.cjs');
+const require_intents = require('./components/Icon/intents.cjs');
 const require_Checkbox = require('./components/Checkbox/Checkbox.cjs');
 const require_CheckboxGroup = require('./components/CheckboxGroup/CheckboxGroup.cjs');
 const require_Code = require('./components/Code/Code.cjs');
@@ -30,6 +32,7 @@ const require_Slider = require('./components/Slider/Slider.cjs');
 const require_Stack = require('./components/Stack/Stack.cjs');
 const require_Surface = require('./components/Surface/Surface.cjs');
 const require_Switch = require('./components/Switch/Switch.cjs');
+const require_Table = require('./components/Table/Table.cjs');
 const require_Tabs = require('./components/Tabs/Tabs.cjs');
 const require_Text = require('./components/Text/Text.cjs');
 const require_Toast = require('./components/Toast/Toast.cjs');
@@ -82,6 +85,8 @@ exports.GridList = require_GridList.GridList;
 exports.GridListItem = require_GridList.GridListItem;
 exports.Group = require_Group.Group;
 exports.Heading = require_Heading.Heading;
+exports.ICON_INTENTS = require_intents.ICON_INTENTS;
+exports.Icon = require_Icon.Icon;
 exports.Link = require_Link.Link;
 exports.ListBox = require_ListBox.ListBox;
 exports.ListBoxItem = require_ListBox.ListBoxItem;
@@ -108,6 +113,12 @@ exports.Switch = require_Switch.Switch;
 exports.Tab = require_Tabs.Tab;
 exports.TabList = require_Tabs.TabList;
 exports.TabPanel = require_Tabs.TabPanel;
+exports.Table = require_Table.Table;
+exports.TableBody = require_Table.TableBody;
+exports.TableCell = require_Table.TableCell;
+exports.TableColumn = require_Table.TableColumn;
+exports.TableHeader = require_Table.TableHeader;
+exports.TableRow = require_Table.TableRow;
 exports.Tabs = require_Tabs.Tabs;
 exports.Tag = require_TagGroup.Tag;
 exports.TagGroup = require_TagGroup.TagGroup;
@@ -166,6 +177,7 @@ exports.gridListMeta = require_GridList.gridListMeta;
 exports.gridMeta = require_Grid.gridMeta;
 exports.groupMeta = require_Group.groupMeta;
 exports.headingMeta = require_Heading.headingMeta;
+exports.iconMeta = require_Icon.iconMeta;
 exports.linkMeta = require_Link.linkMeta;
 exports.listBoxItemMeta = require_ListBox.listBoxItemMeta;
 exports.listBoxMeta = require_ListBox.listBoxMeta;
@@ -190,6 +202,10 @@ exports.switchMeta = require_Switch.switchMeta;
 exports.tabListMeta = require_Tabs.tabListMeta;
 exports.tabMeta = require_Tabs.tabMeta;
 exports.tabPanelMeta = require_Tabs.tabPanelMeta;
+exports.tableCellMeta = require_Table.tableCellMeta;
+exports.tableColumnMeta = require_Table.tableColumnMeta;
+exports.tableMeta = require_Table.tableMeta;
+exports.tableRowMeta = require_Table.tableRowMeta;
 exports.tabsMeta = require_Tabs.tabsMeta;
 exports.tagGroupMeta = require_TagGroup.tagGroupMeta;
 exports.tagMeta = require_TagGroup.tagMeta;