ionbase-ui 0.48.0 → 0.59.0

package/dist/meta/index.json

@@ -1,11 +1,25 @@
 {
   "package": "ionbase-ui",
-  "version": "0.48.0",
+  "version": "0.59.0",
   "usage": "Pick a component here, then read dist/meta/<Name>.json for its full contract.",
   "hooks": [
     "useToast"
   ],
   "components": {
+    "Accordion": {
+      "summary": "Sections that collapse, with the document's heading structure intact. Holds the open set and the heading level.",
+      "status": "stable",
+      "variants": {},
+      "detail": "dist/meta/Accordion.json",
+      "hasIntent": true
+    },
+    "AccordionItem": {
+      "summary": "One collapsible section: an always-visible title that toggles a region beneath it.",
+      "status": "stable",
+      "variants": {},
+      "detail": "dist/meta/AccordionItem.json",
+      "hasIntent": true
+    },
     "AgentActivity": {
       "summary": "An ordered, plain-language log of what the agent is doing. Status is text and shape, never colour alone.",
       "status": "stable",
@@ -184,6 +198,20 @@
       "detail": "dist/meta/Badge.json",
       "hasIntent": true
     },
+    "Breadcrumb": {
+      "summary": "Where this page sits in the hierarchy, and how to get back up. An ordered list inside a named landmark.",
+      "status": "stable",
+      "variants": {},
+      "detail": "dist/meta/Breadcrumb.json",
+      "hasIntent": true
+    },
+    "BreadcrumbItem": {
+      "summary": "One crumb. A link to an ancestor, or the current page rendered as text.",
+      "status": "stable",
+      "variants": {},
+      "detail": "dist/meta/BreadcrumbItem.json",
+      "hasIntent": true
+    },
     "Button": {
       "summary": "Triggers an action in place. Never navigates.",
       "status": "stable",
@@ -246,6 +274,24 @@
       "detail": "dist/meta/CitationListItem.json",
       "hasIntent": true
     },
+    "Combobox": {
+      "summary": "A text field that filters a list of options down to one selected value.",
+      "status": "stable",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "menuTrigger": [
+          "focus",
+          "input",
+          "manual"
+        ]
+      },
+      "detail": "dist/meta/Combobox.json",
+      "hasIntent": true
+    },
     "ConfidenceIndicator": {
       "summary": "How much to trust the thing next to it — three levels with a required basis, never a percentage.",
       "status": "stable",
@@ -271,6 +317,25 @@
       "detail": "dist/meta/Divider.json",
       "hasIntent": true
     },
+    "Drawer": {
+      "summary": "A modal panel anchored to an edge. Modal behaviour — focus trap, Escape, scrim — with the shape of a side panel.",
+      "status": "stable",
+      "variants": {
+        "placement": [
+          "start",
+          "end",
+          "top",
+          "bottom"
+        ],
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
+      "detail": "dist/meta/Drawer.json",
+      "hasIntent": true
+    },
     "EmptyState": {
       "summary": "The state a region shows when it has nothing to show, and why — first run, no results, no access, or a failed fetch.",
       "status": "stable",
@@ -290,6 +355,18 @@
       "detail": "dist/meta/EmptyState.json",
       "hasIntent": true
     },
+    "FileUpload": {
+      "summary": "A drop target wrapped around a real file input, with client-side accept and size checks.",
+      "status": "stable",
+      "variants": {
+        "size": [
+          "sm",
+          "md"
+        ]
+      },
+      "detail": "dist/meta/FileUpload.json",
+      "hasIntent": true
+    },
     "FullCard": {
       "summary": "A full-bleed row: a text column beside a framed media panel, mirrored by `alignment`.",
       "status": "stable",
@@ -459,10 +536,10 @@
       "status": "stable",
       "variants": {
         "placement": [
-          "right",
-          "left",
           "top",
-          "bottom"
+          "bottom",
+          "right",
+          "left"
         ],
         "size": [
           "sm",
@@ -473,6 +550,24 @@
       "detail": "dist/meta/Popover.json",
       "hasIntent": true
     },
+    "ProgressBar": {
+      "summary": "A determinate or indeterminate measure of work, with the name of the work attached. Omitting `value` is what makes it indeterminate.",
+      "status": "stable",
+      "variants": {
+        "intent": [
+          "primary",
+          "success",
+          "warning",
+          "error"
+        ],
+        "size": [
+          "sm",
+          "md"
+        ]
+      },
+      "detail": "dist/meta/ProgressBar.json",
+      "hasIntent": true
+    },
     "Radio": {
       "summary": "One option inside a RadioGroup. Meaningless on its own — the group owns the name and the selected value.",
       "status": "stable",
@@ -529,6 +624,32 @@
       "detail": "dist/meta/Select.json",
       "hasIntent": true
     },
+    "Skeleton": {
+      "summary": "The shape of content that has not arrived. Always hidden from assistive technology — the caller owns the announcement.",
+      "status": "stable",
+      "variants": {
+        "variant": [
+          "circle",
+          "text",
+          "rect"
+        ]
+      },
+      "detail": "dist/meta/Skeleton.json",
+      "hasIntent": true
+    },
+    "Spinner": {
+      "summary": "An indeterminate wait, announced once. A ring plus a politely-announced label, sized off the icon ramp.",
+      "status": "stable",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
+      "detail": "dist/meta/Spinner.json",
+      "hasIntent": true
+    },
     "StreamingText": {
       "summary": "Model output arriving a token at a time, in a container that does not move. Deliberately not a live region.",
       "status": "stable",
@@ -621,6 +742,27 @@
       "detail": "dist/meta/Tabs.json",
       "hasIntent": true
     },
+    "Textarea": {
+      "summary": "A multi-line text field. Every size and state is Input's; it wraps and it resizes vertically.",
+      "status": "stable",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "autoCapitalize": [
+          "none",
+          "off",
+          "on",
+          "sentences",
+          "words",
+          "characters"
+        ]
+      },
+      "detail": "dist/meta/Textarea.json",
+      "hasIntent": true
+    },
     "Toast": {
       "summary": "A transient notification on neutral chrome. Intent is carried by the icon, not by a tinted panel.",
       "status": "stable",
@@ -674,10 +816,10 @@
       "status": "stable",
       "variants": {
         "placement": [
-          "right",
-          "left",
           "top",
-          "bottom"
+          "bottom",
+          "right",
+          "left"
         ]
       },
       "detail": "dist/meta/Tooltip.json",

package/dist/meta/patterns/index.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.48.0",
+  "version": "0.59.0",
   "usage": "A pattern is a documented composition of components, not a component. Read one here, then read the contracts of what it composes.",
   "patterns": {
     "AgentRun": {

package/dist/styles/accordion.css

@@ -0,0 +1,102 @@
+/*
+ * Accordion
+ *
+ * Drawn in Figma as `Accordion` (1360:267) and `Accordion Item` (1360:266),
+ * from this file rather than the reverse — so the code is the source when the
+ * two disagree.
+ *
+ * Figma's Accordion Item carries a Collapsed/Expanded axis that the React
+ * component does NOT own: the open set lives on the container, because a static
+ * frame cannot hold a selection. The axis is drawn on the item because that is
+ * where the difference is visible, and owned in code where it is decidable.
+ *
+ * The trigger fills its heading so the whole row is the hit target. A button
+ * that only covers its text makes a wide section header mostly dead space.
+ */
+.ion-accordion {
+  font-family: var(--font-family-sans);
+  border-top: var(--border-width-default) solid var(--border-subtle);
+}
+
+.ion-accordion__item {
+  border-bottom: var(--border-width-default) solid var(--border-subtle);
+}
+
+.ion-accordion__heading {
+  margin: 0;
+
+  /* The heading carries structure, not size: the visible scale belongs to the
+   * trigger, so changing headingLevel for document reasons does not resize the
+   * control. */
+  font: inherit;
+}
+
+.ion-accordion__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-12);
+  width: 100%;
+  padding: var(--spacing-16) var(--spacing-4);
+  border: 0;
+  background: none;
+  color: var(--text-default);
+  font-family: inherit;
+  font-size: var(--type-body);
+  line-height: var(--type-body-line-height);
+  font-weight: var(--font-weight-medium);
+  text-align: start;
+  cursor: pointer;
+}
+
+/* Focus and disabled before :hover, so specificity reads non-decreasing — the
+ * same ordering approval-gate.css documents and stylelint enforces. */
+.ion-accordion__trigger:focus-visible {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: -2px;
+  border-radius: var(--radius-xs);
+}
+
+.ion-accordion__trigger:disabled {
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+.ion-accordion__trigger:hover:not(:disabled) {
+  color: var(--text-primary);
+}
+
+.ion-accordion__indicator {
+  display: inline-flex;
+  flex: none;
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  color: var(--icon-secondary);
+  transition: transform var(--ion-duration-base) var(--ion-ease-out);
+}
+
+.ion-accordion__indicator svg {
+  width: 100%;
+  height: 100%;
+}
+
+.ion-accordion__item[data-expanded] .ion-accordion__indicator {
+  transform: rotate(180deg);
+}
+
+.ion-accordion__trigger:disabled .ion-accordion__indicator {
+  color: var(--icon-disabled);
+}
+
+.ion-accordion__content {
+  padding: 0 var(--spacing-4) var(--spacing-16);
+  color: var(--text-secondary);
+  font-size: var(--type-body);
+  line-height: var(--type-body-line-height);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ion-accordion__indicator {
+    transition-duration: 1ms;
+  }
+}

package/dist/styles/breadcrumb.css

@@ -0,0 +1,72 @@
+/*
+ * Breadcrumb
+ *
+ * Drawn in Figma as `Breadcrumb` (1359:252) and `Breadcrumb Item` (1359:251) —
+ * FROM this file, not the other way round. Every other stylesheet here says
+ * "measured from Figma" because Figma came first; here the code did, and the
+ * drawing was made to match it. Worth stating, because the direction decides
+ * which side wins the next time the two disagree: this one.
+ *
+ * The separator is a CSS ::before on every item after the first. Drawing it in
+ * markup is the usual version of this component and the usual defect: a "/"
+ * character in the DOM is announced as punctuation between every crumb.
+ */
+.ion-breadcrumb {
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+}
+
+.ion-breadcrumb__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-8);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ion-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  min-width: 0;
+}
+
+.ion-breadcrumb__item + .ion-breadcrumb__item::before {
+  content: '/';
+  color: var(--text-tertiary);
+}
+
+.ion-breadcrumb__link {
+  color: var(--text-secondary);
+  text-decoration: none;
+  border-radius: var(--radius-xs);
+}
+
+.ion-breadcrumb__link:hover {
+  color: var(--text-default);
+  text-decoration: underline;
+}
+
+.ion-breadcrumb__link:focus-visible {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: 2px;
+}
+
+/*
+ * The current page is the one crumb a user is most likely to be looking for,
+ * so it carries the stronger colour — the trail above it is navigation, and
+ * this is the position.
+ */
+.ion-breadcrumb__current {
+  color: var(--text-default);
+  font-weight: var(--font-weight-medium);
+
+  /* A long record title truncates rather than wrapping the trail onto three
+   * lines; the full value stays reachable through the element's own text. */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/styles/combobox.css

@@ -0,0 +1,154 @@
+/*
+ * Combobox
+ *
+ * Drawn in Figma as `Combobox` (1370:2359) and `Combobox Menu` (1372:262), from
+ * this file. The field is `Input`'s box unchanged — Combobox carries
+ * `.ion-input` alongside `.ion-combobox` rather than restating a border, a
+ * radius and three states that would then drift from the real thing. Only the
+ * disclosure button is new here. The menu borrows `Menu`'s row metrics.
+ *
+ * The two are one control in code and two components in Figma, because a frame
+ * cannot both hug a field and overlay a list on top of it. `Combobox Menu` is
+ * recorded in mapping.json's `unmapped` for exactly that reason: there is no
+ * React export behind it, and there should not be — a listbox with no combobox
+ * to own it is not a thing a caller should be able to mount.
+ *
+ * THE MENU IS ITS OWN BLOCK, `.ion-combobox-menu`
+ *
+ * Not `.ion-combobox__popover`. The contrast gate resolves a translucent
+ * colour's backdrop from the BLOCK's background, and `.ion-combobox` has no
+ * background of its own — it inherits Input's. An option's `surface/hover`
+ * would then have had no resolvable ground and come back *skipped*: not
+ * failing, not passing, unmeasured. Drawer shipped that exact bug in 0.57.0 and
+ * only a count in a summary line caught it.
+ */
+.ion-combobox__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--icon-secondary);
+  cursor: pointer;
+}
+
+.ion-combobox__button svg {
+  width: var(--ion-input-icon-size);
+  height: var(--ion-input-icon-size);
+  transition: transform var(--ion-duration-base) var(--ion-ease-out);
+}
+
+/* The caret follows the list. A static caret beside an open menu is a lie. */
+.ion-combobox[data-open='true'] .ion-combobox__button svg {
+  transform: rotate(180deg);
+}
+
+.ion-combobox[data-disabled='true'] .ion-combobox__button {
+  color: var(--icon-disabled);
+  cursor: not-allowed;
+}
+
+/*
+ * NO UNDERLAY, deliberately.
+ *
+ * Modal and Popover render one. A non-modal popover must not: `usePopover`
+ * already listens for outside interaction on the document, so the underlay adds
+ * nothing, and a fixed full-viewport element over the page swallows the first
+ * click on whatever is behind it. The page stays fully interactive while the
+ * list is open, which is the whole difference between this and a dialog.
+ */
+.ion-combobox-menu {
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-4);
+  background-color: var(--surface-raised);
+  border: var(--border-width-default) solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  box-shadow: var(--ion-shadow-shadow-lg);
+}
+
+/*
+ * Capped, and the cap is the whole reason the list scrolls rather than the
+ * page. `usePopover` also passes a maxHeight in the inline style when the
+ * viewport is tighter than this; the smaller of the two wins, which is correct
+ * either way.
+ */
+.ion-combobox-menu__list {
+  max-height: 16rem;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.ion-combobox-menu__list:focus {
+  outline: none;
+}
+
+.ion-combobox-menu__option {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding: var(--spacing-6) var(--spacing-8);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.ion-combobox-menu__label {
+  color: var(--text-default);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body);
+  line-height: var(--type-body-line-height);
+}
+
+.ion-combobox-menu__description {
+  color: var(--text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+}
+
+/*
+ * Focus is a background, not an outline, and it is driven by data-focused
+ * rather than `:focus`.
+ *
+ * The real DOM focus never leaves the input — the list is driven by
+ * `aria-activedescendant`, so no option is ever `:focus` or `:hover` in the way
+ * a normal menu's rows are. Styling either one would produce a list where the
+ * keyboard highlight is invisible. React Aria also routes pointer hover into
+ * the same `isFocused` flag, so one rule covers both and the mouse and keyboard
+ * cannot end up highlighting two different rows.
+ */
+.ion-combobox-menu__option[data-focused='true'] {
+  background-color: var(--surface-hover);
+}
+
+.ion-combobox-menu__option[data-selected='true'] .ion-combobox-menu__label {
+  font-weight: var(--font-weight-medium);
+}
+
+.ion-combobox-menu__option[data-selected='true'] {
+  background-color: var(--surface-primary-subtle);
+}
+
+.ion-combobox-menu__option[data-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.ion-combobox-menu__option[data-disabled='true'] .ion-combobox-menu__label,
+.ion-combobox-menu__option[data-disabled='true']
+  .ion-combobox-menu__description {
+  color: var(--text-disabled);
+}
+
+.ion-combobox-menu__empty {
+  padding: var(--spacing-12) var(--spacing-8);
+  color: var(--text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+  text-align: center;
+}