rei-kit 2.20.0 → 2.21.0

package/dist/styles.css

@@ -399,18 +399,18 @@
   background: color-mix(in srgb, var(--color-hair) 70%, transparent);
 }
 
-.rk-combo[data-v-aa2335fa] {
+.rk-combo[data-v-006740dc] {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 0.375rem;
 }
-.rk-combo-label[data-v-aa2335fa] {
+.rk-combo-label[data-v-006740dc] {
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--color-ink);
 }
-.rk-combo-field[data-v-aa2335fa] {
+.rk-combo-field[data-v-006740dc] {
   position: relative;
   display: flex;
   align-items: center;
@@ -418,14 +418,14 @@
 
 /* With chips the field is a box that wraps, and the input is one item in it
    that grows into whatever is left. */
-.rk-combo-field.is-multiple[data-v-aa2335fa] {
+.rk-combo-field.is-multiple[data-v-006740dc] {
   flex-wrap: wrap;
   gap: 0.25rem;
   min-height: 2.75rem;
   border-radius: var(--radius-card);
   padding: 0.3125rem 2rem 0.3125rem 0.375rem;
 }
-.rk-combo-chip[data-v-aa2335fa] {
+.rk-combo-chip[data-v-006740dc] {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
@@ -435,7 +435,7 @@
   font-size: 0.8125rem;
   color: var(--color-ink);
 }
-.rk-combo-chip-x[data-v-aa2335fa] {
+.rk-combo-chip-x[data-v-006740dc] {
   display: grid;
   width: 1.125rem;
   height: 1.125rem;
@@ -444,13 +444,13 @@
   color: var(--color-ink-soft);
   line-height: 1;
 }
-.rk-combo-chip-x[data-v-aa2335fa]:hover {
+.rk-combo-chip-x[data-v-006740dc]:hover {
   color: var(--color-ink);
 }
 
 /* 16px, like every other text control here: iOS zooms the viewport when it
    focuses a field under 16px and never zooms back. */
-.rk-combo-input[data-v-aa2335fa] {
+.rk-combo-input[data-v-006740dc] {
   width: 100%;
   height: 2.75rem;
   border-radius: var(--radius-card);
@@ -458,7 +458,7 @@
   font-size: 1rem;
   color: var(--color-ink);
 }
-.is-multiple .rk-combo-input[data-v-aa2335fa] {
+.is-multiple .rk-combo-input[data-v-006740dc] {
   width: auto;
   height: 1.75rem;
   min-width: 6rem;
@@ -469,29 +469,29 @@
   background: transparent;
   box-shadow: none;
 }
-.rk-combo-input[data-v-aa2335fa]:focus-visible {
+.rk-combo-input[data-v-006740dc]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: -1px;
 }
-.is-multiple .rk-combo-input[data-v-aa2335fa]:focus-visible {
+.is-multiple .rk-combo-input[data-v-006740dc]:focus-visible {
   outline: none;
 }
 
 /* The ring belongs to the whole box once the box is the control. */
-.rk-combo-field.is-multiple[data-v-aa2335fa]:focus-within {
+.rk-combo-field.is-multiple[data-v-006740dc]:focus-within {
   outline: 2px solid var(--color-primary);
   outline-offset: -1px;
 }
-.rk-combo-input[data-v-aa2335fa]:disabled {
+.rk-combo-input[data-v-006740dc]:disabled {
   opacity: 0.5;
 }
-.rk-combo-toggle[data-v-aa2335fa] {
+.rk-combo-toggle[data-v-006740dc] {
   position: absolute;
   right: 0.5rem;
   color: var(--color-ink-soft);
   font-size: 0.75rem;
 }
-.rk-combo-list[data-v-aa2335fa] {
+.rk-combo-list[data-v-006740dc] {
   position: absolute;
   top: calc(100% - 1.25rem);
   z-index: 50;
@@ -501,7 +501,7 @@
   border-radius: var(--radius-card);
   padding: 0.25rem;
 }
-.rk-combo-option[data-v-aa2335fa] {
+.rk-combo-option[data-v-006740dc] {
   cursor: pointer;
   border-radius: var(--radius-cell);
   padding: 0.5rem 0.625rem;
@@ -511,38 +511,38 @@
 
 /* A virtual row's height is the arithmetic the spacers are built on, so it
    cannot be left to the text inside it. */
-.rk-combo-option[style][data-v-aa2335fa] {
+.rk-combo-option[style][data-v-006740dc] {
   display: flex;
   align-items: center;
   padding-block: 0;
 }
-.rk-combo-option.is-highlighted[data-v-aa2335fa] {
+.rk-combo-option.is-highlighted[data-v-006740dc] {
   background: var(--color-muted);
 }
-.rk-combo-option.is-selected[data-v-aa2335fa] {
+.rk-combo-option.is-selected[data-v-006740dc] {
   font-weight: 600;
 }
-.rk-combo-empty[data-v-aa2335fa],
-.rk-combo-status[data-v-aa2335fa] {
+.rk-combo-empty[data-v-006740dc],
+.rk-combo-status[data-v-006740dc] {
   padding: 0.75rem 0.625rem;
   font-size: 0.875rem;
   color: var(--color-ink-soft);
 }
-.rk-combo-status[data-v-aa2335fa] {
+.rk-combo-status[data-v-006740dc] {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
-.rk-combo-status-rows[data-v-aa2335fa] {
+.rk-combo-status-rows[data-v-006740dc] {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
-.rk-combo-error[data-v-aa2335fa] {
+.rk-combo-error[data-v-006740dc] {
   font-size: 0.75rem;
   color: var(--color-negative);
 }
-.rk-combo-hint[data-v-aa2335fa] {
+.rk-combo-hint[data-v-006740dc] {
   font-size: 0.75rem;
   color: var(--color-ink-soft);
 }
@@ -1111,6 +1111,85 @@ to {
   outline-offset: 1px;
 }
 
+.rk-scroll[data-v-4c21cdc9] {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+}
+.rk-scroll-viewport[data-v-4c21cdc9] {
+  max-width: 100%;
+  max-height: 100%;
+}
+.rk-scroll-viewport.is-x[data-v-4c21cdc9] {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.rk-scroll-viewport.is-y[data-v-4c21cdc9] {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.rk-scroll-viewport.is-both[data-v-4c21cdc9] {
+  overflow: auto;
+}
+.rk-scroll-viewport[data-v-4c21cdc9]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* The fade paints over whatever the box sits on, so the colour is a hook:
+   a scroll area on a card sets it to the card's ground. */
+.rk-scroll-fade[data-v-4c21cdc9] {
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+  --rk-scroll-fade: var(--scroll-fade-color, var(--color-canvas));
+}
+.rk-scroll-fade.is-start-x[data-v-4c21cdc9],
+.rk-scroll-fade.is-end-x[data-v-4c21cdc9] {
+  inset-block: 0;
+  width: 1.5rem;
+}
+.rk-scroll-fade.is-start-y[data-v-4c21cdc9],
+.rk-scroll-fade.is-end-y[data-v-4c21cdc9] {
+  inset-inline: 0;
+  height: 1.5rem;
+}
+.rk-scroll-fade.is-start-x[data-v-4c21cdc9] {
+  inset-inline-start: 0;
+  background: linear-gradient(to right, var(--rk-scroll-fade), transparent);
+}
+.rk-scroll-fade.is-end-x[data-v-4c21cdc9] {
+  inset-inline-end: 0;
+  background: linear-gradient(to left, var(--rk-scroll-fade), transparent);
+}
+.rk-scroll-fade.is-start-y[data-v-4c21cdc9] {
+  inset-block-start: 0;
+  background: linear-gradient(to bottom, var(--rk-scroll-fade), transparent);
+}
+.rk-scroll-fade.is-end-y[data-v-4c21cdc9] {
+  inset-block-end: 0;
+  background: linear-gradient(to top, var(--rk-scroll-fade), transparent);
+}
+
+/* The insets are logical, so they land on the correct side on their own.
+   A gradient has no logical direction, so these two flip by hand. */
+[dir='rtl'] .rk-scroll-fade.is-start-x[data-v-4c21cdc9] {
+  background: linear-gradient(to left, var(--rk-scroll-fade), transparent);
+}
+[dir='rtl'] .rk-scroll-fade.is-end-x[data-v-4c21cdc9] {
+  background: linear-gradient(to right, var(--rk-scroll-fade), transparent);
+}
+
+.rk-vlist-rows[data-v-936ed40c] {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.rk-vlist-row[data-v-936ed40c] {
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
 .rk-stack[data-v-db629481] {
   display: inline-flex;
   align-items: center;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rei-kit",
-  "version": "2.20.0",
-  "description": "One kit, every look. 97 accessible Vue 3 + Tailwind 4 components, four materials (quiet, glass, brutal, soft) and ten WCAG-checked palettes, each switched with one attribute.",
+  "version": "2.21.0",
+  "description": "One kit, every look. 99 accessible Vue 3 + Tailwind 4 components, four materials (quiet, glass, brutal, soft) and ten WCAG-checked palettes, each switched with one attribute.",
   "keywords": [
     "vue",
     "vue3",