ionbase-ui 0.48.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

@@ -32,6 +32,7 @@
 @import url('./alert.css');
 @import url('./badge.css');
 @import url('./input.css');
+@import url('./textarea.css');
 @import url('./phone-input.css');
 @import url('./select.css');
 @import url('./checkbox.css');
@@ -66,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/input.css

@@ -21,10 +21,12 @@
  *    padding box, so `padding-x: 12px` would put the text at 13px. The border
  *    width is subtracted back out — the same correction Badge and Tabs needed.
  *
- *    This also makes the focus state free: Figma's focus ring is a 2px inside
- *    stroke, which eats 1px further into the padding and leaves the text
- *    exactly where it was. Subtracting the live border width reproduces that,
- *    so nothing shifts when the field takes focus.
+ *    The subtraction is against the LIVE border width, which used to matter:
+ *    focus was a 2px inside stroke that ate a further 1px of padding, and
+ *    subtracting it kept the text from shifting. Every state is 1px as of
+ *    5 Sep 2026, so the correction is now constant — but it stays written this
+ *    way, because it is correct either way and the next state to need a
+ *    different width gets it for free.
  */
 .ion-input {
   /*
@@ -172,9 +174,10 @@
  * hover -> focus -> invalid -> read-only -> disabled.
  *
  * Invalid sits after focus and overrides the colour only, never the width. A
- * focused invalid field therefore keeps the 2px ring but shows it in the error
- * colour, which is both states being true at once rather than one masking the
- * other.
+ * focused invalid field therefore shows the error colour rather than the focus
+ * colour — both states are true at once and the more urgent one is shown. That
+ * ordering mattered more when the two differed in width as well; it is still
+ * the behaviour, and still deliberate.
  */
 
 /*
@@ -192,23 +195,39 @@
   border-color: var(--border-strong);
 }
 
+/*
+ * 1px, not the 2px this used to carry. See the note on --invalid below: both
+ * states were thinned on the same design call, and the trade is the same one.
+ */
 .ion-input:focus-within,
 .ion-input[data-focused='true'] {
-  --ion-input-border-width: var(--border-width-thick);
-
   border-color: var(--border-focus);
 }
 
 /*
- * 2px, matching Focus and matching Select. At 1px the invalid state differed
- * from default only in hue, which is the exact failure mode WCAG 1.4.1 is
- * about — error has to be perceivable without relying on colour alone.
- * Reconciled in Figma; Input was the one that was wrong.
+ * 1px. THIS COMMENT USED TO ARGUE FOR 2px AND THE ARGUMENT WAS SOUND, so read
+ * it before changing anything back:
+ *
+ *   "2px, matching Focus and matching Select. At 1px the invalid state differed
+ *    from default only in hue, which is the exact failure mode WCAG 1.4.1 is
+ *    about — error has to be perceivable without relying on colour alone.
+ *    Reconciled in Figma; Input was the one that was wrong."
+ *
+ * That defect was found once and fixed once, and thinning the border reopens
+ * it: an invalid field now differs from a default field by hue alone. It was
+ * changed on an explicit design call on 5 Sep 2026, applied to Input and
+ * Textarea and to their Figma sets, and it is recorded here rather than left to
+ * look like drift.
+ *
+ * Select, Checkbox, Radio, Tabs and Menu still carry border-width/thick, so
+ * these two are deliberately out of step with the rest of the system.
+ *
+ * IF THE ERROR STATE NEEDS A NON-COLOUR CUE AGAIN, this is the decision to
+ * revisit — and an icon or a message would satisfy 1.4.1 without the border,
+ * which is the better fix than putting the 2px back.
  */
 .ion-input--invalid,
 .ion-input[data-invalid='true'] {
-  --ion-input-border-width: var(--border-width-thick);
-
   border-color: var(--border-error-strong);
 }
 

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;
+  }
+}