ionbase-ui 0.51.0 → 0.59.0

package/dist/styles/drawer.css

@@ -0,0 +1,181 @@
+/*
+ * Drawer
+ *
+ * Drawn in Figma as `Drawer` (1365:2404), from this file. Twelve variants:
+ * four placements by three sizes, the same cross product the props expose.
+ *
+ * The panel IS the block — `.ion-drawer`, not `.ion-drawer__panel` — which
+ * matches popover.css and is load-bearing rather than cosmetic. The contrast
+ * gate resolves a translucent hover colour's backdrop from the block's own
+ * background, so with the surface on an element class the close button's hover
+ * pairing came back "skipped": unmeasured, and silently so.
+ *
+ * The scrim lives here for the same reason it lives in modal.css: nothing can
+ * render an overlay without also rendering what sits behind it, so the split
+ * Figma makes between panel and overlay has no meaning in code.
+ *
+ * Placement uses logical properties throughout — `inset-inline-start` rather
+ * than `left` — so `start` and `end` follow writing direction and a right-hand
+ * drawer in English is a left-hand one in Arabic without a second variant.
+ */
+.ion-drawer__scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  background-color: var(--surface-scrim);
+}
+
+.ion-drawer {
+  --ion-drawer-size: 30rem;
+
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  max-height: 100%;
+  background-color: var(--surface-raised);
+  color: var(--text-default);
+  font-family: var(--font-family-sans);
+}
+
+.ion-drawer--sm {
+  --ion-drawer-size: 22rem;
+}
+
+.ion-drawer--lg {
+  --ion-drawer-size: 40rem;
+}
+
+/* Edge panels are square against their own edge and rounded on the inner one:
+ * a drawer rounded on all four corners reads as a floating card that happens
+ * to touch the side. */
+.ion-drawer--start,
+.ion-drawer--end {
+  inset-block: 0;
+  width: var(--ion-drawer-size);
+}
+
+.ion-drawer--start {
+  inset-inline-start: 0;
+  border-start-end-radius: var(--radius-lg);
+  border-end-end-radius: var(--radius-lg);
+}
+
+.ion-drawer--end {
+  inset-inline-end: 0;
+  border-start-start-radius: var(--radius-lg);
+  border-end-start-radius: var(--radius-lg);
+}
+
+.ion-drawer--top,
+.ion-drawer--bottom {
+  inset-inline: 0;
+  height: var(--ion-drawer-size);
+  width: 100%;
+}
+
+.ion-drawer--top {
+  inset-block-start: 0;
+  border-end-start-radius: var(--radius-lg);
+  border-end-end-radius: var(--radius-lg);
+}
+
+.ion-drawer--bottom {
+  inset-block-end: 0;
+  border-start-start-radius: var(--radius-lg);
+  border-start-end-radius: var(--radius-lg);
+}
+
+.ion-drawer__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-12);
+  flex: none;
+  padding: var(--spacing-24);
+  border-bottom: var(--border-width-default) solid var(--border-subtle);
+}
+
+.ion-drawer__heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  min-width: 0;
+}
+
+.ion-drawer__title {
+  margin: 0;
+  font-size: var(--type-h5);
+  line-height: var(--type-h5-line-height);
+  font-weight: var(--font-weight-semibold);
+}
+
+.ion-drawer__description {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+}
+
+.ion-drawer__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--spacing-32);
+  height: var(--spacing-32);
+  padding: var(--spacing-4);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--icon-secondary);
+  cursor: pointer;
+}
+
+/*
+ * Background only, no colour change — the same rule Modal's close button uses,
+ * and for a measurable reason as well as a consistency one. `surface/hover` is
+ * translucent, so a rule that changes BOTH creates a foreground/background pair
+ * whose backdrop the contrast gate cannot resolve, and it reports the pairing
+ * as skipped. A skipped pairing is an unmeasured one.
+ */
+@media (hover: hover) {
+  .ion-drawer__close:hover {
+    background-color: var(--surface-hover);
+  }
+}
+
+.ion-drawer__close:focus-visible {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: 2px;
+}
+
+.ion-drawer__close svg {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+}
+
+/*
+ * The body is the only scrolling region. A drawer whose whole panel scrolls
+ * takes its own title off screen, which is the one piece of context a user
+ * needs while working down a long list.
+ */
+.ion-drawer__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--spacing-24);
+  font-size: var(--type-body);
+  line-height: var(--type-body-line-height);
+}
+
+.ion-drawer__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-8);
+  flex: none;
+  padding: var(--spacing-24);
+  border-top: var(--border-width-default) solid var(--border-subtle);
+}

package/dist/styles/empty-state.css

@@ -1,9 +1,11 @@
 /*
  * EmptyState
  *
- * Repo-owned, not measured from Figma — there is no Empty State component in
- * the file yet. Every value below is a token already on a ladder, so when one
- * is drawn the two can be reconciled without moving anything underneath.
+ * Drawn in Figma on 15 Sep 2026, as `Empty State` — 12 variants, Size x Reason.
+ * It was the last component in this package with no Figma counterpart, and it
+ * went the unusual direction: built here first from the pattern tier's
+ * requirement, then drawn to match. Every value was already a token on a
+ * ladder, which is what made the reconciliation cost one line.
  *
  * REASON CHANGES THE ICON COLOUR AND NOTHING ELSE
  *
@@ -117,7 +119,17 @@
   color: var(--text-default);
   font-size: var(--ion-empty-state-title);
   line-height: var(--ion-empty-state-title-line-height);
-  font-weight: var(--font-weight-medium);
+
+  /*
+   * Semibold, not medium, settled when the component was drawn. Every heading
+   * style in the Figma file — `Heading/H3`, `Heading/H4` — is semibold, so a
+   * medium title here would have been the only heading-sized text in the system
+   * off the ramp, and would have needed a text style that exists nowhere else.
+   * The `inline` size sits at body-md rather than a heading rung, and its style
+   * (`Body/Medium Semibold`) was added to the file alongside the component, in
+   * the same shape as the `Body/Default Semibold` already there.
+   */
+  font-weight: var(--font-weight-semibold);
 
   /* A filter value or record id in the title must wrap, not widen the region. */
   overflow-wrap: anywhere;

package/dist/styles/file-upload.css

@@ -0,0 +1,236 @@
+/*
+ * FileUpload
+ *
+ * Drawn in Figma as `File Upload` (1367:2333), from this file. Nothing here was
+ * invented: the border, radius, background and disabled treatment are
+ * `Input`'s, and the centred icon-over-text stack with its padding ladder is
+ * `EmptyState`'s. The bet when this was written was that drawing it would move
+ * values and not structure; drawing it moved neither.
+ *
+ * Figma draws the DROP ZONE only, not the label and helper around it — the same
+ * split `Input` makes against `Form Field`. The file list has no Figma
+ * counterpart at all, because it is runtime content rather than a state.
+ *
+ * THE VISUALLY HIDDEN INPUT IS NOT `display: none`
+ *
+ * A `display: none` input leaves the tab order and the accessibility tree, and
+ * the component then has no control in it at all — which is how the common
+ * build of this component ends up keyboard-unreachable while looking identical.
+ * `.ion-visually-hidden` would work, but the input is also positioned to sit
+ * inside the zone so a browser can anchor its own validation bubble somewhere
+ * sensible rather than at the top-left of the page.
+ */
+.ion-file-upload {
+  --ion-file-upload-padding: var(--spacing-32);
+  --ion-file-upload-gap: var(--spacing-8);
+  --ion-file-upload-icon-size: var(--icon-size-lg);
+
+  position: relative;
+  display: flex;
+  background-color: var(--surface-default);
+  border: var(--border-width-default) dashed var(--border-default);
+  border-radius: var(--radius-md);
+  transition:
+    border-color var(--ion-duration-base) var(--ion-ease-out),
+    background-color var(--ion-duration-base) var(--ion-ease-out);
+}
+
+.ion-file-upload--sm {
+  --ion-file-upload-padding: var(--spacing-20);
+  --ion-file-upload-gap: var(--spacing-6);
+  --ion-file-upload-icon-size: var(--icon-size-md);
+}
+
+/*
+ * 1px, not 0. The input has to have a box for the focus ring to be drawn
+ * against and for a validation bubble to point at; collapsing it to nothing
+ * puts both in the document corner. It is clipped, so the 1px is never seen.
+ */
+.ion-file-upload__input {
+  position: absolute;
+  bottom: var(--spacing-8);
+  left: 50%;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  border: 0;
+}
+
+.ion-file-upload__target {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ion-file-upload-gap);
+  padding: var(--ion-file-upload-padding) var(--spacing-24);
+  text-align: center;
+  cursor: pointer;
+}
+
+.ion-file-upload__icon {
+  display: inline-flex;
+  color: var(--icon-secondary);
+}
+
+.ion-file-upload__icon svg {
+  width: var(--ion-file-upload-icon-size);
+  height: var(--ion-file-upload-icon-size);
+}
+
+.ion-file-upload__prompt {
+  color: var(--text-default);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body);
+  line-height: var(--type-body-line-height);
+  font-weight: var(--font-weight-medium);
+}
+
+.ion-file-upload__hint {
+  color: var(--text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+}
+
+@media (hover: hover) {
+  .ion-file-upload:hover {
+    border-color: var(--border-strong);
+    background-color: var(--surface-hover);
+  }
+}
+
+/*
+ * The focus ring is on the ZONE, driven by the hidden input's focus. The ring
+ * belongs where the user's eye is, and the input is one clipped pixel.
+ */
+.ion-file-upload:focus-within {
+  outline: var(--border-width-thick) solid var(--ring-focus);
+  outline-offset: 2px;
+}
+
+/*
+ * Dragging reads as a solid border, not a colour change alone. A drop target
+ * that only shifts hue is invisible to anyone who cannot distinguish the two —
+ * WCAG 1.4.1, and it is also just easier to see.
+ */
+.ion-file-upload--dragging,
+.ion-file-upload[data-dragging='true'] {
+  border-style: solid;
+  border-color: var(--border-focus);
+  background-color: var(--surface-primary-subtle);
+}
+
+.ion-file-upload--invalid,
+.ion-file-upload[data-invalid='true'] {
+  border-color: var(--border-error);
+}
+
+.ion-file-upload--disabled,
+.ion-file-upload[data-disabled='true'] {
+  background-color: var(--surface-disabled);
+  border-color: var(--border-disabled);
+}
+
+.ion-file-upload--disabled .ion-file-upload__target,
+.ion-file-upload[data-disabled='true'] .ion-file-upload__target {
+  cursor: not-allowed;
+}
+
+.ion-file-upload--disabled .ion-file-upload__prompt,
+.ion-file-upload[data-disabled='true'] .ion-file-upload__prompt {
+  color: var(--text-disabled);
+}
+
+.ion-file-upload--disabled .ion-file-upload__icon,
+.ion-file-upload[data-disabled='true'] .ion-file-upload__icon {
+  color: var(--icon-disabled);
+}
+
+/*
+ * The list of held files is a sibling of the zone, not a child of it.
+ *
+ * Inside the zone it would sit inside the `<label>`, which makes every row —
+ * including each remove button — a click target for the file picker. Removing
+ * a file would open the picker on the way out.
+ */
+.ion-file-upload__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ion-file-upload__file {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  min-height: var(--spacing-32);
+  padding-inline: var(--spacing-12);
+  background-color: var(--surface-subtle);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+}
+
+.ion-file-upload__name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-default);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ion-file-upload__size {
+  flex-shrink: 0;
+  color: var(--text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+/*
+ * 24px square — WCAG 2.2 SC 2.5.8's minimum pointer target, around a 16px
+ * glyph. Do not shrink it to the icon.
+ */
+.ion-file-upload__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--spacing-24);
+  height: var(--spacing-24);
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--icon-secondary);
+  cursor: pointer;
+  transition: background-color var(--ion-duration-base) var(--ion-ease-out);
+}
+
+.ion-file-upload__remove svg {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+
+@media (hover: hover) {
+  .ion-file-upload__remove:hover {
+    background-color: var(--surface-hover);
+    color: var(--icon-default);
+  }
+}
+
+.ion-file-upload__remove:focus-visible {
+  outline: var(--border-width-thick) solid var(--ring-focus);
+  outline-offset: 2px;
+}
+
+.ion-file-upload__remove:disabled {
+  color: var(--icon-disabled);
+  cursor: not-allowed;
+}

package/dist/styles/index.css

@@ -67,6 +67,14 @@
 @import url('./citation.css');
 @import url('./confidence-indicator.css');
 @import url('./empty-state.css');
+@import url('./spinner.css');
+@import url('./progress-bar.css');
+@import url('./skeleton.css');
+@import url('./breadcrumb.css');
+@import url('./accordion.css');
+@import url('./drawer.css');
+@import url('./file-upload.css');
+@import url('./combobox.css');
 
 /*
  * Visually hidden, but not hidden from assistive tech.

package/dist/styles/progress-bar.css

@@ -0,0 +1,107 @@
+/*
+ * ProgressBar
+ *
+ * The fill width arrives as a custom property rather than an inline `width`,
+ * so the only inline value a caller ever sees is a percentage on a token-named
+ * property — and `no-raw-style-values` stays true rather than exempted.
+ */
+.ion-progress-bar {
+  --ion-progress-bar-height: var(--spacing-8);
+  --ion-progress-bar-fill: var(--surface-primary);
+  --ion-progress-bar-pct: 0%;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  font-family: var(--font-family-sans);
+}
+
+.ion-progress-bar--sm {
+  --ion-progress-bar-height: var(--spacing-4);
+}
+
+.ion-progress-bar--success {
+  --ion-progress-bar-fill: var(--surface-success);
+}
+
+.ion-progress-bar--warning {
+  --ion-progress-bar-fill: var(--surface-warning);
+}
+
+.ion-progress-bar--error {
+  --ion-progress-bar-fill: var(--surface-error);
+}
+
+.ion-progress-bar__header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--spacing-8);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+}
+
+.ion-progress-bar__label {
+  color: var(--text-default);
+}
+
+.ion-progress-bar__value {
+  color: var(--text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.ion-progress-bar__track {
+  overflow: hidden;
+  height: var(--ion-progress-bar-height);
+  background-color: var(--surface-muted);
+  border-radius: var(--radius-full);
+}
+
+.ion-progress-bar__fill {
+  width: var(--ion-progress-bar-pct);
+  height: 100%;
+  background-color: var(--ion-progress-bar-fill);
+  border-radius: inherit;
+  transition: width var(--ion-duration-base) var(--ion-ease-out);
+}
+
+/*
+ * Indeterminate is a travelling segment rather than a filling bar: a bar that
+ * fills and resets reads as repeated failure and restart.
+ */
+.ion-progress-bar--indeterminate .ion-progress-bar__fill {
+  width: 40%;
+  animation: ion-progress-bar-slide var(--ion-duration-slow)
+    var(--ion-ease-in-out) infinite;
+}
+
+@keyframes ion-progress-bar-slide {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(250%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ion-progress-bar__fill {
+    transition-duration: 1ms;
+  }
+
+  /* Still moving, still slow — see Spinner for the same reasoning. */
+  .ion-progress-bar--indeterminate .ion-progress-bar__fill {
+    animation-duration: 3000ms;
+  }
+}
+
+@media (forced-colors: active) {
+  .ion-progress-bar__track {
+    border: var(--border-width-default) solid CanvasText;
+  }
+
+  .ion-progress-bar__fill {
+    background-color: Highlight;
+  }
+}

package/dist/styles/skeleton.css

@@ -0,0 +1,76 @@
+/*
+ * Skeleton
+ *
+ * A pulse on one surface token rather than a sweeping gradient. The gradient
+ * version is prettier and costs more than it looks: `verify-contrast.mjs`
+ * resolves gradient stops as real pairings, so every skeleton would enter the
+ * contrast budget as text-shaped colour it is not — and a placeholder has no
+ * text to be legible.
+ */
+.ion-skeleton {
+  --ion-skeleton-width: 100%;
+  --ion-skeleton-height: var(--spacing-16);
+  --ion-skeleton-radius: var(--radius-sm);
+
+  width: var(--ion-skeleton-width);
+  height: var(--ion-skeleton-height);
+  background-color: var(--surface-muted);
+  border-radius: var(--ion-skeleton-radius);
+  animation: ion-skeleton-pulse var(--ion-duration-slow) var(--ion-ease-in-out)
+    infinite;
+}
+
+.ion-skeleton-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  width: var(--ion-skeleton-width, 100%);
+}
+
+/* Text sits on the line box so a skeleton paragraph occupies the height the
+ * real paragraph will, and the layout does not jump when content lands. */
+.ion-skeleton--text {
+  --ion-skeleton-height: var(--type-body-line-height);
+}
+
+/* The last line short, because real paragraphs end mid-measure. */
+.ion-skeleton--last {
+  --ion-skeleton-width: 60%;
+}
+
+.ion-skeleton--circle {
+  --ion-skeleton-height: var(--icon-size-lg);
+  --ion-skeleton-width: var(--icon-size-lg);
+  --ion-skeleton-radius: var(--radius-full);
+
+  flex: none;
+}
+
+.ion-skeleton--rect {
+  --ion-skeleton-height: var(--spacing-64);
+  --ion-skeleton-radius: var(--radius-md);
+}
+
+@keyframes ion-skeleton-pulse {
+  50% {
+    opacity: 0.55;
+  }
+}
+
+/*
+ * Held still, unlike Spinner and ProgressBar — and the difference is the point.
+ * Those two are the only evidence that a wait is live, so they keep moving
+ * slowly. A skeleton says nothing a static block does not, so for a user who
+ * asked for less motion it simply stops.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .ion-skeleton {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .ion-skeleton {
+    border: var(--border-width-default) solid GrayText;
+  }
+}