ionbase-ui 0.1.0

package/dist/styles/select.css

@@ -0,0 +1,162 @@
+/*
+ * Select
+ *
+ * Measured from Figma `Select` (82:379). Three sizes x six states.
+ *
+ * Geometry is identical to Input — same heights, padding, radius, type ramp and
+ * the same inside-stroke correction (see input.css for why the border width is
+ * subtracted from the padding, and why these read the spacing scale directly
+ * rather than a shared control token). The two differ in two ways only:
+ *
+ *   - a chevron replaces the trailing icon slot, and is always icon/tertiary
+ *     rather than icon/interactive
+ *   - there is no Read-only state, because a native <select> has no readonly
+ *
+ * Invalid used to be 2px here and 1px on Input. That was drift, not intent —
+ * neither component bound its stroke weight to a token, so nothing held the
+ * two together. Both are now 2px, bound to border-width/thick in Figma.
+ *
+ * The rules are not shared with Input despite the overlap. A shared base class
+ * would couple two components that Figma models separately, and the first time
+ * one size changes on its own the sharing has to be unpicked under pressure.
+ */
+.ion-select {
+  --ion-select-height: var(--spacing-40);
+  --ion-select-padding-x: var(--spacing-12);
+  --ion-select-gap: var(--spacing-8);
+  --ion-select-icon-size: var(--icon-size-md);
+  --ion-select-radius: var(--radius-md);
+  --ion-select-font-size: var(--type-body);
+  --ion-select-line-height: var(--type-body-line-height);
+  --ion-select-border-width: var(--border-width-default);
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--ion-select-gap);
+  min-height: var(--ion-select-height);
+  padding-inline: calc(
+    var(--ion-select-padding-x) - var(--ion-select-border-width)
+  );
+  background-color: var(--surface-default);
+  border-style: solid;
+  border-width: var(--ion-select-border-width);
+  border-color: var(--border-default);
+  border-radius: var(--ion-select-radius);
+  font-family: var(--font-family-sans);
+  font-size: var(--ion-select-font-size);
+  line-height: var(--ion-select-line-height);
+  transition:
+    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Small shares Medium's padding — see input.css. */
+.ion-select--sm {
+  --ion-select-height: var(--spacing-32);
+  --ion-select-padding-x: var(--spacing-12);
+  --ion-select-gap: var(--spacing-6);
+  --ion-select-icon-size: var(--icon-size-sm);
+  --ion-select-radius: var(--radius-sm);
+  --ion-select-font-size: var(--type-body-sm);
+  --ion-select-line-height: var(--type-body-sm-line-height);
+}
+
+.ion-select--lg {
+  --ion-select-height: var(--spacing-48);
+  --ion-select-padding-x: var(--spacing-16);
+}
+
+/*
+ * `appearance: none` removes the platform chevron so the Figma one can be drawn
+ * instead. The native control is kept underneath rather than rebuilt: it brings
+ * keyboard handling, type-ahead and the platform picker on mobile, none of
+ * which a div can be talked into. Figma's dropdown list is a separate component
+ * (the Menu page) and is not this file's concern.
+ */
+.ion-select__field {
+  flex: 1 1 auto;
+  min-width: 0;
+  appearance: none;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  color: var(--text-secondary);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: var(--font-weight-regular);
+  cursor: pointer;
+}
+
+/*
+ * A native <select> has no ::placeholder, so the empty state is a modifier the
+ * component sets from its value rather than something CSS can detect.
+ */
+.ion-select--placeholder .ion-select__field {
+  color: var(--text-tertiary);
+}
+
+/*
+ * The chevron is decorative and sits behind the select in the stacking order,
+ * so a click anywhere in the box still opens the native picker.
+ */
+.ion-select__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  pointer-events: none;
+  color: var(--icon-tertiary);
+}
+
+.ion-select__chevron svg {
+  width: var(--ion-select-icon-size);
+  height: var(--ion-select-icon-size);
+}
+
+/* State order matches Input: hover -> focus -> invalid -> disabled. */
+
+@media (hover: hover) {
+  .ion-select:hover {
+    border-color: var(--border-strong);
+  }
+}
+
+.ion-select[data-hovered='true'] {
+  border-color: var(--border-strong);
+}
+
+.ion-select:focus-within,
+.ion-select[data-focused='true'] {
+  --ion-select-border-width: var(--border-width-thick);
+
+  border-color: var(--border-focus);
+}
+
+/* 2px, matching Focus and now matching Input. See input.css. */
+.ion-select--invalid,
+.ion-select[data-invalid='true'] {
+  --ion-select-border-width: var(--border-width-thick);
+
+  border-color: var(--border-error-strong);
+}
+
+.ion-select--disabled,
+.ion-select[data-disabled='true'] {
+  background-color: var(--surface-disabled);
+  border-color: var(--border-disabled);
+  cursor: not-allowed;
+}
+
+.ion-select--disabled .ion-select__field,
+.ion-select[data-disabled='true'] .ion-select__field {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+
+.ion-select--disabled .ion-select__chevron,
+.ion-select[data-disabled='true'] .ion-select__chevron {
+  color: var(--icon-disabled);
+}

package/dist/styles/table.css

@@ -0,0 +1,192 @@
+/*
+ * Table
+ *
+ * Measured from Figma `Table Row` / `Table Cell` / `Cell Text` (173:42).
+ * Replaces a pre-v2 file that predated this measurement: its header used
+ * `font-weight: semibold` where Figma's header cell is Medium, and its three
+ * density paddings were wrong on both axes — see DENSITY below.
+ *
+ * DENSITY ONLY MOVES VERTICAL PADDING
+ *
+ * Compact/Default/Relaxed are 8/16/20 top-and-bottom, but all three share the
+ * SAME 16px horizontal padding. Columns do not get any narrower as density
+ * increases — only row height does. A density system that also squeezed the
+ * horizontal padding would have been a plausible-looking invention with
+ * nothing in Figma behind it.
+ *
+ * HEADER FILL IS PER-CELL, NOT PER-ROW
+ *
+ * `surface/page` is bound on the header CELL, not on `<thead>`. Visually
+ * identical when every header cell shares it, but it is why this reads
+ * `.ion-table th` rather than a `.ion-table__header` row class — matching
+ * where Figma actually put the token means a table that mixes header cells
+ * into a body row (a sticky first column, say) still gets the fill from the
+ * right place.
+ *
+ * ROW BORDER IS BOTTOM ONLY
+ *
+ * Figma's row stroke resolves to top 0 / right 0 / bottom 1 / left 0, not a
+ * mixed/mystery value — confirmed by reading all four edges rather than
+ * assuming "MIXED" meant "top and bottom". One `border-bottom`, not a
+ * 4-sided border that needs collapsing.
+ */
+.ion-table-container {
+  width: 100%;
+  overflow-x: auto;
+  border: var(--border-width-default) solid var(--border-default);
+  border-radius: var(--radius-md);
+}
+
+.ion-table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+  text-align: left;
+}
+
+.ion-table th,
+.ion-table td {
+  padding: var(--spacing-16) var(--spacing-16);
+  vertical-align: middle;
+}
+
+/*
+ * Density — vertical padding only. See the header.
+ *
+ * Sits here, next to the padding it overrides, rather than further down with
+ * the other modifiers: `.ion-table--compact td` is (0,1,1), lower than the
+ * `.ion-table thead td` below it, so trailing it would read as descending
+ * specificity. Grouping layout before appearance is the better order anyway.
+ */
+.ion-table--compact th,
+.ion-table--compact td {
+  padding-top: var(--spacing-8);
+  padding-bottom: var(--spacing-8);
+}
+
+.ion-table--relaxed th,
+.ion-table--relaxed td {
+  padding-top: var(--spacing-20);
+  padding-bottom: var(--spacing-20);
+}
+
+.ion-table td {
+  color: var(--text-default);
+  font-weight: var(--font-weight-regular);
+}
+
+/*
+ * Header appearance follows EITHER condition: the cell is a `<th>`, or it sits
+ * inside `<thead>`.
+ *
+ * The `<th>` half is the Figma binding (see the header). The `thead` half
+ * exists because a header row can legitimately contain a cell that is not a
+ * column header — a selection-checkbox column has nothing to label, and an
+ * empty `<th>` is an accessibility failure rather than a neutral one: axe's
+ * `empty-table-header` flags it, and `aria-label` does not rescue it, since the
+ * rule is specifically about text a sighted screen-reader user can also see.
+ * Such a cell should be a `<td>`, which then still needs to look like a header.
+ *
+ * Declared after `.ion-table td` so specificity reads non-decreasing; the two
+ * `td` selectors would otherwise trip `no-descending-specificity`.
+ */
+.ion-table th,
+.ion-table thead td {
+  background-color: var(--surface-page);
+  color: var(--text-secondary);
+  font-weight: var(--font-weight-medium);
+  border-bottom: var(--border-width-default) solid var(--border-default);
+}
+
+.ion-table tr {
+  background-color: var(--surface-default);
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ion-table tbody tr {
+  border-bottom: var(--border-width-default) solid var(--border-default);
+}
+
+/*
+ * Striped rows have to come BEFORE hover/selected in the file, not just
+ * "be a plain background" — `.ion-table--striped tbody tr:nth-of-type(even)`
+ * and `.ion-table tbody tr:hover` carry the same specificity (one class, one
+ * pseudo-class, two elements), so with equal specificity the later rule in
+ * the file wins. Checked, not assumed: swapping the order silently makes a
+ * striped, hovered row show the page stripe instead of the hover tint.
+ */
+.ion-table--striped tbody tr:nth-of-type(even) {
+  background-color: var(--surface-page);
+}
+
+@media (hover: hover) {
+  .ion-table tbody tr:hover {
+    background-color: var(--surface-hover);
+  }
+}
+
+.ion-table tbody tr[data-hovered='true'] {
+  background-color: var(--surface-hover);
+}
+
+.ion-table tbody tr[data-selected='true'] {
+  background-color: var(--surface-primary-subtle);
+}
+
+.ion-table th[data-align='trailing'],
+.ion-table td[data-align='trailing'] {
+  text-align: right;
+}
+
+.ion-table th[data-align='center'],
+.ion-table td[data-align='center'] {
+  text-align: center;
+}
+
+/* Cell content — icon, label, icon, matching Figma's `Cell Text`. */
+.ion-table__cell-content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-6);
+}
+
+.ion-table__cell-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--icon-interactive);
+}
+
+.ion-table__cell-icon--trailing {
+  color: var(--icon-tertiary);
+}
+
+.ion-table__cell-icon svg {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+
+.ion-table th .ion-table__cell-icon--trailing {
+  color: var(--icon-secondary);
+}
+
+/* Link cells — Figma's `Type=Link`. */
+.ion-table__cell-content--link {
+  color: var(--text-link);
+}
+
+/*
+ * Column divider — Figma's per-cell `Show Divider`. A border-right rather
+ * than the fixed-height rule Figma draws: Figma's rule is only ever as tall
+ * as that one demo cell's text, which is an artifact of the canvas, not a
+ * measurement to reproduce. A full-height border-right is the version that
+ * still looks right at any row height.
+ */
+.ion-table th[data-divider='true'],
+.ion-table td[data-divider='true'] {
+  border-right: var(--border-width-default) solid var(--border-default);
+}

package/dist/styles/tabs.css

@@ -0,0 +1,219 @@
+/*
+ * Tabs
+ *
+ * Geometry measured from Figma `Tabs Item` (156:259) and `Tabs` (157:126).
+ * Both types share padding, gap and height; only radius and the selected
+ * indicator differ, so size lives on the item and type lives on the track.
+ *
+ * Size is a set of slots defaulting to medium — a size modifier reassigns five
+ * variables rather than restating five declarations, and the icon rule needs no
+ * per-size override.
+ *
+ * Only the horizontal orientation is implemented. Figma also defines vertical;
+ * the track modifier is named `--horizontal` so vertical is additive rather
+ * than a rename.
+ */
+
+/* Track */
+.ion-tabs__track {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ion-tabs__track--underline.ion-tabs__track--horizontal {
+  display: inline-flex;
+  gap: var(--spacing-4);
+  border-bottom: var(--border-width-default) solid var(--border-default);
+}
+
+.ion-tabs__track--pill.ion-tabs__track--horizontal {
+  display: inline-flex;
+  gap: var(--spacing-2);
+  padding: var(--spacing-4) var(--spacing-4);
+  background-color: var(--surface-muted);
+
+  /* `radius/full` — Figma's pill track is fully rounded, not an 8px rect. */
+  border-radius: var(--radius-full);
+}
+
+/* Item */
+.ion-tabs__item {
+  --ion-tabs-item-size: var(--spacing-40);
+  --ion-tabs-item-padding-x: var(--spacing-16);
+  --ion-tabs-item-padding-y: var(--spacing-8);
+  --ion-tabs-item-gap: var(--spacing-8);
+  --ion-tabs-icon-size: var(--spacing-20);
+
+  /*
+   * Typography follows the Figma text styles: Body/Small Emphasis at Small,
+   * Body/Default Emphasis at Medium, Body/Large Emphasis at Large. Emphasis is
+   * the medium weight, which is why font-weight is size-invariant here.
+   */
+  --ion-tabs-item-font-size: var(--type-body);
+  --ion-tabs-item-line-height: var(--type-body-line-height);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--ion-tabs-item-size);
+  padding: var(--ion-tabs-item-padding-y) var(--ion-tabs-item-padding-x);
+  gap: var(--ion-tabs-item-gap);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--ion-tabs-item-font-size);
+  line-height: var(--ion-tabs-item-line-height);
+  background-color: transparent;
+  border: none;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ion-tabs__item--sm {
+  --ion-tabs-item-size: var(--spacing-32);
+  --ion-tabs-item-padding-x: var(--spacing-12);
+  --ion-tabs-item-padding-y: var(--spacing-6);
+  --ion-tabs-item-gap: var(--spacing-6);
+  --ion-tabs-icon-size: var(--icon-size-sm);
+  --ion-tabs-item-font-size: var(--type-body-sm);
+  --ion-tabs-item-line-height: var(--type-body-sm-line-height);
+}
+
+.ion-tabs__item--lg {
+  --ion-tabs-item-size: var(--spacing-48);
+  --ion-tabs-item-padding-x: var(--spacing-20);
+  --ion-tabs-item-padding-y: var(--spacing-8);
+  --ion-tabs-item-gap: var(--spacing-8);
+  --ion-tabs-icon-size: var(--spacing-20);
+  --ion-tabs-item-font-size: var(--type-body-lg);
+  --ion-tabs-item-line-height: var(--type-body-lg-line-height);
+}
+
+/* Underline item */
+.ion-tabs__item--underline {
+  color: var(--text-tertiary);
+  border-bottom: var(--border-width-thick) solid transparent;
+
+  /*
+   * Figma draws the indicator as an INSIDE stroke, so it does not add height.
+   * Absorbing it into the bottom padding keeps the item at exactly its token
+   * height instead of 2px taller than every other variant.
+   */
+  padding-bottom: calc(
+    var(--ion-tabs-item-padding-y) - var(--border-width-thick)
+  );
+
+  /* Overlap the track's own border so the indicator replaces it rather than
+     stacking below it. */
+  margin-bottom: calc(-1 * var(--border-width-default));
+}
+
+/*
+ * Hover is declared twice, as on Button: `:hover` is pointer-guarded because
+ * native hover latches on touch, and `[data-hovered]` comes from React Aria's
+ * useHover, which is already pointer-aware.
+ */
+@media (hover: hover) {
+  .ion-tabs__item--underline:hover {
+    color: var(--text-default);
+  }
+}
+
+.ion-tabs__item--underline[data-hovered='true'] {
+  color: var(--text-default);
+}
+
+.ion-tabs__item--underline[data-selected='true'] {
+  color: var(--text-default);
+  border-bottom-color: var(--border-primary);
+}
+
+/* Pill item */
+.ion-tabs__item--pill {
+  color: var(--text-tertiary);
+  border-radius: var(--radius-full);
+}
+
+@media (hover: hover) {
+  .ion-tabs__item--pill:hover {
+    color: var(--text-default);
+    background-color: var(--surface-hover);
+  }
+}
+
+.ion-tabs__item--pill[data-hovered='true'] {
+  color: var(--text-default);
+  background-color: var(--surface-hover);
+}
+
+.ion-tabs__item--pill[data-selected='true'] {
+  color: var(--text-default);
+  background-color: var(--surface-default);
+}
+
+/*
+ * Selected *and* hovered — a composed state, which is why the token is named
+ * `hover-selected` in vocabulary order rather than `selected-hover`.
+ */
+@media (hover: hover) {
+  .ion-tabs__item--pill[data-selected='true']:hover {
+    background-color: var(--surface-page);
+  }
+}
+
+.ion-tabs__item--pill[data-selected='true'][data-hovered='true'] {
+  background-color: var(--surface-page);
+}
+
+/*
+ * Focus ring.
+ *
+ * Figma draws a 2px `border/brand/default/focus` stroke offset 2px outside the
+ * item, with a transparent gap. `outline` + `outline-offset` reproduces that
+ * exactly; a box-shadow cannot, because the gap would have to be painted in the
+ * backdrop colour and these items sit on a coloured pill track.
+ *
+ * Tabs previously borrowed Button's ring tokens. It has its own now.
+ */
+.ion-tabs__item:focus-visible,
+.ion-tabs__item[data-focused='true'] {
+  outline: var(--border-width-thick) solid var(--ring-focus);
+  outline-offset: var(--border-width-thick);
+}
+
+/* Underline items are square, but Figma rounds their focus ring to 8px. */
+.ion-tabs__item--underline:focus-visible,
+.ion-tabs__item--underline[data-focused='true'] {
+  border-radius: var(--radius-md);
+}
+
+/* Disabled */
+.ion-tabs__item[data-disabled='true'] {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+  background-color: transparent;
+}
+
+.ion-tabs__item--underline[data-disabled='true'] {
+  border-bottom-color: transparent;
+}
+
+/* Icons — one rule for every size; the slot is reassigned by the modifier. */
+.ion-tabs__item svg {
+  width: var(--ion-tabs-icon-size);
+  height: var(--ion-tabs-icon-size);
+  flex-shrink: 0;
+}
+
+/* Panel */
+.ion-tabs__panel:focus-visible {
+  outline: var(--border-width-thick) solid var(--ring-focus);
+  outline-offset: var(--border-width-thick);
+}