@inkra/react 0.6.0 → 0.9.0

package/dist/styles/inventory-grid.css

@@ -0,0 +1,43 @@
+.inkra-inventory-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; min-width: 0; max-width: 100%; color: var(--inkra-ink); }
+.inkra-inventory-grid__container { min-width: 0; max-width: 100%; }
+.inkra-inventory-grid__header { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 8px; padding-bottom: 8px; }
+.inkra-inventory-grid__scroll { max-width: 100%; overflow: auto; padding: 4px; }
+.inkra-inventory-grid__board { position: relative; isolation: isolate; direction: ltr; }
+.inkra-inventory-grid__lines { position: absolute; inset: 0; color: var(--inkra-border); pointer-events: none; }
+.inkra-inventory-grid__lines > canvas { position: absolute; }
+.inkra-inventory-grid__item, .inkra-inventory-grid__preview, .inkra-inventory-grid__cell, .inkra-inventory-grid__blocked { position: absolute; }
+.inkra-inventory-grid__item { outline: none; pointer-events: none; }
+.inkra-inventory-grid__cell { box-sizing: border-box; display: grid; place-items: center; pointer-events: auto; touch-action: none; cursor: grab; }
+.inkra-inventory-grid__shape { position: absolute; inset: 0 auto auto 0; pointer-events: none; color: var(--inkra-border-strong); }
+.inkra-inventory-grid__shape-fill, .inkra-inventory-grid__shape-wash { position: absolute; inset: 0; pointer-events: none; }
+.inkra-inventory-grid__shape-wash { opacity: .65; --inkra-selection-pigment: var(--inkra-accent-soft); }
+.inkra-inventory-grid__shape-fill[data-pencil-fallback] { background: var(--inkra-paper); border: 0; }
+.inkra-inventory-grid__shape-fill[data-pencil-fallback] + .inkra-inventory-grid__shape-fallback { display: block; }
+.inkra-inventory-grid__shape-edge { position: absolute; }
+.inkra-inventory-grid__shape-fallback { position: absolute; inset: 0; display: none; }
+.inkra-inventory-grid__item-content { position: relative; z-index: 1; padding: 4px; max-width: 100%; max-height: 100%; overflow: hidden; pointer-events: none; font-size: 13px; overflow-wrap: anywhere; text-align: center; }
+.inkra-inventory-grid__item[data-selected] .inkra-inventory-grid__shape { color: var(--inkra-accent-strong); }
+.inkra-inventory-grid__item:focus-visible .inkra-inventory-grid__shape { color: var(--inkra-focus); --inkra-stroke-width: 2; }
+.inkra-inventory-grid__item[data-selected] .inkra-inventory-grid__shape-wash { opacity: 1; }
+.inkra-inventory-grid__item[data-dragging] { opacity: .28; }
+.inkra-inventory-grid__item[data-disabled] .inkra-inventory-grid__cell { cursor: default; touch-action: auto; }
+.inkra-inventory-grid__container[data-disabled], .inkra-inventory-grid[data-disabled] { opacity: .55; }
+.inkra-inventory-grid__preview { z-index: 2; pointer-events: none; color: var(--inkra-accent-strong); }
+.inkra-inventory-grid__preview[data-valid="false"] { color: var(--inkra-danger); }
+.inkra-inventory-grid__preview .inkra-inventory-grid__shape { color: inherit; --inkra-stroke-width: 2; }
+.inkra-inventory-grid__preview .inkra-inventory-grid__cell, .inkra-inventory-grid__overlay .inkra-inventory-grid__cell { pointer-events: none; }
+.inkra-inventory-grid__overlay { position: relative; opacity: .8; pointer-events: none; color: var(--inkra-ink); }
+.inkra-inventory-grid__blocked { display: grid; place-items: center; color: var(--inkra-ink-muted); pointer-events: none; }
+.inkra-inventory-grid__announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+@media (forced-colors: active) {
+  .inkra-inventory-grid__board { border: 1px solid CanvasText; }
+  .inkra-inventory-grid__shape-fill { background: Canvas; }
+  .inkra-inventory-grid__shape-fallback { display: block; color: CanvasText; }
+  .inkra-inventory-grid__shape-edge { display: none; }
+  .inkra-inventory-grid__item:focus-visible .inkra-inventory-grid__shape-fallback,
+  .inkra-inventory-grid__preview .inkra-inventory-grid__shape-fallback { color: Highlight; stroke-width: 3px; }
+}
+@media print {
+  .inkra-inventory-grid__shape-fallback { display: block; }
+  .inkra-inventory-grid__shape-edge { display: none; }
+}

package/dist/styles/layout.css

@@ -4,6 +4,8 @@
 .inkra-layout,
 .inkra-layout__body,
 .inkra-layout__header,
+.inkra-layout__header-sidebar,
+.inkra-layout__header-content,
 .inkra-layout__sidebar,
 .inkra-layout__content,
 .inkra-layout__footer {
@@ -37,6 +39,33 @@
 .inkra-layout__body { display: flex; flex: 1; align-items: stretch; }
 .inkra-layout__header,
 .inkra-layout__footer { position: relative; flex: none; }
+.inkra-layout__header[data-shared-sidebar] { display: flex; align-items: stretch; }
+.inkra-layout__header-sidebar,
+.inkra-layout__header-content {
+  display: flex;
+  align-items: center;
+  padding: var(--inkra-layout-header-padding, 20px);
+  overflow-wrap: anywhere;
+}
+.inkra-layout__header-sidebar {
+  position: relative;
+  flex: 0 0 min(var(--inkra-layout-shared-sidebar-width, 240px), 100%);
+  max-width: 100%;
+}
+.inkra-layout__header-content { flex: 1; }
+.inkra-layout__header-content > * { min-width: 0; }
+.inkra-layout__header-sidebar-divider[data-orientation="vertical"] {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 0;
+  height: min(32px, max(0px, calc(100% - 2 * var(--inkra-layout-header-padding, 20px))));
+  color: var(--inkra-ink-muted);
+  opacity: 0.56;
+  transform: translate(50%, -50%);
+}
+.inkra-layout__header-sidebar-divider[data-orientation="vertical"]:dir(rtl) { transform: translate(-50%, -50%); }
+.inkra-layout__header-sidebar[hidden],
+.inkra-layout__sidebar[hidden] { display: none; }
 .inkra-layout__sidebar {
   position: relative;
   flex: 0 0 min(var(--inkra-layout-sidebar-width, 240px), 100%);
@@ -55,6 +84,9 @@
 }
 .inkra-layout__sidebar-divider-mobile { display: none; }
 @container inkra-layout (max-width: 639px) {
+  .inkra-layout[data-collapse-at="sm"] > .inkra-layout__header[data-shared-sidebar] { flex-direction: column; }
+  .inkra-layout[data-collapse-at="sm"] > .inkra-layout__header > .inkra-layout__header-sidebar { flex-basis: auto; width: 100%; }
+  .inkra-layout[data-collapse-at="sm"] > .inkra-layout__header > .inkra-layout__header-sidebar > .inkra-layout__header-sidebar-divider { display: none !important; }
   .inkra-layout[data-collapse-at="sm"] > .inkra-layout__body { flex-direction: column; }
   .inkra-layout[data-collapse-at="sm"] > .inkra-layout__body > .inkra-layout__sidebar { flex-basis: auto; width: 100%; }
   .inkra-layout[data-collapse-at="sm"] > .inkra-layout__body > .inkra-layout__sidebar > .inkra-layout__sidebar-divider { display: none; }
@@ -63,6 +95,9 @@
   }
 }
 @container inkra-layout (max-width: 767px) {
+  .inkra-layout[data-collapse-at="md"] > .inkra-layout__header[data-shared-sidebar] { flex-direction: column; }
+  .inkra-layout[data-collapse-at="md"] > .inkra-layout__header > .inkra-layout__header-sidebar { flex-basis: auto; width: 100%; }
+  .inkra-layout[data-collapse-at="md"] > .inkra-layout__header > .inkra-layout__header-sidebar > .inkra-layout__header-sidebar-divider { display: none !important; }
   .inkra-layout[data-collapse-at="md"] > .inkra-layout__body { flex-direction: column; }
   .inkra-layout[data-collapse-at="md"] > .inkra-layout__body > .inkra-layout__sidebar { flex-basis: auto; width: 100%; }
   .inkra-layout[data-collapse-at="md"] > .inkra-layout__body > .inkra-layout__sidebar > .inkra-layout__sidebar-divider { display: none; }
@@ -70,3 +105,53 @@
     display: block; position: absolute; bottom: -4px; inset-inline: 0; width: 100%;
   }
 }
+@media (forced-colors: active), print {
+  .inkra-layout__header-sidebar-divider[data-orientation="vertical"] { opacity: 1; }
+}
+.inkra-grid-resizable,
+.inkra-grid-resizable > .inkra-resizable,
+.inkra-grid-resizable .inkra-resizable__panel > .inkra-resizable {
+  block-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+}
+.inkra-grid-resizable__cell {
+  box-sizing: border-box;
+  block-size: 100%;
+  min-inline-size: 0;
+  overflow: auto;
+}
+.inkra-grid-board { min-inline-size: 0; inline-size: 100%; }
+.inkra-grid-board__canvas { position: relative; min-inline-size: 0; }
+.inkra-grid-board__item { position: absolute; transition: transform var(--inkra-motion-fast) var(--inkra-ease); }
+.inkra-grid-board__item.resizing,
+.inkra-grid-board__item.react-draggable-dragging { transition: none; z-index: 2; }
+.inkra-grid-board__surface { box-sizing: border-box; display: flex; flex-direction: column; block-size: 100%; min-inline-size: 0; }
+.inkra-grid-board__surface > .inkra-pencil-surface__content { display: flex; flex-direction: column; block-size: 100%; min-block-size: 0; }
+.inkra-grid-board__header { display: flex; flex-shrink: 0; align-items: center; gap: 8px; min-block-size: 44px; padding-inline: 12px 4px; }
+.inkra-grid-board__title { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.inkra-grid-board__content { padding: 4px 12px 24px; min-block-size: 0; overflow: auto; flex: 1; }
+.inkra-grid-board__move,
+.inkra-grid-board__resize {
+  appearance: none; border: 0; background: transparent; color: var(--inkra-ink-muted);
+  display: inline-flex; align-items: center; justify-content: center;
+  inline-size: 44px; block-size: 44px; padding: 0; flex: 0 0 44px;
+}
+.inkra-grid-board__move { cursor: grab; touch-action: none; position: relative; }
+.inkra-grid-board__resize { position: absolute; right: 0; bottom: 0; cursor: se-resize; touch-action: none; z-index: 1; }
+.inkra-grid-board__move:hover,
+.inkra-grid-board__resize:hover { color: var(--inkra-accent-strong); }
+.inkra-grid-board__move:focus-visible,
+.inkra-grid-board__resize:focus-visible { outline: none; }
+.inkra-grid-board__focus { position: absolute; inset: 4px; opacity: 0; pointer-events: none; }
+.inkra-grid-board__move:focus-visible .inkra-grid-board__focus,
+.inkra-grid-board__resize:focus-visible .inkra-grid-board__focus { opacity: 1; }
+.inkra-grid-board__item.react-resizable-hide > .inkra-grid-board__resize { display: none; }
+.inkra-grid-board[data-stacked] .inkra-grid-board__canvas { display: grid; gap: var(--inkra-grid-board-gap); }
+.inkra-grid-board[data-stacked] .inkra-grid-board__item { position: relative !important; transform: none !important; top: auto !important; left: auto !important; width: 100% !important; height: auto !important; min-block-size: 160px; }
+.inkra-grid-board[data-stacked] .inkra-grid-board__resize { display: none; }
+@media (prefers-reduced-motion: reduce) { .inkra-grid-board__item { transition: none; } }
+@media (forced-colors: active) {
+  .inkra-grid-board__focus { display: none; }
+  .inkra-grid-board__move:focus-visible, .inkra-grid-board__resize:focus-visible { outline: 2px solid Highlight; outline-offset: -4px; }
+}

package/dist/styles/loading.css

@@ -0,0 +1,348 @@
+.inkra-loading {
+  box-sizing: border-box;
+  color: var(--inkra-ink);
+  font-family: var(--inkra-font-body);
+  min-inline-size: 0;
+  position: relative;
+}
+
+.inkra-loading[data-mode="inline"] {
+  align-items: center;
+  display: inline-flex;
+  inline-size: auto;
+  max-inline-size: 100%;
+}
+
+.inkra-loading[data-mode="region"] {
+  column-gap: var(--inkra-space-2);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem) minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  inline-size: 100%;
+  min-block-size: 12rem;
+  overflow: hidden;
+}
+
+.inkra-loading[data-mode="fullscreen"] {
+  column-gap: var(--inkra-space-2);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem) minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  inset: 0;
+  min-block-size: 100dvh;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: max(var(--inkra-space-4), env(safe-area-inset-top)) max(var(--inkra-space-4), env(safe-area-inset-right)) max(var(--inkra-space-4), env(safe-area-inset-bottom)) max(var(--inkra-space-4), env(safe-area-inset-left));
+  position: fixed;
+  z-index: var(--inkra-z-modal, 30);
+}
+
+.inkra-loading:is([data-mode="region"], [data-mode="fullscreen"]):has(.inkra-loading__slot[data-slot="center"]) {
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+}
+
+.inkra-loading[data-mode="fullscreen"]:not([data-blocking]) { pointer-events: none; }
+.inkra-loading[data-mode="fullscreen"]:not([data-blocking]) :is(.inkra-loading__actions, .inkra-loading__tip-controls, .inkra-loading__slot, .inkra-loading__content-layer) { pointer-events: auto; }
+
+.inkra-loading__theme-anchor {
+  block-size: 0;
+  inline-size: 0;
+  inset: 0 auto auto 0;
+  pointer-events: none;
+  position: fixed;
+}
+
+.inkra-loading__sr-status {
+  block-size: 1px;
+  clip-path: inset(50%);
+  inline-size: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+}
+
+.inkra-loading__background,
+.inkra-loading__veil {
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+.inkra-loading[data-mode="fullscreen"] > :is(.inkra-loading__background, .inkra-loading__veil) {
+  position: fixed;
+}
+
+.inkra-loading__background { overflow: hidden; }
+.inkra-loading__background > :is(img, video, canvas, picture),
+.inkra-loading__background > picture > img {
+  block-size: 100%;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+.inkra-loading__veil {
+  background: color-mix(in srgb, var(--inkra-paper) 86%, transparent);
+}
+
+.inkra-loading[data-mode="inline"] .inkra-loading__background,
+.inkra-loading[data-mode="inline"] .inkra-loading__veil { display: none; }
+
+.inkra-loading__layout {
+  align-items: center;
+  display: grid;
+  grid-column: 1 / -1;
+  grid-row: 2;
+  inline-size: 100%;
+  justify-items: center;
+  min-block-size: 0;
+  min-inline-size: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.inkra-loading:is([data-mode="region"], [data-mode="fullscreen"]):has(.inkra-loading__slot[data-slot="center"]) .inkra-loading__layout {
+  grid-row: 3;
+}
+
+.inkra-loading__main {
+  align-items: center;
+  display: grid;
+  gap: var(--inkra-space-4);
+  inline-size: min(100%, 34rem);
+  justify-items: center;
+  min-inline-size: 0;
+  padding: var(--inkra-space-4);
+  text-align: center;
+}
+
+.inkra-loading[data-mode="inline"] .inkra-loading__main {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--inkra-space-2);
+  inline-size: auto;
+  justify-items: initial;
+  padding: 0;
+  text-align: start;
+}
+
+.inkra-loading[data-mode="inline"] .inkra-loading__copy { gap: 0; }
+.inkra-loading[data-mode="inline"] .inkra-loading__description,
+.inkra-loading[data-mode="inline"] .inkra-loading__tips,
+.inkra-loading[data-mode="inline"] .inkra-loading__stages { display: none; }
+.inkra-loading[data-mode="inline"] .inkra-loading__progress { inline-size: min(14rem, 45vw); }
+.inkra-loading[data-mode="inline"] .inkra-progress[data-shape="circular"] { inline-size: 32px; }
+.inkra-loading[data-mode="inline"] .inkra-progress__ring { --inkra-progress-diameter: 32px !important; }
+
+.inkra-loading__logo {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  max-inline-size: 100%;
+}
+
+.inkra-loading__logo > :is(img, svg) { block-size: auto; max-block-size: 7rem; max-inline-size: min(16rem, 100%); }
+.inkra-loading__copy { display: grid; gap: var(--inkra-space-2); max-inline-size: 100%; }
+.inkra-loading__title { font-size: var(--inkra-text-2xl); line-height: var(--inkra-line-tight); overflow-wrap: anywhere; }
+.inkra-loading__description { color: var(--inkra-ink-muted); font-size: var(--inkra-text-md); line-height: var(--inkra-line-body); overflow-wrap: anywhere; }
+.inkra-loading[data-mode="inline"] .inkra-loading__title { font-size: var(--inkra-text-md); line-height: var(--inkra-line-ui); }
+
+.inkra-loading__progress { inline-size: min(100%, 28rem); }
+.inkra-loading__animation-progress {
+  display: grid;
+  gap: var(--inkra-space-2);
+  inline-size: min(100%, 28rem);
+  justify-items: center;
+}
+.inkra-loading[data-mode="inline"] .inkra-loading__animation-progress {
+  align-items: center;
+  display: inline-flex;
+  inline-size: auto;
+}
+.inkra-loading__animation-label {
+  line-height: var(--inkra-line-ui);
+  overflow-wrap: anywhere;
+}
+.inkra-loading__animation {
+  block-size: 48px;
+  color: var(--inkra-accent-strong);
+  flex: 0 0 auto;
+  inline-size: 48px;
+  position: relative;
+}
+.inkra-loading[data-mode="inline"] .inkra-loading__animation {
+  block-size: 32px;
+  inline-size: 32px;
+}
+.inkra-loading__animation-visual {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  inset: 0;
+  position: absolute;
+}
+.inkra-loading__animation-mark { position: absolute; }
+
+.inkra-loading[data-animation="orbit"] .inkra-loading__animation {
+  animation: inkra-loading-orbit 1100ms linear infinite;
+}
+.inkra-loading[data-animation="orbit"] .inkra-loading__animation-mark {
+  block-size: 20.8333%;
+  inline-size: 20.8333%;
+  inset-block-start: 39.5833%;
+  inset-inline-start: 39.5833%;
+  transform: rotate(0deg) translateY(-175%);
+}
+.inkra-loading[data-animation="orbit"] .inkra-loading__animation-mark:nth-child(2) {
+  opacity: .68;
+  transform: rotate(120deg) translateY(-175%);
+}
+.inkra-loading[data-animation="orbit"] .inkra-loading__animation-mark:nth-child(3) {
+  opacity: .4;
+  transform: rotate(240deg) translateY(-175%);
+}
+
+.inkra-loading[data-animation="dots"] .inkra-loading__animation {
+  display: block;
+}
+.inkra-loading[data-animation="dots"] .inkra-loading__animation-mark {
+  animation: inkra-loading-dot 900ms var(--inkra-ease) infinite;
+  block-size: 20.8333%;
+  inline-size: 20.8333%;
+  inset-block-start: 39.5833%;
+  inset-inline-start: 8.3333%;
+}
+.inkra-loading[data-animation="dots"] .inkra-loading__animation-mark:nth-child(2) { animation-delay: 120ms; inset-inline-start: 39.5833%; }
+.inkra-loading[data-animation="dots"] .inkra-loading__animation-mark:nth-child(3) { animation-delay: 240ms; inset-inline-start: 70.8333%; }
+
+.inkra-loading[data-animation="pulse"] .inkra-loading__animation-mark {
+  animation: inkra-loading-pulse 1500ms var(--inkra-ease) infinite;
+  inset: 12.5%;
+}
+.inkra-loading[data-animation="pulse"] .inkra-loading__animation-mark:nth-child(2) { animation-delay: 300ms; }
+.inkra-loading[data-animation="pulse"] .inkra-loading__animation-mark:nth-child(3) { animation-delay: 600ms; }
+
+.inkra-loading[data-animation="trail"] .inkra-loading__animation-mark {
+  animation: inkra-loading-trail 1050ms var(--inkra-ease) infinite;
+  block-size: 12.5%;
+  inline-size: 58.3333%;
+  inset-block-start: 25%;
+  inset-inline-start: 20.8333%;
+  transform-origin: center;
+}
+.inkra-loading[data-animation="trail"] .inkra-loading__animation-mark:nth-child(2) {
+  animation-delay: 140ms;
+  inset-block-start: 43.75%;
+}
+.inkra-loading[data-animation="trail"] .inkra-loading__animation-mark:nth-child(3) {
+  animation-delay: 280ms;
+  inset-block-start: 62.5%;
+}
+
+.inkra-loading__stages { display: grid; gap: var(--inkra-space-2); inline-size: min(100%, 28rem); text-align: start; }
+.inkra-loading__stage { align-items: start; display: grid; gap: var(--inkra-space-3); grid-template-columns: 36px minmax(0, 1fr); min-inline-size: 0; }
+.inkra-loading__stage-marker { align-items: center; block-size: 32px; display: flex; inline-size: 32px; justify-content: center; }
+.inkra-loading__stage[data-state="pending"] { color: var(--inkra-ink-muted); }
+.inkra-loading__stage[data-state="complete"] { color: var(--inkra-success-foreground); }
+.inkra-loading__stage[data-state="error"] { color: var(--inkra-danger-foreground); }
+.inkra-loading__stage-copy { display: grid; gap: var(--inkra-space-1); min-inline-size: 0; overflow-wrap: anywhere; }
+.inkra-loading__stage-description { color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); line-height: var(--inkra-line-body); }
+
+.inkra-loading__tips { display: grid; gap: var(--inkra-space-2); inline-size: min(100%, 32rem); min-block-size: 2.5rem; place-items: center; }
+.inkra-loading__tip { line-height: var(--inkra-line-body); max-inline-size: 100%; overflow-wrap: anywhere; }
+.inkra-loading__tips[data-transition="fade"] .inkra-loading__tip { animation: inkra-loading-tip-fade var(--inkra-motion-normal) var(--inkra-ease) both; }
+.inkra-loading__tips[data-transition="slide"] .inkra-loading__tip { animation: inkra-loading-tip-slide var(--inkra-motion-normal) var(--inkra-ease) both; }
+.inkra-loading__tip-controls { align-items: center; display: flex; gap: var(--inkra-space-2); }
+.inkra-loading__tip-position { color: var(--inkra-ink-muted); font-variant-numeric: tabular-nums; min-inline-size: 4ch; }
+
+.inkra-loading__content-layer { inline-size: 100%; min-inline-size: 0; }
+.inkra-loading__actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--inkra-space-2); justify-content: center; }
+
+.inkra-loading__slot {
+  max-block-size: calc(50dvh - var(--inkra-space-8));
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  overflow: auto;
+  overflow-wrap: anywhere;
+  pointer-events: auto;
+  position: relative;
+  z-index: 2;
+}
+.inkra-loading__slot[data-slot="top-start"] { align-self: start; grid-column: 1; grid-row: 1; justify-self: start; margin-block-end: var(--inkra-space-4); }
+.inkra-loading__slot[data-slot="top-end"] { align-self: start; grid-column: 3; grid-row: 1; justify-self: end; margin-block-end: var(--inkra-space-4); }
+.inkra-loading__slot[data-slot="center"] { align-self: center; grid-column: 2; grid-row: 2; justify-self: center; margin-block-end: var(--inkra-space-4); }
+.inkra-loading__slot[data-slot="bottom-start"] { align-self: end; grid-column: 1; grid-row: 3; justify-self: start; margin-block-start: var(--inkra-space-4); }
+.inkra-loading__slot[data-slot="bottom-center"] { align-self: end; grid-column: 2; grid-row: 3; justify-self: center; margin-block-start: var(--inkra-space-4); }
+.inkra-loading__slot[data-slot="bottom-end"] { align-self: end; grid-column: 3; grid-row: 3; justify-self: end; margin-block-start: var(--inkra-space-4); }
+
+.inkra-loading:is([data-mode="region"], [data-mode="fullscreen"]):has(.inkra-loading__slot[data-slot="center"]) .inkra-loading__slot[data-slot^="bottom-"] {
+  grid-row: 4;
+}
+
+.inkra-loading[data-mode="region"] .inkra-loading__slot[data-slot$="start"] { margin-inline-start: var(--inkra-space-4); }
+.inkra-loading[data-mode="region"] .inkra-loading__slot[data-slot$="end"] { margin-inline-end: var(--inkra-space-4); }
+
+.inkra-loading[data-preset="scene-bottom"] .inkra-loading__layout { align-items: end; }
+.inkra-loading[data-preset="scene-bottom"] .inkra-loading__main { padding-block-end: max(var(--inkra-space-8), 10dvh); }
+.inkra-loading[data-preset="intel"] .inkra-loading__main { justify-items: start; margin-inline-start: 0; text-align: start; }
+.inkra-loading[data-preset="staged"] .inkra-loading__main { align-items: start; grid-template-columns: minmax(0, .8fr) minmax(14rem, 1.2fr); text-align: start; }
+.inkra-loading[data-preset="staged"] .inkra-loading__copy,
+.inkra-loading[data-preset="staged"] .inkra-loading__logo { justify-self: start; }
+.inkra-loading[data-preset="staged"] .inkra-loading__stages { grid-column: 2; grid-row: 1 / span 5; }
+.inkra-loading[data-preset="edge"] { align-items: start; min-block-size: auto; padding: 0; }
+.inkra-loading[data-preset="edge"] .inkra-loading__veil,
+.inkra-loading[data-preset="edge"] .inkra-loading__background { display: none; }
+.inkra-loading[data-preset="edge"] .inkra-loading__layout { justify-items: stretch; }
+.inkra-loading[data-preset="edge"] .inkra-loading__main { align-items: center; display: flex; inline-size: 100%; justify-content: space-between; padding: var(--inkra-space-2) var(--inkra-space-4); text-align: start; }
+.inkra-loading__edge-line { block-size: 8px; inset-block-end: 0; inset-inline: 0; pointer-events: none; position: absolute; }
+
+.inkra-loading__skeleton { display: grid; gap: var(--inkra-space-3); inline-size: min(100%, 36rem); }
+.inkra-loading__skeleton-grid { display: grid; gap: var(--inkra-space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
+
+@keyframes inkra-loading-tip-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes inkra-loading-tip-slide { from { opacity: 0; transform: translateY(var(--inkra-space-2)); } to { opacity: 1; transform: translateY(0); } }
+@keyframes inkra-loading-orbit { to { transform: rotate(360deg); } }
+@keyframes inkra-loading-dot { 0%, 70%, 100% { opacity: .36; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-45%); } }
+@keyframes inkra-loading-pulse { 0% { opacity: .9; transform: scale(.35); } 75%, 100% { opacity: 0; transform: scale(1); } }
+@keyframes inkra-loading-trail { 0%, 100% { opacity: .28; transform: scaleX(.45); } 50% { opacity: 1; transform: scaleX(1); } }
+
+@media (max-width: 40rem), (max-height: 32rem) {
+  .inkra-loading:is([data-mode="region"], [data-mode="fullscreen"]) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--inkra-space-2);
+  }
+  .inkra-loading[data-mode="fullscreen"] { padding: max(var(--inkra-space-2), env(safe-area-inset-top)) max(var(--inkra-space-2), env(safe-area-inset-right)) max(var(--inkra-space-2), env(safe-area-inset-bottom)) max(var(--inkra-space-2), env(safe-area-inset-left)); }
+  .inkra-loading:is([data-mode="region"], [data-mode="fullscreen"]) .inkra-loading__layout { flex: 1 0 auto; order: 4; }
+  .inkra-loading__main { gap: var(--inkra-space-3); padding: var(--inkra-space-3); }
+  .inkra-loading__title { font-size: var(--inkra-text-xl); }
+  .inkra-loading[data-preset="staged"] .inkra-loading__main { grid-template-columns: minmax(0, 1fr); }
+  .inkra-loading[data-preset="staged"] .inkra-loading__stages { grid-column: auto; grid-row: auto; }
+  .inkra-loading__slot { flex: none; margin-block: 0 !important; max-block-size: none; max-inline-size: min(100%, 28rem); overflow: visible; }
+  .inkra-loading__slot[data-slot="top-start"] { align-self: start; order: 1; }
+  .inkra-loading__slot[data-slot="top-end"] { align-self: end; order: 2; }
+  .inkra-loading__slot[data-slot="center"] { align-self: center; order: 3; }
+  .inkra-loading__slot[data-slot="bottom-start"] { align-self: start; order: 5; }
+  .inkra-loading__slot[data-slot="bottom-center"] { align-self: center; order: 6; }
+  .inkra-loading__slot[data-slot="bottom-end"] { align-self: end; order: 7; }
+  .inkra-loading__skeleton-grid { grid-template-columns: 1fr; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-loading__tip,
+  .inkra-loading__animation,
+  .inkra-loading__animation * { animation: none !important; }
+}
+
+@media (forced-colors: active) {
+  .inkra-loading__veil { background: Canvas; opacity: .92; }
+  .inkra-loading[data-blocking] { border: 1px solid CanvasText; }
+  .inkra-loading__animation { color: CanvasText; }
+}
+
+@media print {
+  .inkra-loading[data-mode="fullscreen"] { min-block-size: auto; position: static; }
+  .inkra-loading__background, .inkra-loading__veil { display: none; }
+  .inkra-loading__tip,
+  .inkra-loading__animation,
+  .inkra-loading__animation * { animation: none !important; }
+}

package/dist/styles/masonry.css

@@ -0,0 +1,68 @@
+.inkra-masonry {
+  box-sizing: border-box;
+  display: grid;
+  gap: var(--inkra-masonry-row-gap, 16px) var(--inkra-masonry-column-gap, 16px);
+  grid-template-columns: repeat(var(--inkra-masonry-columns, 1), minmax(0, 1fr));
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  overflow: clip;
+  overflow-clip-margin: 1px;
+  position: relative;
+}
+
+.inkra-masonry[data-mode="adaptive"] {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--inkra-masonry-min-column-width, 240px)), 1fr));
+}
+
+.inkra-masonry[data-layout="ready"] {
+  display: block;
+}
+
+.inkra-masonry__item {
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.inkra-masonry[data-layout="ready"] > .inkra-masonry__item {
+  inset-block-start: 0;
+  left: 0;
+  position: absolute;
+}
+
+.inkra-masonry[data-layout="ready"][data-animated] > .inkra-masonry__item {
+  transition: transform var(--inkra-motion-normal, 180ms) var(--inkra-ease, ease);
+}
+
+.inkra-masonry__item > * {
+  max-inline-size: 100%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-masonry[data-layout="ready"][data-animated] > .inkra-masonry__item {
+    transition-duration: 0ms;
+  }
+}
+
+@media (forced-colors: active) {
+  .inkra-masonry[data-layout="ready"][data-animated] > .inkra-masonry__item {
+    transition-duration: 0ms;
+  }
+}
+
+@media print {
+  .inkra-masonry,
+  .inkra-masonry[data-layout="ready"] {
+    block-size: auto !important;
+    display: grid;
+    overflow: visible;
+  }
+
+  .inkra-masonry[data-layout="ready"] > .inkra-masonry__item {
+    inline-size: auto !important;
+    position: static;
+    transform: none !important;
+    transition: none;
+  }
+}

package/dist/styles/number-ticker.css

@@ -28,6 +28,52 @@
   font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
 }
 
+.inkra-number-ticker__reels {
+  display: inline-flex;
+  align-items: baseline;
+  unicode-bidi: isolate;
+  line-height: var(--inkra-line-ui, 1.45);
+}
+
+.inkra-number-ticker__column {
+  display: inline-grid;
+  flex: none;
+  overflow: hidden;
+  vertical-align: bottom;
+}
+
+.inkra-number-ticker__column-inner {
+  display: grid;
+  min-width: 0;
+  height: 1lh;
+  overflow: hidden;
+}
+
+.inkra-number-ticker__face {
+  grid-area: 1 / 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 1lh;
+  white-space: pre;
+}
+
+.inkra-number-ticker__column[data-digit] .inkra-number-ticker__face {
+  width: 1ch;
+}
+
+.inkra-number-ticker__face > .inkra-pencil-text {
+  flex: none;
+}
+
+@media (prefers-reduced-motion: reduce), print {
+  .inkra-number-ticker__column { grid-template-columns: 1fr !important; }
+  .inkra-number-ticker__column[data-digit] { width: 1ch !important; }
+  .inkra-number-ticker__column[data-departing] { display: none; }
+  .inkra-number-ticker__face[data-face="from"] { display: none; }
+  .inkra-number-ticker__face[data-face="to"] { transform: none !important; opacity: 1 !important; }
+}
+
 .inkra-number-ticker__prefix,
 .inkra-number-ticker__suffix {
   align-items: center;

package/dist/styles/pagination.css

@@ -1,4 +1,14 @@
 .inkra-pagination { min-inline-size: 0; max-inline-size: 100%; color: var(--inkra-ink); }
+.inkra-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--inkra-space-2); }
+.inkra-pagination[data-align="start"] { justify-content: flex-start; }
+.inkra-pagination[data-align="center"] { justify-content: center; }
+.inkra-pagination[data-align="end"] { justify-content: flex-end; }
+.inkra-pagination__size { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 100%; }
+.inkra-pagination__size .inkra-select__trigger { max-inline-size: 100%; }
+.inkra-pagination__list { min-inline-size: 0; }
+.inkra-pagination[data-wrap="true"] .inkra-pagination__list { flex-wrap: wrap; }
+.inkra-pagination[data-wrap="true"][data-align="center"] .inkra-pagination__list { justify-content: center; }
+.inkra-pagination[data-wrap="true"][data-align="end"] .inkra-pagination__list { justify-content: flex-end; }
 .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; }