ionbase-ui 0.51.0 → 0.69.0

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