@inkra/react 0.2.0 → 0.4.3

package/dist/styles/tooltip.css

@@ -0,0 +1,78 @@
+.inkra-tooltip__content {
+  animation: inkra-tooltip-content-in var(--inkra-motion-fast) var(--inkra-ease) both;
+  max-height: min(50dvh, var(--radix-tooltip-content-available-height, 50dvh));
+  max-width: min(20rem, var(--radix-tooltip-content-available-width, calc(100dvw - var(--inkra-space-4))));
+  outline: 0;
+  transform-origin: var(--radix-tooltip-content-transform-origin);
+  z-index: calc(var(--inkra-z-tooltip, 40) + var(--inkra-floating-layer-offset, 0));
+}
+
+.inkra-tooltip__content[data-state="closed"] {
+  animation: inkra-tooltip-content-out var(--inkra-motion-fast) var(--inkra-ease) both;
+  pointer-events: none;
+}
+
+.inkra-tooltip__surface {
+  color: var(--inkra-ink);
+  display: block;
+  max-height: inherit;
+  max-width: inherit;
+  min-width: 0;
+}
+
+.inkra-tooltip__content-body {
+  box-sizing: border-box;
+  font-family: var(--inkra-font-body);
+  font-size: var(--inkra-text-sm);
+  line-height: var(--inkra-line-ui);
+  max-height: inherit;
+  max-width: inherit;
+  overflow: auto;
+  overflow-wrap: anywhere;
+  overscroll-behavior: contain;
+  padding: var(--inkra-space-2) var(--inkra-space-3);
+  scrollbar-gutter: stable;
+  user-select: text;
+}
+
+@keyframes inkra-tooltip-content-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--inkra-space-1)) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes inkra-tooltip-content-out {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(var(--inkra-space-1)) scale(0.98);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-tooltip__content {
+    animation: none !important;
+  }
+}
+
+@media (forced-colors: active) {
+  .inkra-tooltip__surface {
+    background: Canvas;
+    border: 1px solid CanvasText;
+    color: CanvasText;
+  }
+}
+
+@media print {
+  .inkra-tooltip__content {
+    display: none;
+  }
+}

package/dist/styles/transfer.css

@@ -0,0 +1,148 @@
+.inkra-transfer {
+  color: var(--inkra-ink);
+  container-name: inkra-transfer;
+  container-type: inline-size;
+  font-family: var(--inkra-font-body);
+  line-height: var(--inkra-line-ui);
+  min-width: 0;
+}
+
+.inkra-transfer__layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: stretch;
+  gap: var(--inkra-space-4);
+  min-width: 0;
+}
+
+.inkra-transfer__panel {
+  display: grid;
+  grid-template-rows: auto auto auto minmax(180px, 1fr);
+  gap: var(--inkra-space-3);
+  min-width: 0;
+  min-height: 360px;
+  padding: var(--inkra-space-4);
+  border-radius: var(--inkra-radius-lg);
+}
+
+.inkra-transfer__panel[data-searchable] {
+  grid-template-rows: auto auto auto auto minmax(180px, 1fr);
+}
+
+.inkra-transfer__panel-focus {
+  --inkra-accent-strong: var(--inkra-focus);
+
+  display: block !important;
+  inset: calc(-1 * var(--inkra-focus-offset));
+  opacity: 0;
+  pointer-events: none;
+  position: absolute !important;
+  z-index: 3;
+}
+
+.inkra-transfer__panel:focus-visible { outline: 0; }
+.inkra-transfer__panel:focus-visible > .inkra-transfer__panel-focus {
+  opacity: 1;
+}
+
+.inkra-transfer__header,
+.inkra-transfer__selection-bar,
+.inkra-transfer__item {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.inkra-transfer__header { justify-content: space-between; gap: var(--inkra-space-3); }
+.inkra-transfer__title { min-width: 0; font-size: var(--inkra-text-lg); }
+.inkra-transfer__count { flex: 0 0 auto; color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); }
+.inkra-transfer__divider { display: block; width: 100%; height: 6px; }
+.inkra-transfer__selection-bar { min-height: var(--inkra-touch-target); }
+.inkra-transfer__selection-bar .inkra-selection-control { flex: 1 1 auto; min-width: 0; }
+
+.inkra-transfer__list {
+  display: grid;
+  align-content: start;
+  gap: var(--inkra-space-1);
+  min-width: 0;
+  min-height: 180px;
+  max-height: 360px;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+  list-style: none;
+  scrollbar-gutter: stable;
+}
+
+.inkra-transfer__item {
+  gap: var(--inkra-space-2);
+  min-height: var(--inkra-touch-target);
+  padding-block: var(--inkra-space-1);
+}
+
+.inkra-transfer__item > .inkra-selection-control { flex: 1 1 auto; min-width: 0; }
+.inkra-transfer__item > .inkra-button { flex: 0 0 var(--inkra-touch-target); }
+.inkra-transfer__item[data-disabled] { opacity: .58; }
+
+.inkra-transfer__item-copy {
+  display: grid;
+  gap: var(--inkra-space-1);
+  min-width: 0;
+}
+
+.inkra-transfer__item-label,
+.inkra-transfer__item-description {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.inkra-transfer__item-description { color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); }
+
+.inkra-transfer__empty {
+  display: grid;
+  place-items: center;
+  min-height: 180px;
+  padding: var(--inkra-space-6) var(--inkra-space-4);
+  color: var(--inkra-ink-muted);
+  text-align: center;
+}
+
+.inkra-transfer__actions {
+  align-self: center;
+  display: grid;
+  gap: var(--inkra-space-2);
+}
+
+.inkra-transfer[data-disabled] { opacity: .72; }
+
+.inkra-transfer .inkra-transfer__direction-icon[data-direction="to-source"] { transform: scaleX(-1); }
+.inkra-transfer:dir(rtl) .inkra-transfer__direction-icon[data-direction="to-target"] { transform: scaleX(-1); }
+.inkra-transfer:dir(rtl) .inkra-transfer__direction-icon[data-direction="to-source"] { transform: none; }
+
+@container inkra-transfer (max-width: 720px) {
+  .inkra-transfer__layout { grid-template-columns: minmax(0, 1fr); }
+  .inkra-transfer__panel { min-height: 320px; }
+  .inkra-transfer__list { max-height: 280px; }
+  .inkra-transfer__actions { grid-auto-flow: column; justify-self: center; }
+  .inkra-transfer:dir(ltr) .inkra-transfer__direction-icon[data-direction="to-target"],
+  .inkra-transfer:dir(rtl) .inkra-transfer__direction-icon[data-direction="to-target"] {
+    transform: rotate(90deg);
+  }
+  .inkra-transfer:dir(ltr) .inkra-transfer__direction-icon[data-direction="to-source"],
+  .inkra-transfer:dir(rtl) .inkra-transfer__direction-icon[data-direction="to-source"] {
+    transform: rotate(-90deg);
+  }
+}
+
+@media (forced-colors: active) {
+  .inkra-transfer__panel { border: 1px solid CanvasText; }
+  .inkra-transfer__panel:focus-visible { outline: 2px solid Highlight; outline-offset: 3px; }
+  .inkra-transfer__panel-focus { display: none !important; }
+}
+
+@media print {
+  .inkra-transfer__layout { grid-template-columns: 1fr 1fr; }
+  .inkra-transfer__actions { display: none; }
+  .inkra-transfer__panel { border: 1px solid currentColor; }
+}
+

package/dist/styles/tree-select.css

@@ -0,0 +1,131 @@
+.inkra-tree-select {
+  --inkra-tree-select-control-height: var(--inkra-control-md);
+
+  display: flex;
+  align-items: center;
+  min-height: var(--inkra-touch-target);
+  min-width: 0;
+  width: 100%;
+  color: var(--inkra-ink);
+}
+
+.inkra-tree-select[data-size="sm"] { --inkra-tree-select-control-height: var(--inkra-control-sm); }
+.inkra-tree-select[data-size="lg"] { --inkra-tree-select-control-height: var(--inkra-control-lg); }
+
+.inkra-button-group.inkra-tree-select__control {
+  align-items: center;
+  block-size: var(--inkra-tree-select-control-height);
+  min-width: 0;
+  overflow: visible;
+  width: 100%;
+}
+
+.inkra-tree-select__control > .inkra-tree-select__trigger { flex: 1 1 auto; }
+.inkra-tree-select__control > .inkra-tree-select__clear { flex: 0 0 auto; }
+
+.inkra-tree-select__trigger,
+.inkra-tree-select__trigger > .inkra-button__surface {
+  min-width: 0;
+}
+
+.inkra-tree-select__trigger .inkra-button__content,
+.inkra-tree-select__trigger .inkra-button__label,
+.inkra-tree-select__trigger .inkra-button__label > span,
+.inkra-tree-select__value {
+  min-width: 0;
+  width: 100%;
+}
+
+.inkra-tree-select__value {
+  display: block;
+  overflow: hidden;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.inkra-tree-select__value[data-placeholder] {
+  color: var(--inkra-ink-subtle);
+}
+
+.inkra-tree-select__clear[aria-hidden="true"] {
+  visibility: hidden;
+}
+
+.inkra-tree-select__control .inkra-button-group__divider[data-orientation="vertical"] {
+  block-size: var(--inkra-tree-select-control-height);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+}
+
+.inkra-tree-select[data-invalid] {
+  color: var(--inkra-danger);
+}
+
+.inkra-tree-select[data-invalid] .inkra-tree-select__control {
+  --inkra-accent-strong: var(--inkra-danger);
+}
+
+.inkra-tree-select__popover {
+  width: max(var(--radix-popover-trigger-width, 18rem), 18rem);
+  max-width: min(32rem, calc(100vw - var(--inkra-space-4)));
+}
+
+.inkra-tree-select__popover .inkra-popover__content-body {
+  display: grid;
+  gap: var(--inkra-space-2);
+  overflow: hidden;
+  padding: var(--inkra-space-3);
+}
+
+.inkra-tree-select__search {
+  min-width: 0;
+}
+
+.inkra-tree-select__tree {
+  max-height: min(22rem, calc(var(--radix-popover-content-available-height, 70vh) - 5rem));
+  min-height: var(--inkra-touch-target);
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: 2px;
+  scrollbar-gutter: stable;
+}
+
+.inkra-tree-select__item .inkra-tree__item-content {
+  cursor: default;
+}
+
+.inkra-tree-select__form-anchor {
+  display: none;
+}
+
+.inkra-tree-select[data-disabled] {
+  opacity: .6;
+}
+
+@media (max-width: 30rem) {
+  .inkra-tree-select__popover {
+    width: calc(100vw - var(--inkra-space-4));
+  }
+}
+
+@media (forced-colors: active) {
+  .inkra-tree-select[data-invalid] .inkra-tree-select__control {
+    outline: 2px solid Mark;
+    outline-offset: 2px;
+  }
+
+  .inkra-tree-select__popover {
+    border: 1px solid CanvasText;
+  }
+
+  .inkra-tree-select__value[data-placeholder] {
+    color: GrayText;
+  }
+}
+
+@media print {
+  .inkra-tree-select__clear {
+    display: none;
+  }
+}

package/dist/styles/tree.css

@@ -0,0 +1,59 @@
+.inkra-tree { display: grid; gap: 2px; min-width: 0; color: var(--inkra-ink); outline: none; }
+.inkra-tree__item { position: relative; min-width: 0; outline: none; }
+.inkra-tree__item-content { --inkra-tree-reserved-inline: calc(var(--inkra-touch-target) + var(--inkra-space-2) + 5rem); position: relative; isolation: isolate; display: grid; grid-template-columns: var(--inkra-touch-target) minmax(0, auto) minmax(0, 1fr); align-items: start; box-sizing: border-box; inline-size: 100%; min-height: var(--inkra-touch-target); padding-inline-start: min(calc((var(--inkra-tree-level, 1) - 1) * var(--inkra-tree-indent, 24px)), max(0px, calc(100% - var(--inkra-tree-reserved-inline)))); padding-inline-end: var(--inkra-space-2); border-radius: var(--inkra-radius-md); overflow: visible; }
+.inkra-tree__item-content[data-has-icon] { --inkra-tree-reserved-inline: calc(var(--inkra-touch-target) + 28px + var(--inkra-space-2) + 5rem); }
+.inkra-tree__item-content:not([data-has-icon]) { grid-template-columns: var(--inkra-touch-target) minmax(0, 1fr); }
+.inkra-tree__selection, .inkra-tree__focus { position: absolute; inset: 2px; z-index: -1; pointer-events: none; }
+.inkra-tree__focus { inset: 1px; z-index: 2; }
+.inkra-tree__disclosure, .inkra-tree__disclosure-spacer { width: var(--inkra-touch-target); height: var(--inkra-touch-target); }
+.inkra-tree__disclosure { position: relative; appearance: none; display: inline-grid; place-items: center; border: 0; padding: 0; background: transparent; color: var(--inkra-ink); cursor: pointer; }
+.inkra-tree__disclosure:focus { outline: none; }
+.inkra-tree__disclosure-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; pointer-events: none; }
+.inkra-tree__disclosure-icon > * { max-width: 100%; max-height: 100%; }
+.inkra-tree__disclosure-focus { position: absolute; inset: 2px; pointer-events: none; }
+.inkra-tree__chevron { transform: rotate(-90deg); transition: transform var(--inkra-motion-normal) var(--inkra-ease); }
+.inkra-tree__item-content[data-expanded] .inkra-tree__chevron { transform: rotate(0deg); }
+.inkra-tree:dir(rtl) .inkra-tree__chevron { transform: rotate(90deg); }
+.inkra-tree:dir(rtl) .inkra-tree__item-content[data-expanded] .inkra-tree__chevron { transform: rotate(0deg); }
+.inkra-tree__icon { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-block-start: var(--inkra-space-1); color: var(--inkra-accent-strong); }
+.inkra-tree__icon > * { max-width: 100%; max-height: 100%; }
+.inkra-tree__copy { display: grid; gap: 2px; min-width: 0; padding-block: var(--inkra-space-2); overflow-wrap: anywhere; }
+.inkra-tree[data-size="sm"] .inkra-tree__copy { padding-block: var(--inkra-space-1); }
+.inkra-tree[data-size="lg"] .inkra-tree__copy { padding-block: var(--inkra-space-3); }
+.inkra-tree[data-size="lg"] .inkra-tree__item-content { min-height: 52px; }
+.inkra-tree__title { min-width: 0; font-size: var(--inkra-text-md); line-height: var(--inkra-line-ui); }
+.inkra-tree__description { min-width: 0; color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); line-height: var(--inkra-line-body); }
+.inkra-tree__item[data-disabled] .inkra-tree__item-content { opacity: .55; }
+.inkra-tree__empty { min-height: 72px; display: grid; place-items: center; padding: var(--inkra-space-4); color: var(--inkra-ink-muted); text-align: center; }
+
+.inkra-tree__item-content { animation: inkra-tree-row-in var(--inkra-motion-normal) var(--inkra-ease); }
+.inkra-tree__selection { animation: inkra-tree-selection-in var(--inkra-motion-fast) var(--inkra-ease); }
+
+@keyframes inkra-tree-row-in {
+  from { opacity: 0; transform: translateY(calc(-1 * var(--inkra-space-1))); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes inkra-tree-selection-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-tree__chevron { transition: none; }
+  .inkra-tree__item-content,
+  .inkra-tree__selection { animation: none !important; }
+}
+
+@media print {
+  .inkra-tree__item-content,
+  .inkra-tree__selection { animation: none !important; }
+}
+@media (forced-colors: active) {
+  .inkra-pencil-surface.inkra-tree__selection,
+  .inkra-pencil-surface.inkra-tree__focus,
+  .inkra-pencil-surface.inkra-tree__disclosure-focus { display: none !important; }
+  .inkra-tree__item[data-selected] .inkra-tree__item-content { outline: 1px solid Highlight; color: HighlightText; background: Highlight; forced-color-adjust: none; }
+  .inkra-tree__item[data-focus-visible] .inkra-tree__item-content { outline: 2px solid Highlight; outline-offset: -2px; }
+  .inkra-tree__disclosure[data-focus-visible] { outline: 2px solid Highlight; outline-offset: -2px; }
+}

package/dist/styles/typewriter.css

@@ -0,0 +1,62 @@
+.inkra-typewriter {
+  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;
+  white-space: pre-wrap;
+}
+
+.inkra-typewriter__visual {
+  overflow-wrap: anywhere;
+  user-select: text;
+}
+
+.inkra-typewriter__grapheme,
+.inkra-typewriter__space {
+  visibility: hidden;
+}
+
+.inkra-typewriter__grapheme[data-revealed="true"],
+.inkra-typewriter__space[data-revealed="true"] {
+  visibility: visible;
+}
+
+.inkra-typewriter__space {
+  font: inherit;
+}
+
+.inkra-typewriter__accessible {
+  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: pre-wrap !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-typewriter__grapheme,
+  .inkra-typewriter__space {
+    visibility: visible;
+  }
+}
+
+@media (forced-colors: active) {
+  .inkra-typewriter {
+    color: CanvasText;
+  }
+}
+
+@media print {
+  .inkra-typewriter__grapheme,
+  .inkra-typewriter__space {
+    visibility: visible;
+  }
+}

package/dist/styles/upload.css

@@ -0,0 +1,60 @@
+.inkra-upload { container-type: inline-size; display: grid; gap: var(--inkra-space-4); min-width: 0; color: var(--inkra-ink); }
+.inkra-upload__dropzone {
+  position: relative; min-height: 148px; padding: var(--inkra-space-6); display: grid; place-items: center; align-content: center;
+  gap: var(--inkra-space-2); text-align: center; cursor: pointer; border-radius: var(--inkra-radius-lg);
+}
+.inkra-upload__focus-ring {
+  --inkra-accent-strong: var(--inkra-focus);
+  position: absolute !important; inset: var(--inkra-focus-width); display: block !important;
+  opacity: 0; pointer-events: none; z-index: 3;
+}
+.inkra-upload__dropzone:focus-visible { outline: 0; }
+.inkra-upload__dropzone:focus-visible .inkra-upload__focus-ring { opacity: 1; }
+.inkra-upload__dropzone[data-drag-active] { color: var(--inkra-selection-foreground); }
+.inkra-upload[data-disabled] .inkra-upload__dropzone { cursor: not-allowed; opacity: 0.55; }
+.inkra-upload__input { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
+.inkra-upload__icon { color: currentColor; }
+.inkra-upload__prompt { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--inkra-space-2); font-size: var(--inkra-text-md); }
+.inkra-upload__hint, .inkra-upload__meta { color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); }
+.inkra-upload__rejections { color: var(--inkra-danger-foreground); }
+.inkra-upload__rejections ul { margin: var(--inkra-space-2) 0 0; padding-inline-start: var(--inkra-space-6); }
+.inkra-upload__list { display: grid; gap: var(--inkra-space-3); margin: 0; padding: 0; list-style: none; }
+.inkra-upload__item-surface { display: flex; align-items: center; justify-content: space-between; gap: var(--inkra-space-4); min-width: 0; padding: var(--inkra-space-4); }
+.inkra-upload__file { display: grid; min-width: 0; flex: 1; gap: var(--inkra-space-1); }
+.inkra-upload__name { max-width: 100%; }
+.inkra-upload__error { color: var(--inkra-danger-foreground); font-size: var(--inkra-text-sm); }
+.inkra-upload__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--inkra-space-1); max-width: 100%; min-width: 0; }
+.inkra-upload__actions > .inkra-button { max-width: 100%; }
+.inkra-upload__actions .inkra-button__surface,
+.inkra-upload__actions .inkra-button__content { max-width: 100%; min-width: 0; }
+.inkra-upload__actions .inkra-button__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
+.inkra-upload__actions .inkra-button__label > .inkra-pencil-text,
+.inkra-upload__actions .inkra-button__label > .inkra-pencil-text > .inkra-pencil-text__source {
+  display: block; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.inkra-upload .inkra-progress { inline-size: min(280px, 100%); }
+.inkra-upload__item[data-status="success"] .inkra-upload__meta { color: var(--inkra-success-foreground); }
+.inkra-upload__item[data-status="error"] .inkra-upload__meta,
+.inkra-upload__item[data-status="cancelled"] .inkra-upload__meta { color: var(--inkra-danger-foreground); }
+@media (max-width: 36rem) {
+  .inkra-upload__dropzone { padding: var(--inkra-space-4); }
+  .inkra-upload__item-surface { align-items: stretch; flex-direction: column; }
+  .inkra-upload__actions { inline-size: 100%; justify-content: flex-start; }
+}
+@container (max-width: 36rem) {
+  .inkra-upload__dropzone { padding: var(--inkra-space-4); }
+  .inkra-upload__item-surface { align-items: stretch; flex-direction: column; }
+  .inkra-upload__actions { inline-size: 100%; justify-content: flex-start; }
+}
+@container (max-width: 24rem) {
+  .inkra-upload__actions { display: grid; grid-template-columns: minmax(0, 1fr); }
+  .inkra-upload__actions > .inkra-button { inline-size: 100%; }
+  .inkra-upload__actions .inkra-button__surface { inline-size: 100%; }
+}
+@media (forced-colors: active) {
+  .inkra-upload__dropzone { border: 1px solid CanvasText; }
+  .inkra-upload__dropzone:focus-visible { outline: 2px solid Highlight; outline-offset: var(--inkra-focus-offset); }
+  .inkra-upload__focus-ring { display: none !important; }
+  .inkra-upload__dropzone[data-drag-active] { outline: 2px solid Highlight; }
+  .inkra-upload__error, .inkra-upload__rejections { color: CanvasText; }
+}

package/dist/styles/virtual-list.css

@@ -0,0 +1,112 @@
+.inkra-virtual-list__frame {
+  min-inline-size: 0;
+  position: relative;
+}
+
+.inkra-virtual-list__focus {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.inkra-virtual-list__frame:has(> .inkra-virtual-list:focus-visible) > .inkra-virtual-list__focus {
+  opacity: 1;
+}
+
+.inkra-virtual-list {
+  block-size: 20rem;
+  color: var(--inkra-ink);
+  min-block-size: 8rem;
+  min-inline-size: 0;
+  outline: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  position: relative;
+  scrollbar-gutter: stable;
+}
+
+.inkra-virtual-list[data-external-scroll="true"] {
+  block-size: auto;
+  min-block-size: 0;
+  overflow: visible;
+  scrollbar-gutter: auto;
+}
+
+.inkra-virtual-list:focus-visible {
+  outline: none;
+}
+
+.inkra-virtual-list__items {
+  inline-size: 100%;
+  list-style: none;
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+  position: relative;
+}
+
+.inkra-virtual-list[data-virtualized="true"] .inkra-virtual-list__item {
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  position: absolute;
+}
+
+.inkra-virtual-list__item {
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-block-size: var(--inkra-touch-target);
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+  padding: var(--inkra-space-2) var(--inkra-space-3);
+  position: relative;
+  will-change: transform;
+}
+
+.inkra-virtual-list:not([data-virtualized="true"]) .inkra-virtual-list__item {
+  will-change: auto;
+}
+
+.inkra-virtual-list__item > .inkra-virtual-list__separator {
+  color: var(--inkra-border);
+  inset-block-start: -4px;
+  inset-inline: var(--inkra-space-3);
+  inline-size: auto;
+  opacity: .58;
+  position: absolute;
+  width: auto;
+}
+
+.inkra-virtual-list__empty {
+  color: var(--inkra-ink-muted);
+  display: grid;
+  min-block-size: 8rem;
+  padding: var(--inkra-space-6);
+  place-items: center;
+  text-align: center;
+}
+
+@media (forced-colors: active) {
+  .inkra-virtual-list__frame { border: 1px solid CanvasText; }
+  .inkra-virtual-list:focus-visible {
+    outline: var(--inkra-focus-width) solid Highlight;
+    outline-color: Highlight;
+    outline-offset: calc(-1 * var(--inkra-focus-width));
+  }
+  .inkra-virtual-list__item > .inkra-virtual-list__separator {
+    inset-block-start: 0;
+    opacity: 1;
+  }
+}
+
+@media print {
+  .inkra-virtual-list {
+    block-size: auto !important;
+    overflow: visible;
+  }
+
+  .inkra-virtual-list__item > .inkra-virtual-list__separator {
+    inset-block-start: 0;
+    opacity: 1;
+  }
+}