ionbase-ui 0.51.0 → 0.69.0

package/dist/styles/prompt-input.css

@@ -0,0 +1,127 @@
+/*
+ * PromptInput
+ *
+ * Drawn in Figma as `Prompt Input` (1393:387), from this file, composing Icon
+ * Button and Agent Stop instances rather than redrawing them. The box is Textarea's — surface, border, hover and focus
+ * roles unchanged — one radius rung larger, because it holds a toolbar and
+ * reads as a surface rather than a field. The send control is Button `sm`
+ * made square; the stop control is AgentStop `sm`, unmodified.
+ *
+ * The border and focus live on the BOX, not the textarea. The box is what
+ * looks like the field, so it is what shows focus; a ring around only the text
+ * area inside it would draw a field within a field.
+ *
+ * States are BEM modifiers and `:focus-within`, never `[data-*]`, so the
+ * contrast gate measures them — see stepper.css for what happens otherwise.
+ */
+.ion-prompt-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  padding: var(--spacing-8);
+  border: var(--border-width-default) solid var(--border-default);
+  border-radius: var(--radius-lg);
+  background-color: var(--surface-default);
+  color: var(--text-default);
+  font-family: var(--font-family-sans);
+  cursor: text;
+  transition: border-color var(--ion-duration-base) var(--ion-ease-out);
+}
+
+@media (hover: hover) {
+  .ion-prompt-input:hover:not(.ion-prompt-input--disabled) {
+    border-color: var(--border-strong);
+  }
+}
+
+/*
+ * Same specificity as the hover rule above and declared after it, so focus
+ * wins while the pointer is still over the box — which it always is right
+ * after a click into the field.
+ */
+.ion-prompt-input:focus-within:not(.ion-prompt-input--disabled) {
+  border-color: var(--border-focus);
+}
+
+.ion-prompt-input__attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-8);
+  padding-inline: var(--spacing-4);
+}
+
+.ion-prompt-input__field {
+  display: block;
+  width: 100%;
+  margin: 0;
+
+  /* Lines the text up with the actions' left edge below it. */
+  padding: var(--spacing-4);
+  border: 0;
+  outline: none;
+  background-color: transparent;
+  color: var(--text-default);
+  font: inherit;
+  font-size: var(--type-body);
+  line-height: var(--type-body-line-height);
+
+  /* Height is set from the content, up to maxRows; a grip would fight it. */
+  resize: none;
+}
+
+/* text/tertiary, as Textarea — text/placeholder was retired for 2.38:1. */
+.ion-prompt-input__field::placeholder {
+  color: var(--text-tertiary);
+  opacity: 1;
+}
+
+.ion-prompt-input__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-8);
+  cursor: default;
+}
+
+.ion-prompt-input__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  min-width: 0;
+}
+
+/*
+ * Square, at Button's own `sm` height. Two classes, so it outranks
+ * `.ion-button--sm` without depending on which stylesheet loads first.
+ */
+.ion-prompt-input .ion-prompt-input__send {
+  --ion-button-padding-x: 0;
+
+  flex: none;
+  width: var(--spacing-32);
+}
+
+.ion-prompt-input__stop {
+  flex: none;
+}
+
+.ion-prompt-input--disabled {
+  border-color: var(--border-disabled);
+  background-color: var(--surface-disabled);
+  cursor: not-allowed;
+}
+
+.ion-prompt-input--disabled .ion-prompt-input__field {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+
+.ion-prompt-input--disabled .ion-prompt-input__field::placeholder {
+  color: var(--text-disabled);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ion-prompt-input {
+    transition: none;
+  }
+}

package/dist/styles/segmented-control.css

@@ -0,0 +1,182 @@
+/*
+ * SegmentedControl
+ *
+ * Drawn in Figma as `Segmented Control` (1390:435) and `Segmented Control
+ * Item` (1390:332), from this file. It is Tabs' pill track, token for token: the muted
+ * track, the 2px gap, the default-surface selected segment, the page-surface
+ * selected hover, and the overall height ladder (32/40/48, 12/16/20 padding). Two
+ * components that look identical must not drift into looking almost
+ * identical, so if tabs.css changes its pill, this changes with it.
+ *
+ * Two deliberate differences from the pill track. It is `inline-flex` in every
+ * orientation, because a radiogroup has none. And the track radius is `lg`
+ * rather than `full`, so `--full-width` does not stretch a stadium shape across
+ * a card.
+ *
+ * States are BEM modifiers (`--selected`, `--disabled`, `--focus-visible`),
+ * never `[data-*]`, and the track surface is on the block, so the contrast gate
+ * measures the translucent hover against it — see stepper.css and
+ * number-input.css for the two ways that goes wrong.
+ */
+.ion-segmented-control {
+  --ion-segmented-item-height: var(--spacing-32);
+  --ion-segmented-item-padding-x: var(--spacing-16);
+  --ion-segmented-item-gap: var(--spacing-8);
+  --ion-segmented-icon-size: var(--icon-size-md);
+  --ion-segmented-font-size: var(--type-body);
+  --ion-segmented-line-height: var(--type-body-line-height);
+
+  display: inline-flex;
+  gap: var(--spacing-2);
+  padding: var(--spacing-4);
+  border-radius: var(--radius-lg);
+  background-color: var(--surface-muted);
+  color: var(--text-tertiary);
+  font-family: var(--font-family-sans);
+}
+
+/* Item heights are the pill's 40/32/48 less the track's 4px inset on each side. */
+.ion-segmented-control--sm {
+  --ion-segmented-item-height: var(--spacing-24);
+  --ion-segmented-item-padding-x: var(--spacing-12);
+  --ion-segmented-item-gap: var(--spacing-6);
+  --ion-segmented-icon-size: var(--icon-size-sm);
+  --ion-segmented-font-size: var(--type-body-sm);
+  --ion-segmented-line-height: var(--type-body-sm-line-height);
+}
+
+.ion-segmented-control--lg {
+  --ion-segmented-item-height: var(--spacing-40);
+  --ion-segmented-item-padding-x: var(--spacing-20);
+  --ion-segmented-font-size: var(--type-body-lg);
+  --ion-segmented-line-height: var(--type-body-lg-line-height);
+}
+
+.ion-segmented-control--full-width {
+  display: flex;
+}
+
+.ion-segmented-control__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ion-segmented-item-gap);
+  min-height: var(--ion-segmented-item-height);
+  padding-inline: var(--ion-segmented-item-padding-x);
+  border-radius: var(--radius-md);
+  color: var(--text-tertiary);
+  font-size: var(--ion-segmented-font-size);
+  line-height: var(--ion-segmented-line-height);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    color var(--ion-duration-base) var(--ion-ease-out),
+    background-color var(--ion-duration-base) var(--ion-ease-out);
+}
+
+.ion-segmented-control--full-width .ion-segmented-control__item {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.ion-segmented-control__icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.ion-segmented-control__icon svg {
+  width: var(--ion-segmented-icon-size);
+  height: var(--ion-segmented-icon-size);
+}
+
+.ion-segmented-control__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* `.ion-field` is a column that stretches its children; a labelled control
+ * keeps its own width unless it was asked to fill. */
+.ion-segmented-control-field {
+  align-items: flex-start;
+}
+
+.ion-segmented-control-field--full-width {
+  align-items: stretch;
+}
+
+/*
+ * State order is specificity, not `:not()` lists. The contrast gate splits a
+ * selector at every comma and reads `--disabled` inside `:not(...)` as the
+ * disabled state, so a hover rule guarded with `:not(--selected, --disabled)`
+ * was measured as disabled text on a hover surface — two failures for a
+ * combination that never renders. Plain rules, ordered, say the same thing
+ * and are read correctly:
+ *
+ *   hover (0,2,0) -> selected (0,1,0) -> selected hover (0,2,0)
+ *   -> disabled (0,2,0) -> disabled selected (0,3,0)
+ */
+@media (hover: hover) {
+  .ion-segmented-control__item:hover {
+    background-color: var(--surface-hover);
+    color: var(--text-default);
+  }
+}
+
+.ion-segmented-control__item--selected {
+  background-color: var(--surface-default);
+  color: var(--text-default);
+}
+
+@media (hover: hover) {
+  .ion-segmented-control__item--selected:hover {
+    background-color: var(--surface-page);
+  }
+}
+
+/*
+ * Focus lands on the hidden radio, so the ring is drawn on the segment around
+ * it. Tabs' ring: 2px `ring/focus`, offset by its own width.
+ */
+.ion-segmented-control__item--focus-visible {
+  outline: var(--border-width-thick) solid var(--ring-focus);
+  outline-offset: var(--border-width-thick);
+}
+
+/*
+ * Two classes, so it outranks hover: a disabled segment does not react.
+ *
+ * The track's own surface rather than `transparent` — identical on screen,
+ * because the segment sits on the track. It is explicit for the contrast gate:
+ * with `transparent` the surface is inherited from the block, and the gate
+ * treats a single modifier that takes its surface from the block, while a
+ * compound of it (`--selected` + `--disabled`) supplies its own, as a state
+ * that cannot render — and drops it without counting a skip.
+ */
+.ion-segmented-control .ion-segmented-control__item--disabled {
+  background-color: var(--surface-muted);
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+
+/*
+ * A disabled SELECTED segment must still show which one is selected — a
+ * disabled control still has a value. Only the text dims.
+ */
+.ion-segmented-control
+  .ion-segmented-control__item--selected.ion-segmented-control__item--disabled {
+  background-color: var(--surface-default);
+}
+
+@media (forced-colors: active) {
+  .ion-segmented-control__item--selected {
+    outline: var(--border-width-thick) solid;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ion-segmented-control__item {
+    transition: none;
+  }
+}

package/dist/styles/sidebar.css

@@ -0,0 +1,307 @@
+/*
+ * Sidebar
+ *
+ * Drawn in Figma as `Sidebar` (1396:502), `Sidebar Section` (1396:501) and
+ * `Sidebar Item` (1396:412), from this file. Rows take Menu Item's rhythm — 32px, 8px inset, `md`
+ * radius — because a sidebar row and a menu row are the same density of
+ * choice. The column is `surface/default` against the page's `surface/page`,
+ * the same step a card takes. Hover and current are fills (`surface/hover`,
+ * `surface/selected`),
+ * which is exactly where this parts company with NavItem: NavItem was measured
+ * as a header link that recolours and never fills.
+ *
+ * Written against the contrast gate's known limits (AGENTS.md, "How a
+ * stylesheet goes unmeasured"): state is BEM modifiers, the sidebar's surface
+ * is on the block so the translucent hover has a ground in this file, and there
+ * are no `:not()` lists.
+ */
+.ion-sidebar {
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  block-size: 100%;
+  min-block-size: 0;
+  border-inline-end: var(--border-width-default) solid var(--border-subtle);
+  background-color: var(--surface-default);
+  color: var(--text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+}
+
+.ion-sidebar__header,
+.ion-sidebar__footer {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  padding: var(--spacing-12);
+}
+
+.ion-sidebar__header {
+  border-block-end: var(--border-width-default) solid var(--border-subtle);
+}
+
+.ion-sidebar__footer {
+  border-block-start: var(--border-width-default) solid var(--border-subtle);
+}
+
+/* Only the middle scrolls, so the switcher and Invite stay put. */
+.ion-sidebar__body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  min-block-size: 0;
+  padding: var(--spacing-12) var(--spacing-8);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+/* ---------------------------------------------------------------- section */
+
+.ion-sidebar__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.ion-sidebar__section-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  min-block-size: var(--spacing-24);
+  padding-inline: var(--spacing-8) var(--spacing-4);
+}
+
+.ion-sidebar__section-title {
+  display: inline-flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: var(--spacing-4);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: none;
+  color: var(--text-tertiary);
+  font: inherit;
+  font-size: var(--type-caption);
+  line-height: var(--type-caption-line-height);
+  font-weight: var(--font-weight-medium);
+  text-align: start;
+}
+
+button.ion-sidebar__section-title {
+  cursor: pointer;
+}
+
+.ion-sidebar__section-actions {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+/* -------------------------------------------------------------------- list */
+
+.ion-sidebar__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/*
+ * Indentation accumulates by nesting, so depth needs no prop and no inline
+ * style: each level is one more padded list inside the last.
+ */
+.ion-sidebar__list--nested {
+  margin-block-start: var(--spacing-2);
+  padding-inline-start: var(--spacing-16);
+}
+
+/* A hidden list is `hidden`; the display above must not override it. */
+.ion-sidebar__list[hidden] {
+  display: none;
+}
+
+/* --------------------------------------------------------------------- row */
+
+.ion-sidebar__row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-block-size: var(--spacing-32);
+  padding-inline-end: var(--spacing-4);
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+}
+
+.ion-sidebar__link {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: var(--spacing-8);
+  min-inline-size: 0;
+  min-block-size: var(--spacing-32);
+  margin: 0;
+  padding: 0 var(--spacing-8);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  text-decoration: none;
+}
+
+a.ion-sidebar__link,
+button.ion-sidebar__link {
+  cursor: pointer;
+}
+
+.ion-sidebar__icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--icon-secondary);
+}
+
+.ion-sidebar__icon svg,
+.ion-sidebar__chevron svg {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+
+/* Long names truncate; the full text is still the link's accessible name. */
+.ion-sidebar__label {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ion-sidebar__badge {
+  flex: none;
+  color: var(--text-tertiary);
+  font-size: var(--type-caption);
+  line-height: var(--type-caption-line-height);
+  font-variant-numeric: tabular-nums;
+}
+
+.ion-sidebar__chevron {
+  display: inline-flex;
+  flex: none;
+  color: var(--icon-tertiary);
+  transition: transform var(--ion-duration-base) var(--ion-ease-out);
+}
+
+.ion-sidebar__chevron--expanded,
+.ion-sidebar__section-title--expanded .ion-sidebar__chevron {
+  transform: rotate(90deg);
+}
+
+/* The separate expand button of a row that is also a link. */
+.ion-sidebar__toggle {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--spacing-24);
+  height: var(--spacing-24);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+/*
+ * Row actions. Hidden until the row is hovered or holds focus — `opacity`,
+ * not `display` or `visibility`, so they stay in the tab order and appear the
+ * moment focus reaches them. Always shown where there is no hover to reveal
+ * them, or a touch user could never find them.
+ */
+.ion-sidebar__actions {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-2);
+  opacity: 0;
+}
+
+.ion-sidebar__row:hover .ion-sidebar__actions,
+.ion-sidebar__row:focus-within .ion-sidebar__actions {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .ion-sidebar__actions {
+    opacity: 1;
+  }
+}
+
+/* ------------------------------------------------------------------ states */
+
+@media (hover: hover) {
+  .ion-sidebar__row:hover {
+    background-color: var(--surface-hover);
+    color: var(--text-default);
+  }
+}
+
+.ion-sidebar__row--current {
+  background-color: var(--surface-selected);
+  color: var(--text-default);
+  font-weight: var(--font-weight-medium);
+}
+
+.ion-sidebar__row--current .ion-sidebar__icon {
+  color: var(--icon-primary);
+}
+
+@media (hover: hover) {
+  .ion-sidebar__row--current:hover {
+    background-color: var(--surface-selected-hover);
+  }
+}
+
+/*
+ * Two classes, so a disabled row does not react to hover. The sidebar's surface
+ * is repeated rather than `transparent`, which the contrast gate would read as an
+ * inherited surface and drop — see the note in segmented-control.css.
+ */
+.ion-sidebar .ion-sidebar__row--disabled {
+  background-color: var(--surface-default);
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+
+.ion-sidebar .ion-sidebar__row--disabled .ion-sidebar__icon {
+  color: var(--icon-disabled);
+}
+
+.ion-sidebar__link:focus-visible,
+.ion-sidebar__toggle:focus-visible,
+.ion-sidebar__section-title:focus-visible {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: calc(-1 * var(--border-width-thick));
+}
+
+@media (forced-colors: active) {
+  .ion-sidebar__row--current {
+    outline: var(--border-width-default) solid;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ion-sidebar__chevron {
+    transition: none;
+  }
+}

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