@inkra/react 0.3.0 → 0.5.0

package/dist/styles/node-graph.css

@@ -0,0 +1,142 @@
+.inkra-node-graph {
+  position: relative;
+  isolation: isolate;
+  inline-size: 100%;
+  min-inline-size: 0;
+  block-size: min(68vh, 620px);
+  min-block-size: 320px;
+  overflow: hidden;
+  color: var(--inkra-ink);
+  background: color-mix(in srgb, var(--inkra-paper) 92%, transparent);
+  border-radius: var(--inkra-radius-lg);
+}
+
+.inkra-node-graph .react-flow {
+  position: relative;
+  z-index: 0;
+  overflow: hidden;
+  direction: inherit;
+  inline-size: 100%;
+  block-size: 100%;
+  background: transparent;
+  --xy-edge-stroke: var(--inkra-ink-muted);
+  --xy-edge-stroke-selected: var(--inkra-accent-strong);
+  --xy-connectionline-stroke: var(--inkra-accent-strong);
+  --xy-selection-background-color: color-mix(in srgb, var(--inkra-selection-pigment) 13%, transparent);
+  --xy-selection-border: 0;
+}
+
+.inkra-node-graph .react-flow__container { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
+.inkra-node-graph .react-flow__pane { z-index: 1; touch-action: none; }
+.inkra-node-graph .react-flow__pane.draggable { cursor: grab; }
+.inkra-node-graph .react-flow__pane.dragging { cursor: grabbing; }
+.inkra-node-graph .react-flow__pane.selection { cursor: pointer; }
+.inkra-node-graph .react-flow__viewport { position: absolute; inset: 0; z-index: 2; transform-origin: 0 0; pointer-events: none; }
+.inkra-node-graph .react-flow__renderer { z-index: 4; }
+.inkra-node-graph .react-flow__edges { position: absolute; }
+.inkra-node-graph .react-flow__edges svg { position: absolute; overflow: visible; pointer-events: none; }
+.inkra-node-graph .react-flow__edge { pointer-events: visibleStroke; }
+.inkra-node-graph .react-flow__edge.selectable { cursor: pointer; }
+.inkra-node-graph .react-flow__edge.inactive { pointer-events: none; }
+.inkra-node-graph .react-flow__edge:focus,
+.inkra-node-graph .react-flow__edge:focus-visible { outline: none; }
+.inkra-node-graph svg.react-flow__connectionline { position: absolute; z-index: 8; overflow: visible; pointer-events: none; }
+.inkra-node-graph .react-flow__nodes { pointer-events: none; transform-origin: 0 0; }
+.inkra-node-graph .react-flow__node { position: absolute; box-sizing: border-box; transform-origin: 0 0; pointer-events: all; user-select: none; }
+.inkra-node-graph .react-flow__node.selectable { cursor: pointer; }
+.inkra-node-graph .react-flow__node.draggable { cursor: grab; }
+.inkra-node-graph .react-flow__node.draggable.dragging { cursor: grabbing; }
+.inkra-node-graph .react-flow__node:focus { outline: none; }
+.inkra-node-graph .react-flow__nodesselection { z-index: 3; transform-origin: left top; pointer-events: none; }
+.inkra-node-graph .react-flow__nodesselection-rect { position: absolute; pointer-events: all; cursor: grab; }
+.inkra-node-graph .react-flow__nodesselection-rect:focus,
+.inkra-node-graph .react-flow__nodesselection-rect:focus-visible { outline: none; }
+.inkra-node-graph .react-flow__selection { z-index: 6; }
+.inkra-node-graph .react-flow__panel { position: absolute; z-index: 7; margin: var(--inkra-space-3); }
+.inkra-node-graph .react-flow__panel.top { inset-block-start: 0; }
+.inkra-node-graph .react-flow__panel.bottom { inset-block-end: 0; }
+.inkra-node-graph .react-flow__panel.left { inset-inline-start: 0; }
+.inkra-node-graph .react-flow__panel.right { inset-inline-end: 0; }
+.inkra-node-graph .react-flow__pane.selection .react-flow__panel { pointer-events: none; }
+.inkra-node-graph .react-flow__selection-rect,
+.inkra-node-graph .react-flow__nodesselection-rect { border: 0; background: color-mix(in srgb, var(--inkra-selection-pigment) 13%, transparent); }
+.inkra-node-graph .react-flow__viewport-portal { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; user-select: none; }
+.inkra-node-graph .react-flow__attribution { color: var(--inkra-ink-muted); font-size: 10px; line-height: 1.2; }
+.inkra-node-graph .react-flow__attribution a { color: inherit; }
+
+.inkra-node-graph__node-shell { position: relative; min-inline-size: 168px; max-inline-size: min(280px, 72vw); }
+.inkra-node-graph__node-paper { position: relative; min-inline-size: inherit; color: var(--inkra-ink); }
+.inkra-node-graph__node-selection { position: absolute; z-index: -1; inset: 2px; pointer-events: none; }
+.inkra-node-graph__node-content { position: relative; z-index: 1; display: grid; gap: var(--inkra-space-2); padding: var(--inkra-space-4); min-inline-size: 0; }
+.inkra-node-graph__node-label { color: var(--inkra-ink); font-size: var(--inkra-text-md); line-height: var(--inkra-line-ui); overflow-wrap: anywhere; }
+.inkra-node-graph__node-description { color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); line-height: var(--inkra-line-body); overflow-wrap: anywhere; }
+.inkra-node-graph__node-body { min-inline-size: 0; }
+.inkra-node-graph__node-focus { position: absolute; z-index: 3; inset: -4px; opacity: 0; pointer-events: none; }
+.inkra-node-graph .react-flow__node:focus-visible .inkra-node-graph__node-focus { opacity: 1; }
+
+.inkra-node-graph__port.react-flow__handle {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  inline-size: var(--inkra-touch-target);
+  block-size: var(--inkra-touch-target);
+  border: 0;
+  background: transparent;
+  pointer-events: none;
+  transform: translate(-50%, -50%) scale(var(--inkra-node-graph-port-scale, 1));
+  z-index: 4;
+}
+.inkra-node-graph__port.react-flow__handle.connectionindicator { pointer-events: all; cursor: crosshair; }
+.inkra-node-graph__port.react-flow__handle-left { inset-inline-start: 0; inset-block-start: 50%; }
+.inkra-node-graph__port.react-flow__handle-right { inset-inline-start: 100%; inset-block-start: 50%; }
+.inkra-node-graph__port.react-flow__handle-top { inset-inline-start: 50%; inset-block-start: 0; }
+.inkra-node-graph__port.react-flow__handle-bottom { inset-inline-start: 50%; inset-block-start: 100%; }
+.inkra-node-graph__port-visual { position: relative; display: grid; place-items: center; inline-size: 18px; block-size: 18px; pointer-events: none; }
+.inkra-node-graph__port-mark,
+.inkra-node-graph__port-feedback { position: absolute; inset: 0; pointer-events: none; }
+.inkra-node-graph__port-feedback { opacity: 0; }
+.inkra-node-graph__port:hover .inkra-node-graph__port-feedback,
+.inkra-node-graph__port.connectingfrom .inkra-node-graph__port-feedback,
+.inkra-node-graph__port.valid .inkra-node-graph__port-feedback { opacity: 1; }
+
+.inkra-node-graph__edge-hit { pointer-events: stroke; }
+.inkra-node-graph__edge-pencil { color: var(--inkra-ink-muted); pointer-events: none; }
+.inkra-node-graph__edge-pencil[data-selected] { color: var(--inkra-accent-strong); }
+.inkra-node-graph__edge-measure { stroke: transparent; stroke-width: 1; pointer-events: none; }
+.inkra-node-graph__edge-fallback { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
+.inkra-node-graph__edge-pencil[data-pencil-ready] .inkra-node-graph__edge-fallback { visibility: hidden; }
+.inkra-node-graph__edge-foreign-object { overflow: visible; pointer-events: none; }
+.inkra-node-graph__edge-canvas { display: block; color: inherit; overflow: visible; pointer-events: none; }
+.inkra-node-graph__edge-label { position: absolute; z-index: 5; max-inline-size: 180px; padding: 4px 8px; color: var(--inkra-ink); font-size: var(--inkra-text-sm); line-height: var(--inkra-line-ui); pointer-events: all; overflow-wrap: anywhere; }
+.inkra-node-graph .react-flow__edgelabel-renderer { position: absolute; inset: 0; z-index: 5; inline-size: 100%; block-size: 100%; pointer-events: none; user-select: none; }
+
+.inkra-node-graph__controls { display: flex; gap: var(--inkra-space-1); }
+.inkra-node-graph__control { appearance: none; position: relative; display: inline-grid; place-items: center; inline-size: var(--inkra-touch-target); block-size: var(--inkra-touch-target); padding: 0; border: 0; color: var(--inkra-ink); cursor: pointer; }
+.inkra-node-graph__control:focus { outline: none; }
+.inkra-node-graph__control-focus { position: absolute; inset: 2px; opacity: 0; pointer-events: none; }
+.inkra-node-graph__control:focus-visible .inkra-node-graph__control-focus { opacity: 1; }
+
+.inkra-node-graph__empty { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: var(--inkra-space-6); color: var(--inkra-ink-muted); text-align: center; pointer-events: none; }
+.inkra-node-graph__ssr { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--inkra-space-5); color: var(--inkra-ink); }
+.inkra-node-graph__ssr ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--inkra-space-3); margin: 0; padding: 0; list-style: none; }
+.inkra-node-graph__ssr li { padding: var(--inkra-space-3) var(--inkra-space-4); }
+
+@media (max-width: 390px) {
+  .inkra-node-graph { block-size: 440px; min-block-size: 360px; }
+  .inkra-node-graph__node-shell { min-inline-size: 144px; max-inline-size: 68vw; }
+  .inkra-node-graph__node-content { padding: var(--inkra-space-3); }
+  .inkra-node-graph .react-flow__panel { margin: var(--inkra-space-2); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-node-graph * { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
+}
+
+@media print, (forced-colors: active) {
+  .inkra-node-graph { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
+  .inkra-node-graph__edge-canvas { visibility: hidden; }
+  .inkra-node-graph__edge-fallback { visibility: visible !important; stroke: CanvasText; }
+  .inkra-node-graph__port-mark { outline: 1px solid CanvasText; outline-offset: -6px; }
+  .inkra-node-graph .react-flow__node:focus-visible .inkra-node-graph__node-shell,
+  .inkra-node-graph__control:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
+}

package/dist/styles/number-ticker.css

@@ -0,0 +1,83 @@
+.inkra-number-ticker {
+  color: var(--inkra-ink);
+  display: inline-block;
+  font-family: var(--inkra-font-hand);
+  font-kerning: none;
+  font-variant-ligatures: none;
+  letter-spacing: 0;
+  max-width: 100%;
+  position: relative;
+}
+
+.inkra-number-ticker__visual {
+  align-items: baseline;
+  display: inline-flex;
+  gap: var(--inkra-space-1, 4px);
+  max-width: 100%;
+  white-space: nowrap;
+}
+
+.inkra-number-ticker__value {
+  display: inline-grid;
+  font-variant-numeric: tabular-nums lining-nums;
+  min-width: 0;
+}
+
+.inkra-number-ticker__native-value {
+  font: inherit;
+  font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
+}
+
+.inkra-number-ticker__prefix,
+.inkra-number-ticker__suffix {
+  align-items: center;
+  align-self: center;
+  color: var(--inkra-ink-muted);
+  display: inline-flex;
+  flex: none;
+  gap: var(--inkra-space-1, 4px);
+  min-width: 0;
+}
+
+.inkra-number-ticker__delta {
+  color: var(--inkra-success-foreground, var(--inkra-ink-muted));
+  font-size: .72em;
+  line-height: var(--inkra-line-ui, 1.45);
+  margin-inline-start: var(--inkra-space-1, 4px);
+  white-space: nowrap;
+}
+
+.inkra-number-ticker__delta[data-direction="decrease"] {
+  color: var(--inkra-danger-foreground, var(--inkra-danger));
+}
+
+.inkra-number-ticker__announcement {
+  block-size: 1px !important;
+  border: 0 !important;
+  clip-path: inset(50%) !important;
+  inline-size: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-number-ticker__delta {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .inkra-number-ticker,
+  .inkra-number-ticker__delta {
+    color: CanvasText;
+  }
+}
+
+@media print {
+  .inkra-number-ticker__delta {
+    color: currentcolor;
+  }
+}

package/dist/styles/overflow-list.css

@@ -0,0 +1,51 @@
+.inkra-overflow-list {
+  --inkra-overflow-list-gap: var(--inkra-space-2);
+
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  gap: var(--inkra-overflow-list-gap);
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  overflow: clip;
+  overflow-clip-margin: calc(var(--inkra-focus-offset) + var(--inkra-focus-width));
+}
+
+.inkra-overflow-list__item,
+.inkra-overflow-list__trigger {
+  flex: 0 0 auto;
+}
+
+.inkra-overflow-list__item {
+  align-items: center;
+  display: inline-flex;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.inkra-overflow-list__default-item {
+  color: var(--inkra-ink);
+  font-family: var(--inkra-font-body);
+  font-size: var(--inkra-text-md);
+  line-height: var(--inkra-line-ui);
+  overflow-wrap: anywhere;
+}
+
+.inkra-overflow-list__trigger .inkra-button__content {
+  gap: var(--inkra-space-1);
+}
+
+@media (forced-colors: active) {
+  .inkra-overflow-list__trigger:focus-visible {
+    outline: var(--inkra-focus-width) solid Highlight;
+    outline-offset: var(--inkra-focus-offset);
+  }
+}
+
+@media print {
+  .inkra-overflow-list {
+    flex-wrap: wrap;
+    overflow: visible;
+  }
+}

package/dist/styles/overlay.css

@@ -0,0 +1,284 @@
+.inkra-portal-theme-bridge {
+  display: contents;
+  font-family: var(--inkra-font-body);
+}
+
+.inkra-overlay__backdrop {
+  animation: inkra-overlay-backdrop-in var(--inkra-motion-normal) var(--inkra-ease) both;
+  background: var(--inkra-overlay);
+  inset: 0;
+  position: fixed;
+  z-index: calc(var(--inkra-z-modal, 30) + var(--inkra-floating-layer-offset, 0));
+}
+
+.inkra-overlay__backdrop[data-state="closed"] {
+  animation: inkra-overlay-backdrop-out var(--inkra-motion-normal) var(--inkra-ease) both;
+}
+
+.inkra-overlay__content {
+  animation: inkra-overlay-content-in var(--inkra-motion-normal) var(--inkra-ease) both;
+  inset-block-start: 50%;
+  left: 50%;
+  max-height: min(80vh, calc(100dvh - var(--inkra-space-8)));
+  outline: 0;
+  position: fixed;
+  transform: translate(-50%, -50%);
+  width: min(36rem, calc(100vw - var(--inkra-space-8)));
+  z-index: calc(var(--inkra-z-modal, 30) + var(--inkra-floating-layer-offset, 0) + 1);
+}
+
+.inkra-overlay__content[data-state="closed"] {
+  animation: inkra-overlay-content-out var(--inkra-motion-normal) var(--inkra-ease) both;
+  pointer-events: none;
+}
+
+.inkra-overlay__content:focus-visible,
+.inkra-popover__content:focus-visible {
+  outline: var(--inkra-focus-width) solid var(--inkra-focus);
+  outline-offset: var(--inkra-focus-offset);
+}
+
+.inkra-overlay__surface {
+  color: var(--inkra-ink);
+  display: block;
+  max-height: inherit;
+  width: 100%;
+}
+
+.inkra-overlay__content-body {
+  box-sizing: border-box;
+  max-height: inherit;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: var(--inkra-space-6);
+  scrollbar-gutter: stable;
+}
+
+.inkra-overlay__title,
+.inkra-popover__title {
+  color: var(--inkra-ink);
+  font-family: var(--inkra-font-display);
+  font-size: var(--inkra-text-xl);
+  font-weight: var(--inkra-weight-regular);
+  line-height: var(--inkra-line-ui);
+  margin: 0;
+}
+
+.inkra-overlay__content[data-layout="sections"] > .inkra-overlay__surface,
+.inkra-overlay__content[data-layout="sections"] > .inkra-overlay__surface > .inkra-overlay__content-body {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.inkra-overlay__content[data-layout="sections"] > .inkra-overlay__surface > .inkra-overlay__content-body {
+  overflow: hidden;
+  padding: 0;
+  scrollbar-gutter: auto;
+}
+
+.inkra-overlay__header,
+.inkra-overlay__footer {
+  position: relative;
+  display: flex;
+  flex: none;
+  gap: var(--inkra-space-3);
+  padding: var(--inkra-space-5);
+  min-width: 0;
+}
+
+.inkra-overlay__header { align-items: flex-start; }
+.inkra-overlay__heading { display: grid; gap: var(--inkra-space-2); flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.inkra-overlay__header-actions { display: flex; flex: none; align-items: center; gap: var(--inkra-space-2); }
+.inkra-overlay__close-button { flex: none; }
+
+.inkra-overlay__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  padding: var(--inkra-space-5);
+}
+
+.inkra-overlay__footer { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
+.inkra-overlay__footer[data-align="start"] { justify-content: flex-start; }
+.inkra-overlay__footer[data-align="center"] { justify-content: center; }
+.inkra-overlay__footer > .inkra-button { max-width: 100%; }
+
+.inkra-overlay__section-divider {
+  position: absolute;
+  inset-inline: 0;
+  width: 100%;
+  height: 8px;
+  pointer-events: none;
+}
+.inkra-overlay__header > .inkra-overlay__section-divider { bottom: -4px; }
+.inkra-overlay__footer > .inkra-overlay__section-divider { top: -4px; }
+
+.inkra-overlay__description,
+.inkra-popover__description {
+  color: var(--inkra-ink-muted);
+  font-family: var(--inkra-font-body);
+  font-size: var(--inkra-text-md);
+  line-height: var(--inkra-line-body);
+  margin: 0;
+}
+
+.inkra-popover__content {
+  animation: inkra-popover-content-in var(--inkra-motion-normal) var(--inkra-ease) both;
+  max-height: min(70dvh, var(--radix-popover-content-available-height, 70dvh));
+  max-width: min(24rem, var(--radix-popover-content-available-width, calc(100dvw - var(--inkra-space-6))));
+  outline: 0;
+  transform-origin: var(--radix-popover-content-transform-origin);
+  width: max-content;
+  z-index: calc(var(--inkra-z-popover, 20) + var(--inkra-floating-layer-offset, 0));
+}
+
+.inkra-popover__content[data-state="closed"] {
+  animation: inkra-popover-content-out var(--inkra-motion-normal) var(--inkra-ease) both;
+  pointer-events: none;
+}
+
+.inkra-popover__surface {
+  color: var(--inkra-ink);
+  display: block;
+  max-height: inherit;
+  max-width: inherit;
+  min-width: 0;
+}
+
+.inkra-popover__content-body {
+  box-sizing: border-box;
+  max-height: inherit;
+  max-width: inherit;
+  overflow: auto;
+  overflow-wrap: anywhere;
+  overscroll-behavior: contain;
+  padding: var(--inkra-space-4);
+  scrollbar-gutter: stable;
+}
+
+.inkra-popover__title,
+.inkra-popover__description {
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+.inkra-popover__arrow {
+  color: var(--inkra-paper);
+  fill: currentcolor;
+  height: 8px;
+  width: 16px;
+}
+
+@keyframes inkra-overlay-backdrop-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes inkra-overlay-backdrop-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes inkra-overlay-content-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, calc(-50% + var(--inkra-space-2))) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes inkra-overlay-content-out {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, calc(-50% + var(--inkra-space-2))) scale(0.98);
+  }
+}
+
+@keyframes inkra-popover-content-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--inkra-space-1)) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes inkra-popover-content-out {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(var(--inkra-space-1)) scale(0.98);
+  }
+}
+
+@media (max-width: 30rem) {
+  .inkra-overlay__content {
+    max-height: calc(100dvh - var(--inkra-space-4));
+    width: calc(100vw - var(--inkra-space-4));
+  }
+
+  .inkra-overlay__content-body {
+    padding: var(--inkra-space-4);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-overlay__backdrop,
+  .inkra-overlay__content,
+  .inkra-popover__content {
+    animation: none !important;
+  }
+}
+
+@media (forced-colors: active) {
+  .inkra-overlay__header[data-divided] { border-bottom: 1px solid CanvasText; }
+  .inkra-overlay__footer[data-divided] { border-top: 1px solid CanvasText; }
+  .inkra-overlay__backdrop {
+    background: CanvasText;
+    opacity: 0.25;
+  }
+
+  .inkra-overlay__surface,
+  .inkra-popover__surface {
+    background: Canvas;
+    border: 1px solid CanvasText;
+  }
+
+  .inkra-popover__arrow {
+    color: Canvas;
+    forced-color-adjust: none;
+    stroke: CanvasText;
+  }
+}
+
+@media print {
+  .inkra-overlay__backdrop {
+    display: none;
+  }
+
+  .inkra-overlay__content,
+  .inkra-popover__content {
+    animation: none !important;
+    max-height: none;
+    max-width: none;
+    position: static;
+    transform: none;
+    width: auto;
+  }
+}

package/dist/styles/pagination.css

@@ -0,0 +1,21 @@
+.inkra-pagination { min-inline-size: 0; max-inline-size: 100%; color: var(--inkra-ink); }
+.inkra-pagination__list { box-sizing: border-box; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--inkra-space-1); max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 8px; list-style: none; padding: 8px; margin: 0; }
+.inkra-pagination__list > li { display: flex; flex: 0 0 auto; }
+.inkra-pagination__summary { align-items: center; box-sizing: border-box; font-variant-numeric: tabular-nums; justify-content: center; max-inline-size: 100%; min-block-size: var(--inkra-touch-target); min-inline-size: 0; overflow-wrap: anywhere; padding-inline: var(--inkra-space-2); text-align: center; white-space: normal; }
+.inkra-pagination__page-item { max-inline-size: max(var(--inkra-touch-target), 50%); }
+.inkra-pagination__page.inkra-button { max-inline-size: 100%; min-inline-size: var(--inkra-touch-target); scroll-margin-inline: 8px; }
+.inkra-pagination__page .inkra-button__surface { height: auto; min-height: var(--inkra-button-visual-height); padding-block: var(--inkra-space-1); padding-inline: var(--inkra-space-2); }
+.inkra-pagination__page .inkra-button__surface { isolation: isolate; }
+.inkra-pagination__page > .inkra-button__focus-ring { height: auto; inset-block: 0; top: 0; transform: none; }
+.inkra-pagination__page .inkra-button__content,
+.inkra-pagination__page .inkra-button__label { max-inline-size: 100%; min-inline-size: 0; overflow-wrap: anywhere; position: static; white-space: normal; }
+.inkra-pagination__selection { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
+.inkra-pagination__page[aria-current="page"] { color: var(--inkra-selection-foreground); }
+.inkra-pagination__ellipsis { min-inline-size: 24px; min-block-size: var(--inkra-touch-target); align-items: center; justify-content: center; }
+.inkra-pagination__arrow:dir(rtl) { transform: scaleX(-1); }
+.inkra-pagination__sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+@media (forced-colors: active) {
+  .inkra-pagination__page[aria-current="page"] { color: HighlightText; background: Highlight; outline: 1px solid Highlight; }
+  .inkra-pencil-surface.inkra-pagination__selection { display: none !important; }
+}
+@media (prefers-reduced-motion: reduce) { .inkra-pagination * { transition: none !important; animation: none !important; } }