ionbase-ui 0.59.0 → 0.70.0

package/dist/styles/header.css

@@ -187,6 +187,32 @@
   }
 }
 
+/*
+ * menuType="dialog": the toggle opens the caller's Drawer, so there is no
+ * panel. The slots keep their bar layout below the breakpoint, and the end
+ * slot is pushed to the far edge because the toggle now leads.
+ */
+@media (width < 896px) {
+  .ion-header.ion-header--dialog-menu .ion-header__menu {
+    display: contents;
+  }
+
+  .ion-header--dialog-menu .ion-header__center {
+    flex-direction: row;
+    align-items: center;
+    width: auto;
+  }
+
+  .ion-header--dialog-menu .ion-header__end {
+    width: auto;
+    margin-inline-start: auto;
+  }
+
+  .ion-header--dialog-menu .ion-header__end > * {
+    flex: none;
+  }
+}
+
 /*
  * Forced-colors: box-shadow is dropped by the OS, so the toggle would lose its
  * only edge. A border in ButtonText keeps it visible.

package/dist/styles/index.css

@@ -73,9 +73,24 @@
 @import url('./breadcrumb.css');
 @import url('./accordion.css');
 @import url('./drawer.css');
+@import url('./stepper.css');
+@import url('./prompt-input.css');
+@import url('./tool-call.css');
+@import url('./number-input.css');
+@import url('./segmented-control.css');
+@import url('./sidebar.css');
 @import url('./file-upload.css');
 @import url('./combobox.css');
 
+/*
+ * date-range-picker AFTER date-picker, and the order is load-bearing rather
+ * than alphabetical. The range band overrides `.ion-calendar__day`'s
+ * border-radius at equal specificity — square sides so consecutive days join
+ * into one bar — and at equal specificity the later rule is the one that wins.
+ */
+@import url('./date-picker.css');
+@import url('./date-range-picker.css');
+
 /*
  * Visually hidden, but not hidden from assistive tech.
  *

package/dist/styles/number-input.css

@@ -0,0 +1,83 @@
+/*
+ * NumberInput
+ *
+ * Drawn in Figma as `Number Input` (1389:473), from this file — Input's 21
+ * variants cloned, so the box keeps Input's bindings. The box is `.ion-input` itself — the component renders
+ * Input's classes, so every size and state comes from input.css and cannot
+ * drift from it. This file owns only what Input does not have: the − and +
+ * buttons, and tabular figures.
+ *
+ * − and + sit side by side at (field height − 8px): 24 / 32 / 40. Stacked
+ * chevrons would halve that, and a Small field's 16px targets would fall under
+ * WCAG 2.5.8's 24px.
+ */
+
+/*
+ * Restates Input's default surface, at zero specificity, for the contrast gate.
+ *
+ * The gate resolves a translucent `surface/hover` against the block's own
+ * background — looked up in THIS stylesheet, and the box's background is
+ * declared in input.css. Without this, the step buttons' hover and pressed
+ * pairings came back skipped in both modes: unmeasured, not passing.
+ *
+ * `:where()` is what makes it safe. It matches what the box already paints and
+ * loses to every Input state, so disabled and read-only still repaint the box.
+ */
+:where(.ion-number-input) {
+  background-color: var(--surface-default);
+}
+
+.ion-number-input--stepper {
+  /* The buttons carry their own inset; full padding would double it. */
+  padding-inline-end: var(--spacing-4);
+}
+
+/* Figures line up down a column of fields, which is where numbers usually are. */
+.ion-number-input__field {
+  font-variant-numeric: tabular-nums;
+}
+
+.ion-number-input__steps {
+  display: inline-flex;
+  flex: none;
+  gap: var(--spacing-2);
+}
+
+.ion-number-input__step {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--ion-input-height) - var(--spacing-8));
+  height: calc(var(--ion-input-height) - var(--spacing-8));
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background-color: transparent;
+  color: var(--icon-secondary);
+  cursor: pointer;
+}
+
+.ion-number-input__step svg {
+  width: var(--ion-input-icon-size);
+  height: var(--ion-input-icon-size);
+}
+
+@media (hover: hover) {
+  .ion-number-input__step:hover {
+    background-color: var(--surface-hover);
+    color: var(--icon-default);
+  }
+}
+
+.ion-number-input__step:active {
+  background-color: var(--surface-pressed);
+  color: var(--icon-default);
+}
+
+/* At the bound, or with the whole field disabled or read-only. */
+.ion-number-input__step:disabled {
+  background-color: transparent;
+  color: var(--icon-disabled);
+  cursor: not-allowed;
+}

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/scroll-progress.css

@@ -160,13 +160,24 @@
  * very percentage the reader opened the panel to act on. Keyboard users are
  * unaffected either way: the rows are real buttons in tab order, so Tab
  * scrolls each one into view without touching the wheel.
+ *
+ * CLOSED IS `display: none`, NOT ONLY INVISIBLE
+ *
+ * `visibility: hidden` removes the panel from sight and from tab order, but a
+ * hidden box still counts toward its scroll container's overflow. A rail near
+ * the right edge of a page therefore widened the page by however far the
+ * closed panel reached past it — 152px in the demo app — and a phone scrolled
+ * sideways into empty space. `display: none` takes it out of layout entirely.
+ * The reveal survives: `transition-behavior: allow-discrete` holds `display`
+ * until the fade-out finishes, and `@starting-style` gives the fade-in a
+ * starting point. A browser without either simply shows and hides it without
+ * the fade. `visibility` stays in the transition for the same browsers.
  */
 .ion-scroll-progress__panel {
   position: absolute;
-  left: 0;
   top: 50%;
   z-index: 10;
-  display: flex;
+  display: none;
   flex-direction: column;
   gap: var(--spacing-4);
   width: 220px;
@@ -181,20 +192,47 @@
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
-  transform: translateY(-50%) translateX(-4px);
+  transform: translateY(-50%) translateX(var(--ion-scroll-progress-slide));
   transition:
     opacity var(--ion-duration-base) var(--ion-ease-out),
     transform var(--ion-duration-base) var(--ion-ease-out),
-    visibility var(--ion-duration-base);
+    visibility var(--ion-duration-base),
+    display var(--ion-duration-base) allow-discrete;
+}
+
+/*
+ * Placement picks the edge the panel is anchored to and the direction it
+ * slides in from — always from the rail outward. `right` is the original
+ * behaviour; `left` is for a rail against the right edge of the page, where a
+ * rightward panel would leave the screen.
+ */
+.ion-scroll-progress__panel--right {
+  --ion-scroll-progress-slide: -4px;
+
+  left: 0;
+}
+
+.ion-scroll-progress__panel--left {
+  --ion-scroll-progress-slide: 4px;
+
+  right: 0;
 }
 
 .ion-scroll-progress__panel[data-open='true'] {
+  display: flex;
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transform: translateY(-50%) translateX(0);
 }
 
+@starting-style {
+  .ion-scroll-progress__panel[data-open='true'] {
+    opacity: 0;
+    transform: translateY(-50%) translateX(var(--ion-scroll-progress-slide));
+  }
+}
+
 /*
  * `display: block`, not `flex`: `text-overflow: ellipsis` does not apply to an
  * anonymous flex item, so a flex row here would clip the label with no ellipsis

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