rei-kit 2.15.0 → 2.17.0

package/dist/styles.css

@@ -1464,6 +1464,98 @@ to {
   color: var(--color-ink-soft);
 }
 
+.rk-color-row[data-v-5ca23aa9] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* The well is what is seen; the input inside it is the whole target. A
+   native colour input cannot be styled past its swatch in every browser, so
+   it is stretched over a box that can be. */
+.rk-color-well[data-v-5ca23aa9] {
+  position: relative;
+  display: block;
+  width: 2.75rem;
+  height: 2.75rem;
+  overflow: hidden;
+  border-radius: var(--radius-card);
+  border: 1px solid var(--color-hair);
+  background: var(--rk-color);
+}
+.rk-color-native[data-v-5ca23aa9] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  opacity: 0;
+}
+
+/* The ring goes on the well, since the input it belongs to is invisible. */
+.rk-color-well[data-v-5ca23aa9]:has(.rk-color-native:focus-visible) {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+.rk-color-native[data-v-5ca23aa9]:disabled {
+  cursor: not-allowed;
+}
+.rk-color-hex[data-v-5ca23aa9] {
+  width: 7.5rem;
+  height: 2.75rem;
+  border-radius: var(--radius-card);
+  padding: 0 0.75rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  /* 16px like every other text control here: iOS zooms the viewport when it
+     focuses a field under 16px and never zooms back. */
+  font-size: 1rem;
+  color: var(--color-ink);
+}
+.rk-color-hex[data-v-5ca23aa9]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -1px;
+}
+.rk-color-hex[data-v-5ca23aa9]:disabled {
+  opacity: 0.5;
+}
+.rk-color-swatches[data-v-5ca23aa9] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+.rk-color-swatch[data-v-5ca23aa9] {
+  display: block;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 9999px;
+  border: 1px solid var(--color-hair);
+  background: var(--rk-color);
+  transition: transform var(--duration-fast) var(--ease-standard);
+}
+.rk-color-swatch[data-v-5ca23aa9]:hover:not(:disabled) {
+  transform: scale(1.1);
+}
+
+/* A ring around the chosen one rather than a tick: a tick has to be dark or
+   light to be seen, and the swatch beneath it is whatever the app chose. */
+.rk-color-swatch.is-chosen[data-v-5ca23aa9] {
+  box-shadow:
+    0 0 0 2px var(--color-surface),
+    0 0 0 4px var(--color-primary);
+}
+.rk-color-swatch[data-v-5ca23aa9]:disabled {
+  opacity: 0.5;
+}
+@media (prefers-reduced-motion: reduce) {
+.rk-color-swatch[data-v-5ca23aa9] {
+    transition: none;
+}
+.rk-color-swatch[data-v-5ca23aa9]:hover:not(:disabled) {
+    transform: none;
+}
+}
+
 .rk-copy[data-v-c481e140] {
   display: inline-flex;
   height: 2.25rem;
@@ -1726,6 +1818,68 @@ to {
   width: 14rem;
 }
 
+.rk-timeline[data-v-08b15ce8] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-left: 1.5rem;
+}
+
+/* Stops short of both ends: a line running past the first and last dots
+   reads as a sequence that continues out of view. */
+.rk-timeline-rail[data-v-08b15ce8] {
+  position: absolute;
+  top: 0.5rem;
+  bottom: 0.75rem;
+  left: 0.25rem;
+  width: 1px;
+  background: var(--color-hair);
+}
+.rk-timeline-event[data-v-08b15ce8] {
+  position: relative;
+}
+.rk-timeline-marker[data-v-08b15ce8] {
+  position: absolute;
+  top: 0.125rem;
+  left: -1.5rem;
+  display: grid;
+  place-items: center;
+}
+
+/* The ring is the page's own ground, so the dot sits on the rail rather
+   than being crossed by it. */
+.rk-timeline-dot[data-v-08b15ce8] {
+  display: grid;
+  width: 0.625rem;
+  height: 0.625rem;
+  place-items: center;
+  border-radius: 9999px;
+  border: 2px solid var(--color-canvas);
+  color: var(--color-on-primary);
+}
+.rk-timeline-time[data-v-08b15ce8] {
+  font-size: 0.75rem;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-ink-soft);
+}
+.rk-timeline-title[data-v-08b15ce8] {
+  margin-top: 0.125rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-ink);
+}
+.rk-timeline-description[data-v-08b15ce8] {
+  margin-top: 0.125rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--color-ink-soft);
+}
+.rk-timeline-body[data-v-08b15ce8] {
+  margin-top: 0.5rem;
+}
+
 .rk-date[data-v-154e27fb] {
   display: block;
 }
@@ -3145,18 +3299,18 @@ to {
 }
 }
 
-.rk-mega[data-v-343f9362] {
+.rk-mega[data-v-9c8be532] {
   position: relative;
 }
-.rk-mega-bar[data-v-343f9362] {
+.rk-mega-bar[data-v-9c8be532] {
   display: flex;
   align-items: center;
   gap: 0.25rem;
 }
-.rk-mega-item[data-v-343f9362] {
+.rk-mega-item[data-v-9c8be532] {
   position: static;
 }
-.rk-mega-top[data-v-343f9362] {
+.rk-mega-top[data-v-9c8be532] {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
@@ -3167,25 +3321,25 @@ to {
   color: var(--color-ink-soft);
   transition: color var(--duration-fast) var(--ease-standard);
 }
-.rk-mega-top[data-v-343f9362]:hover,
-.rk-mega-top[aria-expanded='true'][data-v-343f9362] {
+.rk-mega-top[data-v-9c8be532]:hover,
+.rk-mega-top[aria-expanded='true'][data-v-9c8be532] {
   color: var(--color-ink);
 }
-.rk-mega-top.is-active[data-v-343f9362] {
+.rk-mega-top.is-active[data-v-9c8be532] {
   color: var(--color-primary);
 }
-.rk-mega-twist[data-v-343f9362] {
+.rk-mega-twist[data-v-9c8be532] {
   width: 0.875rem;
   height: 0.875rem;
   transition: rotate var(--duration-fast) var(--ease-standard);
 }
-.rk-mega-twist.is-open[data-v-343f9362] {
+.rk-mega-twist.is-open[data-v-9c8be532] {
   rotate: 180deg;
 }
 
 /* Full width of the bar rather than of the button: that is what makes it a
    mega menu and not a dropdown. */
-.rk-mega-panel[data-v-343f9362] {
+.rk-mega-panel[data-v-9c8be532] {
   position: absolute;
   top: calc(100% + 0.5rem);
   left: 0;
@@ -3194,15 +3348,15 @@ to {
   border-radius: var(--radius-card);
   padding: 1.25rem;
 }
-.rk-mega-panel[hidden][data-v-343f9362] {
+.rk-mega-panel[hidden][data-v-9c8be532] {
   display: none;
 }
-.rk-mega-columns[data-v-343f9362] {
+.rk-mega-columns[data-v-9c8be532] {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
   gap: 1.5rem;
 }
-.rk-mega-column-title[data-v-343f9362] {
+.rk-mega-column-title[data-v-9c8be532] {
   margin-bottom: 0.5rem;
   font-size: 0.6875rem;
   font-weight: 600;
@@ -3210,26 +3364,26 @@ to {
   text-transform: uppercase;
   color: var(--color-ink-soft);
 }
-.rk-mega-links[data-v-343f9362] {
+.rk-mega-links[data-v-9c8be532] {
   display: flex;
   flex-direction: column;
   gap: 1px;
 }
-.rk-mega-link[data-v-343f9362] {
+.rk-mega-link[data-v-9c8be532] {
   display: block;
   border-radius: var(--radius-cell);
   padding: 0.375rem 0.5rem;
   transition: background-color var(--duration-fast) var(--ease-standard);
 }
-.rk-mega-link[data-v-343f9362]:hover {
+.rk-mega-link[data-v-9c8be532]:hover {
   background: var(--color-muted);
 }
-.rk-mega-link-label[data-v-343f9362] {
+.rk-mega-link-label[data-v-9c8be532] {
   display: block;
   font-size: 0.875rem;
   color: var(--color-ink);
 }
-.rk-mega-link-note[data-v-343f9362] {
+.rk-mega-link-note[data-v-9c8be532] {
   display: block;
   margin-top: 0.125rem;
   font-size: 0.75rem;
@@ -3240,10 +3394,10 @@ to {
 /* On a narrow screen the panel is the page width and the columns stack,
    because a four-column grid in a 390px column is four unreadable columns. */
 @media (max-width: 48rem) {
-.rk-mega-panel[data-v-343f9362] {
+.rk-mega-panel[data-v-9c8be532] {
     padding: 1rem;
 }
-.rk-mega-columns[data-v-343f9362] {
+.rk-mega-columns[data-v-9c8be532] {
     grid-template-columns: minmax(0, 1fr);
     gap: 1rem;
 }

package/dist/web.js

@@ -1602,10 +1602,10 @@ var MegaMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 					"aria-current"
 				])) : (openBlock(), createElementBlock("button", {
 					key: 1,
-					type: "button",
-					class: normalizeClass(["rk-mega-top focus-ring", { "is-active": item.key === __props.active }]),
 					ref_for: true,
 					ref: (el) => setButton(item.key, el),
+					type: "button",
+					class: normalizeClass(["rk-mega-top focus-ring", { "is-active": item.key === __props.active }]),
 					"aria-expanded": open.value === item.key,
 					"aria-controls": panelId(item.key),
 					onClick: ($event) => toggle(item.key)
@@ -1634,7 +1634,7 @@ var MegaMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), 128))])], 40, _hoisted_1$1);
 		};
 	}
-}), [["__scopeId", "data-v-343f9362"]]);
+}), [["__scopeId", "data-v-9c8be532"]]);
 //#endregion
 //#region src/web/NavLinks.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label"];