ionbase-ui 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * ionbase-ui — the whole design system in one package.
+ *
+ * Components, the icon wrapper, the stylesheets and the generated design
+ * tokens all ship from here. There is deliberately no second package: every
+ * release moved the four old ones in lockstep, so the split cost four
+ * manifests and a cross-package CSS import while buying no independent
+ * versioning.
+ *
+ *   import 'ionbase-ui/styles';            // tokens + components, one import
+ *   import { Button, Icon } from 'ionbase-ui';
+ *
+ * Icons are not bundled. `Icon` takes the icon as a prop, so any SVG component
+ * works — lucide-react, heroicons, react-icons, your own. See ./Icon.tsx.
+ */
+export * from './components/index.js';
+export { Icon } from './Icon.js';
+export type { IconProps, IconSize } from './Icon.js';
+/**
+ * Generated token values, as `var(--…)` references. Copied in from the token
+ * pipeline at build time by scripts/sync-tokens.mjs — never hand-edited, and
+ * git-ignored, because Figma owns these names and values.
+ */
+export * as tokens from './tokens/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAErD;;;;GAIG;AACH,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,24 @@
+/**
+ * ionbase-ui — the whole design system in one package.
+ *
+ * Components, the icon wrapper, the stylesheets and the generated design
+ * tokens all ship from here. There is deliberately no second package: every
+ * release moved the four old ones in lockstep, so the split cost four
+ * manifests and a cross-package CSS import while buying no independent
+ * versioning.
+ *
+ *   import 'ionbase-ui/styles';            // tokens + components, one import
+ *   import { Button, Icon } from 'ionbase-ui';
+ *
+ * Icons are not bundled. `Icon` takes the icon as a prop, so any SVG component
+ * works — lucide-react, heroicons, react-icons, your own. See ./Icon.tsx.
+ */
+export * from './components/index.js';
+export { Icon } from './Icon.js';
+/**
+ * Generated token values, as `var(--…)` references. Copied in from the token
+ * pipeline at build time by scripts/sync-tokens.mjs — never hand-edited, and
+ * git-ignored, because Figma owns these names and values.
+ */
+export * as tokens from './tokens/index.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAGjC;;;;GAIG;AACH,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC"}

package/dist/styles/avatar.css

@@ -0,0 +1,138 @@
+/*
+ * Avatar
+ *
+ * Measured from Figma `Avatar` (77:22248) and `Avatar Group`.
+ *
+ *   mini    24   type 12/18   icon 12   square radius/xs
+ *   small   32   type 14/20   icon 16   square radius/sm
+ *   medium  40   type 16/24   icon 20   square radius/md
+ *   large   48   type 20/32   icon 24   square radius/md
+ *
+ * Circle is radius/full at every size; square steps up with the box, which is
+ * concentric-corner arithmetic rather than one shared corner.
+ *
+ * Surface is surface/muted with a 1px border/strong at every size and type —
+ * the border is what separates overlapping avatars in a group, so it is not
+ * decoration and must not be dropped.
+ */
+.ion-avatar {
+  --ion-avatar-size: var(--spacing-40);
+  --ion-avatar-radius: var(--radius-md);
+  --ion-avatar-font-size: var(--type-body);
+  --ion-avatar-line-height: var(--type-body-line-height);
+  --ion-avatar-icon: var(--icon-size-md);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  width: var(--ion-avatar-size);
+  height: var(--ion-avatar-size);
+  background-color: var(--surface-muted);
+  border-style: solid;
+  border-width: var(--border-width-default);
+  border-color: var(--border-strong);
+  border-radius: var(--ion-avatar-radius);
+  color: var(--text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--ion-avatar-font-size);
+  line-height: var(--ion-avatar-line-height);
+  font-weight: var(--font-weight-medium);
+  user-select: none;
+}
+
+.ion-avatar--mini {
+  --ion-avatar-size: var(--spacing-24);
+  --ion-avatar-radius: var(--radius-xs);
+  --ion-avatar-font-size: var(--type-caption);
+  --ion-avatar-line-height: var(--type-caption-line-height);
+  --ion-avatar-icon: var(--icon-size-xs);
+}
+
+.ion-avatar--sm {
+  --ion-avatar-size: var(--spacing-32);
+  --ion-avatar-radius: var(--radius-sm);
+  --ion-avatar-font-size: var(--type-body-sm);
+  --ion-avatar-line-height: var(--type-body-sm-line-height);
+  --ion-avatar-icon: var(--icon-size-sm);
+}
+
+/* Large shares Medium's corner — the square ladder stops climbing at radius/md. */
+.ion-avatar--lg {
+  --ion-avatar-size: var(--spacing-48);
+  --ion-avatar-font-size: var(--type-h5);
+  --ion-avatar-line-height: var(--type-h5-line-height);
+  --ion-avatar-icon: var(--icon-size-lg);
+}
+
+.ion-avatar--circle {
+  --ion-avatar-radius: var(--radius-full);
+}
+
+/* The image fills the box and is cropped by `overflow: hidden` on the parent,
+ * so it inherits the corner without repeating it. */
+.ion-avatar__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.ion-avatar__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--icon-tertiary);
+}
+
+.ion-avatar__icon svg {
+  width: var(--ion-avatar-icon);
+  height: var(--ion-avatar-icon);
+}
+
+/*
+ * Avatar Group
+ *
+ * Figma overlaps the avatars with a NEGATIVE gap: -6 / -8 / -10 / -12, which is
+ * a quarter of each avatar's size. Negative space cannot be a spacing token —
+ * the scale has no negative rungs and inventing them to express overlap would
+ * be worse than the arithmetic. So the overlap is derived from the size, the
+ * same way the toggle's track is.
+ *
+ * STACKING DIRECTION IS FIGMA'S, AND IT IS THE LESS OBVIOUS ONE
+ *
+ * Each avatar paints OVER the one before it, so the last in the list — usually
+ * the `+N` overflow — sits on top. The first attempt here reversed the row to
+ * put the first avatar on top, which is the more common convention elsewhere
+ * and is not what this design does. Rendering in natural order gives Figma's
+ * order for free: later siblings paint later, so no z-index is needed at all.
+ */
+.ion-avatar-group {
+  --ion-avatar-group-overlap: calc(-1 * var(--ion-avatar-size) / 4);
+
+  display: inline-flex;
+  align-items: center;
+}
+
+.ion-avatar-group > * + * {
+  margin-left: var(--ion-avatar-group-overlap);
+}
+
+/* The group publishes its size to the children so the overlap and the avatars
+ * agree without the caller setting both. */
+.ion-avatar-group--mini {
+  --ion-avatar-size: var(--spacing-24);
+}
+
+.ion-avatar-group--sm {
+  --ion-avatar-size: var(--spacing-32);
+}
+
+.ion-avatar-group--md {
+  --ion-avatar-size: var(--spacing-40);
+}
+
+.ion-avatar-group--lg {
+  --ion-avatar-size: var(--spacing-48);
+}

package/dist/styles/badge.css

@@ -0,0 +1,125 @@
+/*
+ * Badge
+ *
+ * Geometry measured from Figma `Badge` (152:73). Single size, six intents.
+ *
+ * v2: Badge owns no tokens. Every value here is an Interface token, a Semantics
+ * token, or a spacing primitive — the same ones the Figma component binds, so
+ * the two cannot drift. Badge is 20px tall, below control/sm's 32px, so it is
+ * not a control and does not read the control scale.
+ */
+.ion-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  /*
+   * Figma's 1px stroke is drawn INSIDE the box, so it does not add height. A CSS
+   * border does, so the vertical padding absorbs it — otherwise the badge
+   * renders 2px taller than the design. Same correction as the Tabs underline
+   * indicator. Badge is 22px: padding 2 + caption line-height 18 + padding 2.
+   */
+  padding: calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-8);
+  gap: var(--spacing-4);
+  font-family: var(--font-family-sans);
+
+  /*
+   * Medium, not semibold. Figma's Badge label is Host Grotesk Medium; this was
+   * semibold in code and is the only typographic mismatch the measurement found.
+   */
+  font-weight: var(--font-weight-medium);
+  font-size: var(--type-caption);
+  line-height: var(--type-caption-line-height);
+  border-radius: var(--radius-full);
+  border-width: var(--border-width-default);
+  border-style: solid;
+  user-select: none;
+  white-space: nowrap;
+}
+
+/*
+ * Dot marker. It tracks the label exactly, so `currentcolor` is right — Figma
+ * binds it to the same token the label uses.
+ */
+.ion-badge__dot {
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  border-radius: var(--radius-full);
+  background-color: currentcolor;
+  flex-shrink: 0;
+}
+
+/*
+ * The icon does NOT track the label. v2 splits `fg` into `text` and `icon`
+ * precisely so an icon can sit a step brighter than the copy beside it — for
+ * error that is #dc2828 against the label's #ba1c1c. `@ionbase-ui/icons` renders
+ * with `currentColor`, so each intent sets `color` on the svg directly.
+ *
+ * Icon size is deliberately not set here. Figma has it at 14px, which is not on
+ * the spacing scale, so it is most likely a slip rather than a decision. Until
+ * that is settled the icon inherits 1em, matching the 12px label.
+ */
+.ion-badge svg {
+  flex-shrink: 0;
+}
+
+/* Intent modifiers */
+.ion-badge--neutral {
+  background-color: var(--surface-muted);
+  color: var(--text-secondary);
+  border-color: var(--border-default);
+}
+
+.ion-badge--neutral svg {
+  color: var(--icon-secondary);
+}
+
+.ion-badge--primary {
+  background-color: var(--surface-primary-subtle);
+  color: var(--text-link);
+  border-color: var(--border-primary-subtle);
+}
+
+.ion-badge--primary svg {
+  color: var(--icon-primary);
+}
+
+.ion-badge--success {
+  background-color: var(--surface-success-subtle);
+  color: var(--text-success);
+  border-color: var(--border-success-subtle);
+}
+
+.ion-badge--success svg {
+  color: var(--icon-success);
+}
+
+.ion-badge--warning {
+  background-color: var(--surface-warning-subtle);
+  color: var(--text-warning);
+  border-color: var(--border-warning-subtle);
+}
+
+.ion-badge--warning svg {
+  color: var(--icon-warning);
+}
+
+.ion-badge--error {
+  background-color: var(--surface-error-subtle);
+  color: var(--text-error);
+  border-color: var(--border-error-subtle);
+}
+
+.ion-badge--error svg {
+  color: var(--icon-error);
+}
+
+.ion-badge--information {
+  background-color: var(--surface-information-subtle);
+  color: var(--text-information);
+  border-color: var(--border-information-subtle);
+}
+
+.ion-badge--information svg {
+  color: var(--icon-information);
+}

package/dist/styles/button.css

@@ -0,0 +1,331 @@
+/*
+ * Button
+ *
+ * The focus ring and the elevation are two independent slots composed into one
+ * box-shadow, rather than separate rules racing on specificity. A variant sets
+ * its elevation, `:focus-visible` sets its ring, and neither has to know about
+ * the other — otherwise `--primary-brand:active` (0,2,0) and `:focus-visible`
+ * (0,2,0) tie, and whichever is written last silently wins.
+ *
+ * Ring and elevation both come from elevation.css, generated from the Figma
+ * effect styles. Those are not variable-bound and so cannot be tokens — there
+ * is nothing for them to alias — which is why the values are exported and
+ * committed instead of aliased.
+ */
+.ion-button {
+  --ion-button-ring: var(--ion-shadow-none);
+  --ion-button-elevation: var(--ion-shadow-none);
+
+  /*
+   * ELEVATION IS INDEXED BY SIZE, NOT BY VARIANT
+   *
+   * Measured: Primary Brand, Primary Neutral, Secondary and Destructive all sit
+   * on the same rung at a given size — Small is `xs`, Medium `sm`, Large `lg`.
+   * The variant chooses only the *family* it presses into, so these are slots
+   * the size modifiers reassign and the variants select from. This replaces the
+   * old per-variant `button-raised` / `button-surface` pair, which encoded a
+   * distinction Figma no longer draws.
+   */
+  --ion-button-raised: var(--ion-shadow-raised-lifted-sm);
+  --ion-button-inset-lifted: var(--ion-shadow-inset-lifted-sm);
+  --ion-button-inset-flush: var(--ion-shadow-inset-flush-sm);
+
+  /* Which inset family this variant presses into; overridden per variant. */
+  --ion-button-pressed: var(--ion-button-inset-lifted);
+
+  /*
+   * Size is a set of slots defaulting to medium, so a size modifier reassigns
+   * four variables instead of restating four declarations. It also means the
+   * icon rule below needs no per-size overrides at all.
+   *
+   * These read the spacing scale directly. They used to read a `control/*`
+   * group in Semantics, which was deleted: its twelve tokens were all aliases
+   * of these same spacing steps, its icon sizes duplicated the `icon-size`
+   * ladder outright, and only Button and Tabs ever bound it — because it had
+   * been derived from Button's own measurements and fitted nothing else.
+   *
+   * 32/40/48 and 12/16/20 are Button's choices, not a system-wide rule. The
+   * spacing scale is what everything shares; which rung you pick is yours.
+   */
+  --ion-button-size: var(--spacing-40);
+  --ion-button-padding-x: var(--spacing-16);
+  --ion-button-gap: var(--spacing-8);
+  --ion-button-icon-size: var(--icon-size-md);
+
+  /*
+   * Typography comes from the type ramp, not from button tokens. In Figma the
+   * Label carries a text style — Body/Default Emphasis at Medium, Body/Small
+   * Emphasis at Small, Body/Medium Emphasis at Large — and a text style owns
+   * fontSize/fontStyle/lineHeight outright. Button-level type tokens were
+   * tried and deleted: they are a second source of truth that the text style
+   * silently overrides, so they can never win.
+   *
+   * Weight is Medium (500) across all three sizes — the Emphasis body styles.
+   */
+  --ion-button-font-size: var(--type-body);
+  --ion-button-line-height: var(--type-body-line-height);
+
+  box-shadow: var(--ion-button-ring), var(--ion-button-elevation);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  /*
+   * Figma pins each size to a fixed height (32/40/48) with no vertical padding.
+   * `min-height` reproduces that while still growing if a label ever wraps —
+   * deriving height from padding instead is what left all three sizes 2px off.
+   */
+  min-height: var(--ion-button-size);
+  padding-left: var(--ion-button-padding-x);
+  padding-right: var(--ion-button-padding-x);
+  gap: var(--ion-button-gap);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--ion-button-font-size);
+  line-height: var(--ion-button-line-height);
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  border-style: solid;
+  border-width: var(--border-width-default);
+  border-radius: var(--radius-md);
+  transition:
+    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Size modifiers — radius, border-width and font-weight are size-invariant. */
+.ion-button--sm {
+  --ion-button-size: var(--spacing-32);
+  --ion-button-padding-x: var(--spacing-12);
+  --ion-button-gap: var(--spacing-6);
+  --ion-button-icon-size: var(--icon-size-sm);
+  --ion-button-font-size: var(--type-body-sm);
+  --ion-button-line-height: var(--type-body-sm-line-height);
+  --ion-button-raised: var(--ion-shadow-raised-lifted-xs);
+  --ion-button-inset-lifted: var(--ion-shadow-inset-lifted-xs);
+  --ion-button-inset-flush: var(--ion-shadow-inset-flush-xs);
+}
+
+.ion-button--lg {
+  --ion-button-size: var(--spacing-48);
+  --ion-button-padding-x: var(--spacing-20);
+  --ion-button-gap: var(--spacing-8);
+  --ion-button-icon-size: var(--icon-size-lg);
+  --ion-button-font-size: var(--type-body-md);
+  --ion-button-line-height: var(--type-body-md-line-height);
+  --ion-button-raised: var(--ion-shadow-raised-lifted-lg);
+  --ion-button-inset-lifted: var(--ion-shadow-inset-lifted-lg);
+  --ion-button-inset-flush: var(--ion-shadow-inset-flush-lg);
+}
+
+/*
+ * Focus ring — one ring for every variant and size, from the Figma `Focus/md`
+ * effect style.
+ *
+ * There used to be two, `Button/Raised Focus` and `Button/Surface Focus`, with
+ * secondary and tertiary opting into the second. They were byte-identical: two
+ * names over one value, which is why they collapsed into `Focus/md` and why
+ * there is no per-variant ring slot here any more.
+ *
+ * Before that they were assembled from `--button-offset-ring` / `--button-ring`,
+ * component tokens hand-mapped to the nearest solid semantic colour. That made
+ * the outer ring fully opaque where Figma renders it at 50% alpha, and nothing
+ * caught it: effect styles are not variable-bound, so the token pipeline cannot
+ * see them at all.
+ */
+.ion-button:focus-visible,
+.ion-button[data-focused='true'] {
+  --ion-button-ring: var(--ion-shadow-focus-md);
+
+  outline: none;
+}
+
+/*
+ * Hover is declared twice per variant, on purpose.
+ *
+ * `:hover` is wrapped in `@media (hover: hover)` because native hover latches
+ * on touch — tap a button and it stays visually hovered until you tap
+ * elsewhere. `[data-hovered]` comes from React Aria's useHover, which is
+ * already pointer-aware. The media query keeps the stylesheet working without
+ * React; the attribute makes it correct with it.
+ *
+ * HOVER DOES NOT CHANGE ELEVATION — only the surface colour moves. Measured:
+ * every Hover variant in Figma carries the same effect style as its Default,
+ * across all four elevated types. Reproduced as measured rather than preserved
+ * from the old `button-raised-hover` step, which encodes a difference the
+ * current design no longer draws.
+ */
+
+/* Primary Brand Variant */
+.ion-button--primary-brand {
+  --ion-button-elevation: var(--ion-button-raised);
+
+  background-color: var(--surface-primary);
+  color: var(--text-on-color);
+  border-color: var(--border-primary-strong);
+}
+
+@media (hover: hover) {
+  .ion-button--primary-brand:hover {
+    background-color: var(--surface-primary-hover);
+  }
+}
+
+.ion-button--primary-brand[data-hovered='true'] {
+  background-color: var(--surface-primary-hover);
+}
+
+.ion-button--primary-brand:active,
+.ion-button--primary-brand[data-pressed='true'] {
+  --ion-button-elevation: var(--ion-button-pressed);
+
+  background-color: var(--surface-primary-pressed);
+}
+
+/*
+ * Primary Neutral Variant
+ *
+ * The one variant whose press does NOT track its own rung: Figma pins all three
+ * sizes to `Inset/Flush/lg` while their rest states scale xs/sm/lg like every
+ * other type. Reproduced as measured, not normalised — but flagged, because it
+ * is the only place in the component where size stops mattering, and it reads
+ * more like an unfinished edit than a decision.
+ */
+.ion-button--primary-neutral {
+  --ion-button-elevation: var(--ion-button-raised);
+  --ion-button-pressed: var(--ion-shadow-inset-flush-lg);
+
+  background-color: var(--surface-inverse);
+  color: var(--text-on-color);
+  border-color: var(--border-inverse);
+}
+
+@media (hover: hover) {
+  .ion-button--primary-neutral:hover {
+    background-color: var(--surface-inverse);
+  }
+}
+
+.ion-button--primary-neutral[data-hovered='true'] {
+  background-color: var(--surface-inverse);
+}
+
+.ion-button--primary-neutral:active,
+.ion-button--primary-neutral[data-pressed='true'] {
+  --ion-button-elevation: var(--ion-button-pressed);
+
+  background-color: var(--surface-inverse);
+}
+
+/* Secondary Variant — presses flush, losing its lift; brand and destructive keep theirs. */
+.ion-button--secondary {
+  --ion-button-elevation: var(--ion-button-raised);
+  --ion-button-pressed: var(--ion-button-inset-flush);
+
+  background-color: var(--surface-default);
+  color: var(--text-secondary);
+  border-color: var(--border-strong);
+}
+
+@media (hover: hover) {
+  .ion-button--secondary:hover {
+    background-color: var(--surface-page);
+    border-color: var(--border-stronger);
+  }
+}
+
+.ion-button--secondary[data-hovered='true'] {
+  background-color: var(--surface-page);
+  border-color: var(--border-stronger);
+}
+
+.ion-button--secondary:active,
+.ion-button--secondary[data-pressed='true'] {
+  --ion-button-elevation: var(--ion-button-pressed);
+
+  background-color: var(--surface-muted);
+}
+
+/* Tertiary Variant — intentionally flat; a ghost button has no surface to raise. */
+.ion-button--tertiary {
+  background-color: transparent;
+  color: var(--text-secondary);
+  border-color: transparent;
+}
+
+@media (hover: hover) {
+  .ion-button--tertiary:hover {
+    background-color: var(--surface-page);
+  }
+}
+
+.ion-button--tertiary[data-hovered='true'] {
+  background-color: var(--surface-page);
+}
+
+.ion-button--tertiary:active,
+.ion-button--tertiary[data-pressed='true'] {
+  background-color: var(--surface-muted);
+}
+
+/* Destructive Variant */
+.ion-button--destructive {
+  --ion-button-elevation: var(--ion-button-raised);
+
+  background-color: var(--surface-error);
+  color: var(--text-on-color);
+  border-color: var(--border-error-strong);
+}
+
+@media (hover: hover) {
+  .ion-button--destructive:hover {
+    background-color: var(--surface-error-hover);
+  }
+}
+
+.ion-button--destructive[data-hovered='true'] {
+  background-color: var(--surface-error-hover);
+}
+
+.ion-button--destructive:active,
+.ion-button--destructive[data-pressed='true'] {
+  --ion-button-elevation: var(--ion-button-pressed);
+
+  background-color: var(--surface-error-pressed);
+}
+
+/* Disabled State */
+.ion-button:disabled,
+.ion-button[data-disabled='true'] {
+  --ion-button-ring: var(--ion-shadow-none);
+  --ion-button-elevation: var(--ion-shadow-none);
+
+  background-color: var(--surface-disabled);
+  color: var(--text-disabled);
+  border-color: var(--border-disabled);
+  cursor: not-allowed;
+}
+
+.ion-button--tertiary:disabled,
+.ion-button--tertiary[data-disabled='true'] {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+/* Icon Containers & Alignment */
+.ion-button__icon-start,
+.ion-button__icon-end {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* One rule for every size — the slot is reassigned by the size modifier. */
+.ion-button__icon-start svg,
+.ion-button__icon-end svg {
+  width: var(--ion-button-icon-size);
+  height: var(--ion-button-icon-size);
+}