@kolkrabbi/kol-theme 0.18.0 → 0.19.0

package/kol-components-atoms.css

@@ -892,8 +892,16 @@ a:hover .icon-hover,
  * between. `sm` is the default and carries no class — it's on .kol-icon-frame
  * above. `full` is a deliberate exception to the hard 4px repo invariant,
  * because a round frame is its own chrome idiom (edge-straddling controls,
- * avatars, status dots) rather than a radius tweak. */
-.kol-icon-frame-radius-full { border-radius: 9999px; }
+ * avatars, status dots) rather than a radius tweak.
+ *
+ * Shared with `.kol-btn-radius-full` (component 0.20.0): Button gained the same
+ * two-value `radius` prop, and an icon-only Button IS this control with states.
+ * ONE rule rather than a second copy of the value — no --kol-* token holds a
+ * full round today (checked, zero hits), and inventing one for a single value
+ * used by one rule adds a name without adding a source of truth. If such a
+ * token ever lands beside --kol-radius-sm, this one selector reads it. */
+.kol-icon-frame-radius-full,
+.kol-btn-radius-full { border-radius: 9999px; }
 
 /* pinned squares — the box never moves with glyph size (user law 2026-07-28) */
 .kol-icon-frame-sm { width: 28px; height: 28px; }

package/kol-components-organisms.css

@@ -537,6 +537,58 @@
   overflow-y: auto;
 }
 
+/* Thumb — the tile's media box. It is the positioning context for the video
+ * fallback below, which is the only reason it carries `position`. */
+.kol-media-thumb {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+/* A blank square must never be the resting state (lobby/MediaLibraryVideoFallback,
+ * filed from kol-website 2026-08-01, quoting the consumer this replaced).
+ *
+ * A <video> paints NOTHING until a frame decodes — so on a slow link, or a codec
+ * the browser cannot decode at all, a video tile is an empty grey box with no
+ * name and no type marker, and the page reads as broken rather than as loading.
+ * 222 of the 433 objects in the reference bucket are video/mp4.
+ *
+ * This is the <img alt> equivalent: a play glyph and the filename, sitting
+ * BEHIND the video and revealed only while it has nothing to show. The video
+ * covers it the moment a frame lands, so a decoding tile never flashes it.
+ *
+ * NB the loading strategy is deliberately untouched. The brief probed
+ * preload=metadata + #t= against preload=auto + seek and BOTH timed out
+ * headless (no h264 decoder), so that test discriminates nothing and no
+ * evidence exists either way. The fallback needs no decoder to justify it. */
+.kol-media-thumb-fallback {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kol-spacing-2);
+  padding-inline: var(--kol-spacing-3);
+  text-align: center;
+  color: var(--kol-fg-48);
+  pointer-events: none;
+}
+
+.kol-media-thumb-fallback > span {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Painted — the video has a frame, so the fallback stops being the tile's
+ * resting state. Kept in the layout box (opacity, not display) so nothing
+ * reflows when the first frame arrives. */
+.kol-media-thumb-fallback[data-painted='true'] {
+  opacity: 0;
+}
+
 /* Sortable header — a real button inside the <th> so it is keyboard-reachable.
  * The glyph is always in the layout box (opacity, not display) so the header
  * does not reflow on first sort. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-theme",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "KOL (Kolkrabbi) design-system tokens + base CSS — brand-neutral. The canonical token/cascade layer every other KOL package and consumer builds on.",
   "license": "MIT",
   "type": "module",