ionbase-ui 0.1.0

package/dist/styles/logo.css

@@ -0,0 +1,63 @@
+/*
+ * Logo
+ *
+ * Measured from Figma `Logo-Ionbase` (52:21369) — Small (24px mark) and Large
+ * (32px), each with two wordmark treatments.
+ *
+ * TWO WORDMARK KINDS, TWO DIFFERENT TYPEFACES, TWO DIFFERENT TOKENS
+ *
+ * Figma's `Type=Logo` draws the wordmark as outlined vector paths in a serif
+ * logotype — frozen brand artwork, bound to `icon/default`, same colour as
+ * the mark. `Type=Icon` draws it as live text in sans-serif Host Grotesk,
+ * bound to `text/tertiary` — one step lighter, the same text/icon split v2
+ * uses everywhere else. These are not the same word in two technologies; they
+ * are two different marks for two different contexts, confirmed by rendering
+ * both rather than assumed from Figma's node names. Both colours are kept
+ * distinct rather than unified under one `currentColor` flowing from the
+ * wrapper, because the tokens genuinely differ.
+ *
+ * ONE VALUE LEFT AS FIGMA DREW IT
+ *
+ * The Large text wordmark is unbound in Figma — 21.333px over a 32px
+ * line-height, exactly Small's 16/24 scaled by 4/3. Not on the font-size
+ * ladder, and not rounded here: rounding would make the live-text lockup a
+ * different size than the vector one sitting right next to it in Figma.
+ */
+.ion-logo {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-4);
+}
+
+.ion-logo--lg {
+  gap: var(--spacing-8);
+}
+
+.ion-logo__mark {
+  display: block;
+  flex-shrink: 0;
+  color: var(--icon-default);
+}
+
+.ion-logo__wordmark--vector {
+  display: block;
+  flex-shrink: 0;
+  color: var(--icon-default);
+}
+
+.ion-logo__wordmark--text {
+  color: var(--text-tertiary);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--type-body);
+  line-height: var(--type-body-line-height);
+  white-space: nowrap;
+}
+
+.ion-logo--lg .ion-logo__wordmark--text {
+  /* Figma's own unbound 4/3 scale of 16/24 — see the header. Written as
+   * arithmetic on type/body so the value stays a token expression, not a
+   * literal, even though the relationship itself is Figma's, not derived. */
+  font-size: calc(var(--type-body) * 4 / 3);
+  line-height: calc(var(--type-body-line-height) * 4 / 3);
+}

package/dist/styles/menu.css

@@ -0,0 +1,150 @@
+/*
+ * Menu
+ *
+ * Measured from Figma `Menu` (85:22440) and `Menu Item`.
+ *
+ *   menu   padding 6, gap 2, radius/xl, surface/default, 1px border/subtle
+ *   item   40 tall, padding 8/12, gap 8, radius/sm
+ *
+ * Figma models the list only — there is no trigger, popover or positioning in
+ * the design, so there is none here. This is the surface a menu renders on;
+ * anchoring it is the caller's job until Figma has a component that says
+ * otherwise.
+ *
+ * SELECTED-HOVER IS NOT SELECTED PLUS HOVER
+ *
+ * Figma's `Selected-hover` drops back to `surface/hover` and recolours the
+ * label to text/secondary — only the trailing check stays icon/primary. So
+ * hovering a selected row loses the primary tint rather than deepening it,
+ * which is the opposite of what composing the two states would produce. That is
+ * why hover is not a modifier layered on top of selected here.
+ */
+.ion-menu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding: var(--spacing-6);
+  background-color: var(--surface-default);
+  border-style: solid;
+  border-width: var(--border-width-default);
+  border-color: var(--border-subtle);
+  border-radius: var(--radius-xl);
+  font-family: var(--font-family-sans);
+  list-style: none;
+  margin: 0;
+}
+
+.ion-menu__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  min-height: var(--spacing-40);
+
+  /* No border on the item, so no border correction — unlike Input or Toggle. */
+  padding: var(--spacing-8) var(--spacing-12);
+  background-color: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-family: inherit;
+  font-size: var(--type-body);
+  line-height: var(--type-body-line-height);
+  font-weight: var(--font-weight-regular);
+  text-align: left;
+  width: 100%;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ion-menu__icon,
+.ion-menu__check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--icon-default);
+}
+
+.ion-menu__icon svg,
+.ion-menu__check svg {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+
+/* The check keeps its slot whether or not it is showing, so rows do not
+ * reflow as the selection moves down the list. */
+.ion-menu__check {
+  margin-left: auto;
+  visibility: hidden;
+}
+
+.ion-menu__label {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+@media (hover: hover) {
+  .ion-menu__item:hover {
+    background-color: var(--surface-hover);
+  }
+}
+
+.ion-menu__item[data-hovered='true'] {
+  background-color: var(--surface-hover);
+}
+
+.ion-menu__item--selected {
+  background-color: var(--surface-primary-subtle);
+  color: var(--text-primary);
+}
+
+.ion-menu__item--selected .ion-menu__icon,
+.ion-menu__item--selected .ion-menu__check {
+  color: var(--icon-primary);
+}
+
+.ion-menu__item--selected .ion-menu__check {
+  visibility: visible;
+}
+
+/* See the header — hovering a selected row drops the tint rather than deepening
+ * it. The check stays primary; everything else returns to the resting palette. */
+@media (hover: hover) {
+  .ion-menu__item--selected:hover {
+    background-color: var(--surface-hover);
+    color: var(--text-secondary);
+  }
+
+  .ion-menu__item--selected:hover .ion-menu__icon {
+    color: var(--icon-default);
+  }
+}
+
+.ion-menu__item--selected[data-hovered='true'] {
+  background-color: var(--surface-hover);
+  color: var(--text-secondary);
+}
+
+.ion-menu__item--selected[data-hovered='true'] .ion-menu__icon {
+  color: var(--icon-default);
+}
+
+.ion-menu__item:focus-visible {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: calc(-1 * var(--border-width-thick));
+}
+
+.ion-menu__item:disabled,
+.ion-menu__item[data-disabled='true'] {
+  background-color: transparent;
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+
+.ion-menu__item:disabled .ion-menu__icon,
+.ion-menu__item:disabled .ion-menu__check,
+.ion-menu__item[data-disabled='true'] .ion-menu__icon,
+.ion-menu__item[data-disabled='true'] .ion-menu__check {
+  color: var(--icon-disabled);
+}

package/dist/styles/nav-item.css

@@ -0,0 +1,120 @@
+/*
+ * Nav Item
+ *
+ * Measured from Figma `Nav Item` (70:22078). Two states only: Default, Hover.
+ *
+ * NO BACKGROUND ON HOVER — TEXT AND ICON RECOLOUR ONLY
+ *
+ * Unlike every other interactive surface in this system (Button, Menu Item,
+ * Table Row all paint `surface/hover` underneath), Nav Item's hover is
+ * `text/interactive/hover` and `icon/interactive/hover` and nothing else — no
+ * fill, no border. Reproduced as measured, not "fixed" to match the others:
+ * a primary nav bar sitting directly on the header's own surface has nothing
+ * to contrast a hover fill against without inventing a colour Figma never
+ * specified.
+ *
+ * A FOCUS RING FIGMA DOESN'T SHOW, ADDED ANYWAY
+ *
+ * Figma has no third state for keyboard focus. Every other interactive
+ * component in the system has one, so the same outline treatment is added
+ * here for the same reason Input's disabled state was — an interaction a
+ * real browser can reach that the static variant set doesn't enumerate isn't
+ * optional just because Figma has no swatch for it.
+ */
+.ion-nav-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  padding: var(--spacing-8);
+  background-color: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+  font-weight: var(--font-weight-regular);
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ion-nav-item__icon,
+.ion-nav-item__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--icon-tertiary);
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ion-nav-item__icon svg,
+.ion-nav-item__chevron svg {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+
+.ion-nav-item:focus-visible,
+.ion-nav-item[data-focused='true'] {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: 2px;
+}
+
+.ion-nav-item--disabled,
+.ion-nav-item[data-disabled='true'] {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+
+.ion-nav-item--disabled .ion-nav-item__icon,
+.ion-nav-item--disabled .ion-nav-item__chevron,
+.ion-nav-item[data-disabled='true'] .ion-nav-item__icon,
+.ion-nav-item[data-disabled='true'] .ion-nav-item__chevron {
+  color: var(--icon-disabled);
+}
+
+/*
+ * Every hover selector excludes disabled with one `:not()` argument list,
+ * rather than relying on disabled simply appearing earlier in the file. Both
+ * states target the same nested icon/chevron element at equal specificity
+ * (one qualifier + one descendant), so without the exclusion, source order
+ * alone would decide the winner — fragile, and the same shape of bug
+ * Checkbox's disabled/checked conflict already was. Excluding disabled from
+ * hover directly means the two can never collide regardless of file order;
+ * disabled is written above only because it is the simpler selector and
+ * stylelint wants specificity to read non-decreasing top to bottom.
+ */
+@media (hover: hover) {
+  .ion-nav-item:hover:not(.ion-nav-item--disabled, [data-disabled='true']) {
+    color: var(--text-interactive-hover);
+  }
+
+  .ion-nav-item:hover:not(.ion-nav-item--disabled, [data-disabled='true'])
+    .ion-nav-item__icon,
+  .ion-nav-item:hover:not(.ion-nav-item--disabled, [data-disabled='true'])
+    .ion-nav-item__chevron {
+    color: var(--icon-interactive-hover);
+  }
+}
+
+.ion-nav-item[data-hovered='true']:not(
+    .ion-nav-item--disabled,
+    [data-disabled='true']
+  ) {
+  color: var(--text-interactive-hover);
+}
+
+.ion-nav-item[data-hovered='true']:not(
+    .ion-nav-item--disabled,
+    [data-disabled='true']
+  )
+  .ion-nav-item__icon,
+.ion-nav-item[data-hovered='true']:not(
+    .ion-nav-item--disabled,
+    [data-disabled='true']
+  )
+  .ion-nav-item__chevron {
+  color: var(--icon-interactive-hover);
+}

package/dist/styles/radio.css

@@ -0,0 +1,200 @@
+/*
+ * Radio
+ *
+ * Measured from Figma `Radio` (18 variants: 3 colours x 3 sizes x 2 states).
+ *
+ * Same construction as Checkbox — hidden native input, styled sibling, outline
+ * for the focus ring — with three differences Figma is explicit about:
+ *
+ *   - the indicator is a circle (radius/full), not a rounded square
+ *   - the selected mark is a filled dot, not a glyph, so it scales with the box
+ *   - there is no disabled variant in the design; disabled is handled here
+ *     anyway, because a form can always disable a field and the component must
+ *     not fall back to looking enabled
+ *
+ * THE DOT IS DERIVED
+ *
+ * The dot is 6 / 8 / 10 against indicators of 16 / 20 / 24. 10 is on no ladder —
+ * spacing jumps 8 to 12 — but it follows from the box:
+ *
+ *     dot = box / 2 - 2       16->6   20->8   24->10
+ *
+ * So nothing here reaches for the raw `scale/*` ramp, and the dot stays in
+ * proportion if a size is ever retuned.
+ */
+.ion-radio {
+  --ion-radio-size: var(--spacing-20);
+  --ion-radio-gap: var(--spacing-8);
+  --ion-radio-font-size: var(--type-body);
+  --ion-radio-line-height: var(--type-body-line-height);
+  --ion-radio-fill: var(--surface-primary);
+  --ion-radio-border: var(--border-primary-strong);
+
+  /* Bevelled when selected — flush, size-indexed. Same rungs as Checkbox. */
+  --ion-radio-raised: var(--ion-shadow-raised-flush-sm);
+
+  /* Derived — see the header. */
+  --ion-radio-dot: calc(var(--ion-radio-size) / 2 - var(--spacing-2));
+
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--ion-radio-gap);
+  font-family: var(--font-family-sans);
+  font-size: var(--ion-radio-font-size);
+  line-height: var(--ion-radio-line-height);
+  cursor: pointer;
+}
+
+.ion-radio--sm {
+  --ion-radio-size: var(--spacing-16);
+  --ion-radio-font-size: var(--type-body-sm);
+  --ion-radio-line-height: var(--type-body-sm-line-height);
+  --ion-radio-raised: var(--ion-shadow-raised-flush-xs);
+}
+
+.ion-radio--lg {
+  --ion-radio-size: var(--spacing-24);
+  --ion-radio-gap: var(--spacing-12);
+  --ion-radio-raised: var(--ion-shadow-raised-flush-lg);
+}
+
+.ion-radio__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ion-radio__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--ion-radio-size);
+  height: var(--ion-radio-size);
+  background-color: var(--surface-default);
+  border-style: solid;
+
+  /*
+   * The EMPTY circle carries the heavier border: 2px `border/stronger`, where
+   * the selected one drops to 1px of its intent colour. Same reasoning as
+   * Checkbox — an unselected control is nothing but its outline, so it has to
+   * hold the row on its own; once filled, the fill does that work.
+   *
+   * Figma strokes this INSIDE, and the global `box-sizing: border-box` in
+   * index.css is what reproduces it: the circle stays 16/20/24 and the border
+   * eats inward instead of growing the control.
+   */
+  border-width: var(--border-width-thick);
+  border-color: var(--border-stronger);
+  border-radius: var(--radius-full);
+
+  /* Centred on the label's first line — see checkbox.css. */
+  margin-top: calc((var(--ion-radio-line-height) - var(--ion-radio-size)) / 2);
+  transition:
+    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ion-radio__dot {
+  width: var(--ion-radio-dot);
+  height: var(--ion-radio-dot);
+  background-color: var(--icon-on-color);
+  border-radius: var(--radius-full);
+
+  /* Hidden rather than unmounted so selecting never reflows the row. */
+  opacity: 0;
+}
+
+.ion-radio__label {
+  color: var(--text-secondary);
+  user-select: none;
+}
+
+.ion-radio__input:checked + .ion-radio__indicator {
+  /* Back to 1px — see the indicator's border comment. */
+  border-width: var(--border-width-default);
+  background-color: var(--ion-radio-fill);
+  border-color: var(--ion-radio-border);
+
+  /* Only the selected dot is bevelled; an empty circle stays flat. */
+  box-shadow: var(--ion-radio-raised);
+}
+
+.ion-radio__input:checked + .ion-radio__indicator .ion-radio__dot {
+  opacity: 1;
+}
+
+.ion-radio--neutral {
+  --ion-radio-fill: var(--surface-inverse);
+  --ion-radio-border: var(--border-inverse);
+}
+
+.ion-radio--danger {
+  --ion-radio-fill: var(--surface-error);
+  --ion-radio-border: var(--border-error-strong);
+}
+
+.ion-radio__input:focus-visible + .ion-radio__indicator,
+.ion-radio[data-focused='true'] .ion-radio__indicator {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: 0;
+}
+
+/* Driven off `:disabled` so it out-specifies `:checked` — see checkbox.css. */
+.ion-radio__input:disabled + .ion-radio__indicator,
+.ion-radio__input:checked:disabled + .ion-radio__indicator {
+  background-color: var(--surface-disabled);
+  border-color: var(--border-disabled);
+
+  /*
+   * NOT MEASURED — mirrored from Checkbox. Radio's variant set has only
+   * Unselected and Selected, so Figma says nothing about a disabled border
+   * width. Checkbox does have the variants and keeps 2px in all three disabled
+   * states, so Radio follows it rather than inheriting 1px from `:checked` by
+   * accident of specificity. Restated here for the same reason Checkbox has to:
+   * `:checked` sets 1px, and only the compound `:checked:disabled` beats it.
+   */
+  border-width: var(--border-width-thick);
+
+  /* Flat whether or not it is selected. */
+  box-shadow: none;
+}
+
+.ion-radio__input:disabled + .ion-radio__indicator .ion-radio__dot {
+  background-color: var(--icon-disabled);
+}
+
+.ion-radio--disabled,
+.ion-radio[data-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.ion-radio--disabled .ion-radio__label,
+.ion-radio[data-disabled='true'] .ion-radio__label {
+  color: var(--text-disabled);
+}
+
+/* The group stacks its radios; Figma has no group component, so this is the
+ * minimum a fieldset needs rather than an invented layout. */
+.ion-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ion-radio-group__label {
+  color: var(--text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+  font-weight: var(--font-weight-medium);
+  padding: 0;
+}

package/dist/styles/scroll-progress.css

@@ -0,0 +1,171 @@
+/*
+ * Scroll Progress
+ *
+ * Measured from Figma `Line` / `Progress` / `Progress Heading` (191:927).
+ *
+ * FIGMA SPECIFIES STATES, NOT SCROLL-TRACKING
+ *
+ * The "32%" and the one heavier tick in Figma's mockup are just that variant's
+ * static content — evidence of what the rail looks like at some scroll
+ * position, not a scroll-tracking algorithm to reproduce. This component
+ * takes `progress` and `activeId` as props for the same reason Select takes
+ * `value` rather than reading a DOM scroll position itself: which container
+ * scrolls, whether the page is one document or many, and how "the active
+ * section" is defined are all facts only the consuming app has.
+ *
+ * TICKS ARE 2px, NOT 1px — MEASURED, NOT A TYPO
+ *
+ * Figma's `Line` stroke is 2, `border-width/thick`, not `/default`. Easy to
+ * misread as a mistake since every hairline elsewhere in the system is 1px;
+ * checked against the node rather than assumed.
+ *
+ * THE FLYOUT IS A DISCLOSURE, NOT A MENU
+ *
+ * No `role="menu"` here, for the same reason `Menu` itself doesn't claim one:
+ * that role promises roving-tabindex arrow-key navigation and typeahead, and
+ * this component doesn't implement either — its rows sit in normal tab order.
+ * The trigger/panel pair follows the WAI-ARIA Disclosure pattern instead:
+ * `aria-expanded` + `aria-controls`, nothing more elaborate.
+ *
+ * REVEAL TRANSITION IS DELIBERATELY PLAIN
+ *
+ * Opacity and an 8px slide, the same 150ms/cubic-bezier(0.4,0,0.2,1) language
+ * every hover state in the system already uses. The deeper choreography this
+ * component could eventually justify — a staggered reveal per row, easing
+ * that matches the rail's own scale — is future work, tracked in
+ * docs/motion-system.md, not invented here ahead of that decision.
+ */
+.ion-scroll-progress {
+  position: relative;
+  display: inline-flex;
+}
+
+.ion-scroll-progress__trigger {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-8);
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.ion-scroll-progress__trigger:focus-visible {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: 2px;
+}
+
+.ion-scroll-progress__percent {
+  color: var(--text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ion-scroll-progress__rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-12);
+}
+
+.ion-scroll-progress__tick {
+  width: var(--spacing-32);
+  height: var(--border-width-thick);
+  background-color: var(--border-strong);
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ion-scroll-progress__tick--active {
+  background-color: var(--border-stronger);
+}
+
+@media (hover: hover) {
+  .ion-scroll-progress__trigger:hover .ion-scroll-progress__percent {
+    color: var(--text-secondary);
+  }
+}
+
+.ion-scroll-progress__trigger[data-hovered='true']
+  .ion-scroll-progress__percent {
+  color: var(--text-secondary);
+}
+
+/*
+ * Hidden via visibility + opacity, not `display: none` — the transition needs
+ * a property to animate, and `visibility` still pulls the panel's buttons out
+ * of tab order and the accessibility tree while closed, same as a native
+ * `<details>` collapses its content.
+ */
+.ion-scroll-progress__panel {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
+  min-width: 220px;
+  padding: var(--spacing-8);
+  background-color: var(--surface-default);
+  border: var(--border-width-default) solid var(--border-default);
+  border-radius: var(--radius-md);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(-50%) translateX(-4px);
+  transition:
+    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    visibility 150ms;
+}
+
+.ion-scroll-progress__panel[data-open='true'] {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(-50%) translateX(0);
+}
+
+.ion-scroll-progress__heading {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-2) var(--spacing-8);
+  background-color: transparent;
+  border: var(--border-width-default) solid transparent;
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+  font-weight: var(--font-weight-regular);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (hover: hover) {
+  .ion-scroll-progress__heading:hover {
+    background-color: var(--surface-muted);
+    border-color: var(--border-strong);
+  }
+}
+
+.ion-scroll-progress__heading[data-hovered='true'] {
+  background-color: var(--surface-muted);
+  border-color: var(--border-strong);
+}
+
+.ion-scroll-progress__heading--selected {
+  background-color: var(--surface-muted);
+}
+
+.ion-scroll-progress__heading:focus-visible {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: -1px;
+}