ionbase-ui 0.76.0 → 0.81.1

package/dist/styles/confidence-indicator.css

@@ -1,8 +1,8 @@
 /*
  * ConfidenceIndicator
  *
- * NOT DRAWN IN FIGMA. Three bars and a line of text; the colours are the
- * system's status roles.
+ * Drawn in Figma as `Confidence Indicator` (1166:262), by Level. Three bars and
+ * a line of text; the colours are the system's status roles.
  *
  * THE BARS ARE THE SECOND SIGNAL, NOT THE FIRST. The count of filled bars
  * carries the level, so it reads in greyscale and in forced-colours mode; the

package/dist/styles/index.css

@@ -90,9 +90,14 @@
  */
 @import url('./date-picker.css');
 @import url('./date-range-picker.css');
+@import url('./time-field.css');
 @import url('./stat-tile.css');
 @import url('./setting-row.css');
 @import url('./chart.css');
+@import url('./card.css');
+@import url('./tag-group.css');
+@import url('./kbd.css');
+@import url('./command-palette.css');
 
 /*
  * Visually hidden, but not hidden from assistive tech.

package/dist/styles/kbd.css

@@ -0,0 +1,47 @@
+/*
+ * Kbd
+ *
+ * Drawn in Figma as `Kbd` on the Command Palette page.
+ *
+ *   key      20 tall, at least 20 wide, 4 across; radius/xs
+ *   colour   surface/subtle key, border/default rule, text/secondary glyph
+ *   type     caption, medium — a key is read at a glance, not studied
+ *
+ * A shortcut is a group of keys 2 apart, never "⌘+K" with a printed plus:
+ * the keys are what the reader looks for on the keyboard, and the plus is not
+ * one of them.
+ *
+ * The key carries its own background, so the contrast gate measures the glyph
+ * against the key rather than whatever it sits on — a menu row, a hover.
+ */
+.ion-kbd-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  font: inherit;
+}
+
+.ion-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--spacing-20);
+  height: var(--spacing-20);
+  padding-inline: calc(var(--spacing-4) - var(--border-width-default));
+  border: var(--border-width-default) solid var(--border-default);
+  border-radius: var(--radius-xs);
+  background-color: var(--surface-subtle);
+  color: var(--text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-caption);
+  line-height: var(--type-caption-line-height);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+}
+
+/* Forced colours drop the fill; the rule is what keeps each key a key. */
+@media (forced-colors: active) {
+  .ion-kbd {
+    border-color: CanvasText;
+  }
+}

package/dist/styles/streaming-text.css

@@ -1,8 +1,9 @@
 /*
  * StreamingText
  *
- * NOT DRAWN IN FIGMA. Type and rhythm come from the body tokens, so this is
- * ordinary prose that happens to be arriving late.
+ * Drawn in Figma as `Streaming Text` (1164:248), with a Streaming axis for the
+ * cursor. Type and rhythm come from the body tokens, so this is ordinary prose
+ * that happens to be arriving late.
  */
 .ion-streaming-text {
   color: var(--text-default);

package/dist/styles/table.css

@@ -187,6 +187,57 @@
   color: var(--icon-secondary);
 }
 
+/*
+ * Sortable headers — `sortDirection` on a header TableCell, Figma's
+ * `Table Sort Indicator` in the Cell Text trailing slot.
+ *
+ * The label is a real button inside the <th>, reset to read as header text:
+ * same weight, same `text/secondary`, no chrome. It darkens to `text/default`
+ * on hover and when it is the sorted column, so the current sort reads from
+ * the label as well as the arrow. The unsorted indicator stays
+ * `icon/tertiary`: present enough to say "this sorts", quiet enough that a
+ * row of them is not noise.
+ */
+.ion-table__sort {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+
+  /* The arrow beside a two-line label reads as belonging to one line of it.
+     The table scrolls sideways before it squeezes a header this far. */
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color var(--ion-duration-base) var(--ion-ease-out);
+}
+
+@media (hover: hover) {
+  .ion-table__sort:hover {
+    color: var(--text-default);
+  }
+}
+
+.ion-table__sort:focus-visible {
+  outline: var(--border-width-thick) solid var(--ring-focus);
+  outline-offset: 2px;
+}
+
+.ion-table__sort--active {
+  color: var(--text-default);
+}
+
+.ion-table th .ion-table__sort-icon {
+  color: var(--icon-tertiary);
+}
+
+.ion-table th .ion-table__sort--active .ion-table__sort-icon {
+  color: var(--icon-default);
+}
+
 /* Link cells — Figma's `Type=Link`. */
 .ion-table__cell-content--link {
   color: var(--text-link);

package/dist/styles/tag-group.css

@@ -0,0 +1,172 @@
+/*
+ * TagGroup, Tag
+ *
+ * Drawn in Figma as `Tag` and `Tag Group` on the Tag page.
+ *
+ *   tag            surface/subtle fill, border/subtle rule, text/default label
+ *   label inset    8 (sm) / 12 (md) from the tag's edge, 4 / 6 to the button
+ *   height         pinned — spacing/24 (sm), spacing/32 (md) — the way Badge
+ *                  pins its ramp, so padding never nudges it off by a pixel
+ *   radius         radius/sm at sm, radius/md at md
+ *   remove button  16 / 20 square, icon/secondary, surface/hover under the
+ *                  pointer, its own focus ring
+ *
+ * NEUTRAL ON PURPOSE
+ *
+ * No intent colours. A tag is a choice someone made, not a state the system
+ * reports; a red "Status: Failing" filter would read as the agent failing.
+ * That is Badge's job, and Badge is not removable.
+ *
+ * The tag carries its own background, so the contrast gate measures the label
+ * against the tag rather than whatever the group sits on.
+ */
+.ion-tag-group {
+  display: grid;
+  gap: var(--spacing-6);
+  min-width: 0;
+  font-family: var(--font-family-sans);
+}
+
+.ion-tag-group__label {
+  color: var(--text-secondary);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+  font-weight: var(--font-weight-medium);
+}
+
+.ion-tag-group__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-6);
+  min-width: 0;
+}
+
+.ion-tag-group__list:focus-visible {
+  outline: var(--border-width-thick) solid var(--ring-focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+
+.ion-tag-group__empty,
+.ion-tag-group__description {
+  margin: 0;
+  color: var(--text-tertiary);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+}
+
+.ion-tag {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  height: var(--spacing-24);
+  padding-inline: calc(var(--spacing-8) - var(--border-width-default));
+  border: var(--border-width-default) solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  background-color: var(--surface-subtle);
+  color: var(--text-default);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+  outline: none;
+  cursor: default;
+}
+
+/* The remove button sits closer to the edge than the label does. */
+.ion-tag--removable {
+  padding-inline-end: calc(var(--spacing-4) - var(--border-width-default));
+}
+
+.ion-tag-group--md .ion-tag {
+  height: var(--spacing-32);
+  padding-inline: calc(var(--spacing-12) - var(--border-width-default));
+  border-radius: var(--radius-md);
+  font-size: var(--type-body);
+  line-height: var(--type-body-line-height);
+}
+
+.ion-tag-group--md .ion-tag--removable {
+  padding-inline-end: calc(var(--spacing-6) - var(--border-width-default));
+}
+
+.ion-tag[data-focus-visible='true'] {
+  outline: var(--border-width-thick) solid var(--ring-focus);
+  outline-offset: 2px;
+}
+
+.ion-tag--disabled {
+  border-color: var(--border-disabled);
+  background-color: var(--surface-disabled);
+  color: var(--text-disabled);
+}
+
+.ion-tag__cell {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  min-width: 0;
+}
+
+/* A long label ends in an ellipsis rather than stretching the row. */
+.ion-tag__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ion-tag__remove {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--spacing-16);
+  height: var(--spacing-16);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: none;
+  color: var(--icon-secondary);
+  cursor: pointer;
+  transition:
+    background-color var(--ion-duration-base) var(--ion-ease-out),
+    color var(--ion-duration-base) var(--ion-ease-out);
+}
+
+/* Figma's Label Slot pads 4 / 6 on each side, which is the gap to the button. */
+.ion-tag-group--md .ion-tag__cell {
+  gap: var(--spacing-6);
+}
+
+.ion-tag-group--md .ion-tag__remove {
+  width: var(--spacing-20);
+  height: var(--spacing-20);
+}
+
+.ion-tag__remove svg {
+  width: var(--icon-size-2xs);
+  height: var(--icon-size-2xs);
+}
+
+@media (hover: hover) {
+  .ion-tag__remove:hover {
+    background-color: var(--surface-hover);
+    color: var(--icon-default);
+  }
+}
+
+.ion-tag__remove[data-focus-visible='true'] {
+  outline: var(--border-width-thick) solid var(--ring-focus);
+  outline-offset: 1px;
+}
+
+.ion-tag--disabled .ion-tag__remove {
+  color: var(--icon-disabled);
+  cursor: default;
+}
+
+/* Forced colours drop the fill; the rule keeps each tag a separate shape. */
+@media (forced-colors: active) {
+  .ion-tag {
+    border-color: CanvasText;
+  }
+}

package/dist/styles/time-field.css

@@ -0,0 +1,31 @@
+/*
+ * TimeField
+ *
+ * Drawn in Figma as `Time Field` on the Date Picker page: the Input box with
+ * a leading clock icon and hour, minute and period segments.
+ *
+ * Everything but the box's cursor comes from elsewhere, on purpose:
+ *
+ *   the box        `.ion-input` and its size and state modifiers — the same
+ *                  box DatePicker and Combobox reuse
+ *   the segments   `.ion-date-field` in date-picker.css, which is imported
+ *                  before this file; a time segment is a date segment
+ *   the clock      `.ion-input__icon-start`, decorative, icon/tertiary
+ *
+ * A second copy of the segment rules would drift from DatePicker's the first
+ * time either changed, and the two fields sit side by side in every schedule
+ * form.
+ */
+.ion-time-field {
+  cursor: text;
+}
+
+/*
+ * Digits sit against the separator, not centred in their reserved width.
+ * A 12-hour clock shows "9", not "09", in a segment wide enough for "12", so
+ * centring read as "9 :00 AM". Right-aligned, the spare width falls beside
+ * the clock icon, where it looks like padding rather than a typo.
+ */
+.ion-time-field .ion-date-field__segment {
+  text-align: end;
+}

package/llms.txt

@@ -2,7 +2,7 @@
 
 > IonBase is a React design system for enterprise SaaS, built to be consumed by an agent rather than read by a developer. Every component ships a machine-readable contract carrying the judgement a type signature cannot: when to use it, what to use instead, the anti-patterns, and what it guarantees for accessibility versus what it requires of you.
 
-Version 0.76.0. 75 components.
+Version 0.81.1. 81 components.
 
 ## Read these, in this order
 
@@ -13,7 +13,7 @@ Both are importable: `ionbase-ui/meta/index` and `ionbase-ui/meta/<Name>.json`.
 
 ## Components
 
-`Accordion`, `AccordionItem`, `AgentActivity`, `AgentActivityStep`, `AgentStop`, `Alert`, `ApprovalGate`, `Avatar`, `AvatarGradient`, `AvatarGroup`, `Badge`, `Breadcrumb`, `BreadcrumbItem`, `Button`, `ChartLegend`, `ChartTooltip`, `Checkbox`, `Citation`, `CitationList`, `CitationListItem`, `Combobox`, `ConfidenceIndicator`, `DatePicker`, `DateRangePicker`, `Divider`, `Drawer`, `EmptyState`, `FileUpload`, `FullCard`, `Header`, `Icon`, `Input`, `Link`, `Logo`, `LogoMark`, `Menu`, `MenuItem`, `Modal`, `NavItem`, `NumberInput`, `Pagination`, `PhoneInput`, `Popover`, `ProgressBar`, `PromptInput`, `Radio`, `RadioGroup`, `ScrollProgress`, `SegmentedControl`, `SegmentedControlItem`, `Select`, `SettingRow`, `Sidebar`, `SidebarItem`, `SidebarSection`, `Skeleton`, `Spinner`, `StatGroup`, `StatTile`, `Stepper`, `StepperStep`, `StreamingText`, `TabItem`, `Table`, `TableBody`, `TableCell`, `TableHead`, `TableRow`, `Tabs`, `Textarea`, `Toast`, `ToastProvider`, `Toggle`, `ToolCall`, `Tooltip`
+`Accordion`, `AccordionItem`, `AgentActivity`, `AgentActivityStep`, `AgentStop`, `Alert`, `ApprovalGate`, `Avatar`, `AvatarGradient`, `AvatarGroup`, `Badge`, `Breadcrumb`, `BreadcrumbItem`, `Button`, `Card`, `ChartLegend`, `ChartTooltip`, `Checkbox`, `Citation`, `CitationList`, `CitationListItem`, `Combobox`, `CommandPalette`, `ConfidenceIndicator`, `DatePicker`, `DateRangePicker`, `Divider`, `Drawer`, `EmptyState`, `FileUpload`, `FullCard`, `Header`, `Icon`, `Input`, `Kbd`, `Link`, `Logo`, `LogoMark`, `Menu`, `MenuItem`, `Modal`, `NavItem`, `NumberInput`, `Pagination`, `PhoneInput`, `Popover`, `ProgressBar`, `PromptInput`, `Radio`, `RadioGroup`, `ScrollProgress`, `SegmentedControl`, `SegmentedControlItem`, `Select`, `SettingRow`, `Sidebar`, `SidebarItem`, `SidebarSection`, `Skeleton`, `Spinner`, `StatGroup`, `StatTile`, `Stepper`, `StepperStep`, `StreamingText`, `TabItem`, `Table`, `TableBody`, `TableCell`, `TableHead`, `TableRow`, `Tabs`, `Tag`, `TagGroup`, `Textarea`, `TimeField`, `Toast`, `ToastProvider`, `Toggle`, `ToolCall`, `Tooltip`
 
 ## Patterns
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionbase-ui",
-  "version": "0.76.0",
+  "version": "0.81.1",
   "description": "IonBase Design System — accessible React components, styles and design tokens in one package",
   "license": "MIT",
   "type": "module",