@humanforest/slidev-theme 0.1.0

package/components/Avatar.vue

@@ -0,0 +1,267 @@
+<!--
+  A person: their face in a ring, their name on a chip riding the ring's bottom edge, and what they
+  do under that.
+
+  ★★ ONE COMPONENT FOR ONE PERSON, AND A `::grid` FOR SEVERAL. A team slide is six of these in a
+  three-column grid, which is the arrangement Grid already draws and gates — a second component that
+  took an ARRAY of people would own a layout the deck has, and would then need its own answers for
+  columns, gutter and alignment. The same call MarkPair's note makes about pairs: the layout is not
+  the component's business.
+
+  ⚠ THE RING IS THE PAGE'S OWN INK AND THE CHIP IS THE COLOUR, AND THAT DIVISION IS THE DESIGN. A
+  photograph on a slide is a rectangle among rectangles; a circle with a heavy edge reads as a
+  PERSON at the back of a room, which is why every roster, credit and byline in the world draws one
+  — so the RING's whole job is to be an edge, and an edge is not a place to spend the brand. Drawn
+  in the green it competed with the name chip sitting on it and the object came out uniformly green,
+  which is the same as having no accent at all.
+
+  `currentColor`, which is `--deck-fg` on an ordinary slide: it turns over with the register the way
+  the Forest mark's own ring does, and inside a dark card it takes THAT card's ink rather than the
+  page's, which a literal `var(--deck-fg)` would get wrong. The quieter neutrals were tried and are
+  not edges at this width — `--deck-border-strong` is a 26% mix with the ground and came out as a
+  haze at 7-16px.
+
+  ★ SO THE CHIP CARRIES THE COLOUR ALONE: `--deck-accent` with `--deck-on-accent` as its ink, the
+  pair the tokens guarantee is readable. One green on the object, in the one place that is a label
+  rather than a frame.
+
+  ★★ EVERY MEASURE IS A RATIO OF THE DIAMETER OR A RUNG BESIDE IT. The ring is the Forest mark's own
+  ring ratio; the monogram is a fraction of the circle; the two caption sizes step down the deck's
+  type ramp with `size`. So the whole object scales as one thing, and there is no diameter at which
+  the name is suddenly too big for the face it names — which is exactly what a fixed caption size
+  did at `sm`, where a 48px name overhung a 160px circle on both sides.
+
+  ★ AND IT FALLS BACK TO INITIALS, not to a grey silhouette. A new hire whose photograph has not
+  arrived is the commonest case this component meets, and an empty circle in a row of faces reads as
+  a loading failure. Initials in the ring read as a person the deck has not photographed yet.
+-->
+<script setup>
+import { computed } from 'vue';
+import { MARK_SIZE, MARK_RING } from '@humanforest/tokens/logo';
+import { BACKGROUND_NAMES, groundStyle } from './backgrounds';
+import { assetUrl } from '../assetUrl.js';
+
+const props = defineProps({
+  /** Their photograph. Square is what the circle wants; anything else is covered and centred. */
+  image: { type: String, default: '' },
+  /** The person. Also the alt text, and the source of the initials when there is no photograph. */
+  name: { type: String, default: '' },
+  /** What they do — a job title, a team, a one-line credit. Optional: a face and a name is a valid slide. */
+  role: { type: String, default: '' },
+  /**
+   * How big the person is drawn — the diameter AND the two caption sizes, which step together.
+   *
+   * · `sm` 160px — a row of six or more, where the grid is the picture
+   * · `md` 240px — the default, three or four across
+   * · `lg` 360px — one person given the slide: a new hire, a speaker, a quote's author
+   */
+  size: { type: String, default: 'md', validator: (s) => ['sm', 'md', 'lg'].includes(s) },
+  /**
+   * Which named ground the INITIALS sit on, when there is no photograph — the generator's four
+   * families, read as register-following tokens so the disc turns over with the ring around it.
+   *
+   * It is a real choice rather than one fixed fill because a row of new starters is the case this
+   * state exists for, and four identical discs beside each other read as one repeated placeholder
+   * where four grounds read as four people. Ignored entirely when `image` is set: a photograph
+   * paints its own circle.
+   *
+   * `vivid` by default — forest-300 on light, forest-700 on dark — because it is the one family
+   * that is a step off the ground in BOTH registers. `accent` is forest-950 on dark, which is also
+   * that register's own slide ground, so a disc drawn on it disappears and leaves the initials
+   * floating inside an empty ring.
+   */
+  background: {
+    type: String,
+    default: 'vivid',
+    // Imported, not inlined — a module-level import survives defineProps() being hoisted out of
+    // setup() at build time, and it is the generator's own list. See backgrounds.js.
+    validator: (b) => BACKGROUND_NAMES.includes(b),
+  },
+  /**
+   * Alt text, when the person's name is not what a screen reader should hear — a specimen drawing
+   * eight strangers, say. Defaults to the name, which is what a real roster wants.
+   */
+  alt: { type: String, default: '' },
+})
+
+/*
+  ★★ THREE RUNGS OF THE DECK'S OWN RAMP, NOT THREE MULTIPLIERS. `--type-deck-text-*` is the
+  generated ramp every other size in this theme comes off; picking `calc(diameter * 0.15)` instead
+  would scale smoothly and land between rungs at every step, which is the one thing a deck must not
+  do — packages/tokens/type/type.deck.css exists so a deck cannot express an off-system size.
+
+  The role sits one rung below the name at each diameter, so the two keep the same relationship as
+  the circle grows rather than converging on it. The space BETWEEN them steps too, off `--deck-space-*`
+  — held at one value it read as generous under a 30px name and cramped under a 48px one, which is
+  the same defect as a fixed caption size and has the same cure.
+*/
+const SIZES = {
+  sm: { px: 160, name: '3xl', role: '2xl', gap: 1 },
+  md: { px: 240, name: '4xl', role: '3xl', gap: 2 },
+  lg: { px: 360, name: '5xl', role: '4xl', gap: 3 },
+}
+/* Looked up rather than interpolated: a validator is stripped in production, so an invented size
+   would otherwise resolve `undefined` px and collapse the circle. */
+const rung = computed(() => SIZES[props.size] ?? SIZES.md)
+
+/*
+  ★★ THE RING'S WIDTH IS THE MARK'S OWN RATIO, not a number picked here. logo.ts publishes the ring
+  as 19 units of a 434.82 tile — 4.37% — and MarkPair already scales a partner's tile by it, so an
+  avatar drawn beside a lockup carries the same weight of edge at the same size.
+*/
+const style = computed(() => ({
+  '--avatar-size': `${rung.value.px}px`,
+  '--avatar-ring': `${Math.round(rung.value.px * (MARK_RING / MARK_SIZE))}px`,
+  '--avatar-name-size': `var(--type-deck-text-${rung.value.name})`,
+  '--avatar-role-size': `var(--type-deck-text-${rung.value.role})`,
+  '--avatar-caption-gap': `var(--deck-space-${rung.value.gap})`,
+}));
+
+/*
+  ★ FIRST LETTERS OF THE FIRST TWO WORDS, upper-cased, and never more than two. "Olivia Rhye" is OR;
+  a one-word name is one letter. Three initials in a circle at 160px is a texture rather than a
+  reading, and a name with five words (a title, a middle name, a suffix) would produce one.
+*/
+const initials = computed(() =>
+  props.name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((word) => word[0].toUpperCase())
+    .join(''));
+</script>
+
+<template>
+  <figure class="avatar" :style="style">
+    <!-- `decoding="async"` for the reason every many-picture slot in this theme carries it: a slide
+         holding six portraits should not block its own first paint on decoding all six. -->
+    <img
+      v-if="image"
+      class="avatar-face"
+      :src="assetUrl(image)"
+      :alt="alt || name || 'A person'"
+      decoding="async"
+    >
+    <!-- aria-hidden: the initials are a stand-in for the photograph, and the name is already read
+         out by the caption below — announcing "OR" before it would be the same person twice. With
+         neither a photograph nor a name the circle is drawn empty, which is a ringed disc rather
+         than a broken image, and is the only honest thing left to show. -->
+    <span v-else class="avatar-face is-initials" :style="groundStyle(background)" aria-hidden="true">{{ initials }}</span>
+    <figcaption v-if="name || role" class="avatar-caption">
+      <span v-if="name" class="avatar-name">{{ name }}</span>
+      <span v-if="role" class="avatar-role">{{ role }}</span>
+    </figcaption>
+  </figure>
+</template>
+
+<style scoped>
+.avatar {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+/*
+  ⚠ `flex: none`, BECAUSE A GRID CELL WILL SQUASH IT. The circle is sized in px and a flex or grid
+  parent is free to shrink a child below its own size — measured on a six-up row before this line,
+  where the faces came out as ellipses 12px narrower than they were tall.
+*/
+.avatar-face {
+  flex: none;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  border-radius: var(--deck-radius-full);
+  object-fit: cover;
+  object-position: center;
+  display: block;
+  /*
+    ★ AN OUTLINE PULLED INWARD, NOT A BORDER. A border adds to the box and rounds on its own
+    fractional seam, which left a hairline of the slide ground between the ring and the photograph
+    at some diameters — the same defect, and the same cure, as MarkPair's partner tile.
+  */
+  outline: var(--avatar-ring) solid currentColor;
+  outline-offset: calc(-1 * var(--avatar-ring));
+  /* A ground behind the picture, so a portrait with a transparent or pale background still has
+     something inside the ring rather than the slide showing through it. */
+  background: var(--deck-surface);
+}
+/*
+  The stand-in. Mohr, uppercase — the deck's display voice, which is what a monogram is: a mark made
+  of letters rather than a line of reading.
+*/
+.avatar-face.is-initials {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--type-deck-display-family);
+  font-weight: var(--type-deck-display-weight);
+  /* 0.34 of the circle: measured against the photographs beside it, the pair reads as one row when
+     the monogram's cap height is about a third of the face. */
+  font-size: calc(var(--avatar-size) * 0.34);
+  line-height: 1;
+  /*
+    ⚠ THE FILL AND ITS INK ARE ONE DECISION AND ARRIVE TOGETHER, from `groundStyle(background)` in
+    the template. Never `--deck-fg` over a named fill: of the combinations this palette could make,
+    most fail body-text contrast, which is why a background is picked BY NAME and the pair is the
+    unit. The same reason BadgeStrip and IconTile route through that module rather than
+    interpolating a token name of their own.
+  */
+}
+.avatar-caption {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--avatar-caption-gap);
+  /* No width cap here — the chip below sets its own, and a cap on the column would clip the one
+     child allowed to be wider than the face. */
+}
+/*
+  ★★ THE NAME IS A CHIP RIDING THE CIRCLE'S BOTTOM EDGE, in the same green as the ring. Set as a
+  plain line under the face it read as a caption BESIDE a photograph — two objects, and in a grid of
+  four the eye had to pair each name with the circle above it. Overlapping the edge makes the pair
+  one object, and puts the name on the line a reader's eye is already on when it leaves the face.
+
+  ★ THE CHIP SITS INSIDE THE CIRCLE, NOT ON ITS EDGE. The padding and line-height are stated rather
+  than inherited because together they make the chip exactly 1.7em tall at every diameter, so the
+  pull can be a fraction of it: -1.7em puts the chip's whole height above the circle's bottom, with
+  its baseline on the edge. Half — the obvious number — sat the pill ON the ring and the two still
+  read as a face with a label under it; the deeper it sits inside, the more the pair reads as one
+  object. The em scales with `size`, so the same fraction overlaps at all three diameters — a ratio
+  of the DIAMETER would only be right at one of them.
+*/
+.avatar-name {
+  font-size: var(--avatar-name-size);
+  /* One line, always: the chip is pulled up by half its own height, and a wrapped name would put
+     the second line where the pull assumes there is none. A name longer than the circle makes the
+     pill wider than the face, which reads as a label on it rather than as a broken caption. */
+  white-space: nowrap;
+  line-height: 1.2;
+  padding: 0.25em 0.9em;
+  font-weight: var(--type-deck-headline-weight);
+  /* The label rung's own tracking. A short bold line in a filled pill closes up without it, and
+     every other small bold label in this theme carries the same 0.01em. */
+  letter-spacing: var(--type-deck-label-tracking);
+  color: var(--deck-on-accent);
+  background: var(--deck-accent);
+  border-radius: var(--deck-radius-full);
+  margin-top: -1.7em;
+  /* Above the photograph in the stacking order without a z-index: `position` is what puts it in
+     one, and both are needed — a static sibling paints under an image that has its own background. */
+  position: relative;
+}
+/* The quiet tier, because a title is what the name is qualified BY — the same relationship the
+   eyebrow has to a heading, and the same ink. */
+.avatar-role {
+  font-size: var(--avatar-role-size);
+  line-height: var(--type-deck-caption-line-height);
+  color: var(--deck-fg-muted);
+  /* Never wider than the face and a bit: a long job title that ran past the circle would drag the
+     columns of a team grid apart. It wraps, and an unbreakable word breaks rather than overflowing. */
+  max-width: calc(var(--avatar-size) * 1.35);
+  overflow-wrap: anywhere;
+  /* A two-line title breaks into two lines of similar length rather than a long one and an orphan,
+     which is what a centred caption under a circle shows up immediately. */
+  text-wrap: balance;
+}
+</style>

package/components/AvatarGroup.vue

@@ -0,0 +1,94 @@
+<!--
+  A row of faces overlapping into one object — how many people, rather than which ones.
+
+  ★★ IT DRAWS NO NAMES, AND THAT IS THE WHOLE DISTINCTION FROM A `::grid` OF `::avatar`. A team grid
+  introduces people: every face is captioned, and the slide is a list of individuals. This is the
+  other slide — "twenty-four of us", "everyone who touched it", the people beside a number — where
+  the count is the message and a caption under each face would be an invitation to read a roster
+  nobody is going to read from the back of a room. Overlapping them says so before a word is read:
+  a row of separate circles is a list, and a row that touches is a group.
+
+  ★ SO IT COMPOSES `::avatar` RATHER THAN REDRAWING ONE. The circle, the ring, its ratio to the
+  diameter and the three diameters themselves are Avatar's, passed straight through; an Avatar with
+  no `name` and no `role` renders the face alone, which is exactly the piece this needs. What lives
+  here is only the arrangement — the negative gap and the stacking order — the same division
+  MarkPair's note draws between a component and the layout it sits in.
+-->
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  /**
+   * The people, in the order they should be read: `{ image, name }` each. `name` never appears on
+   * the slide — it is the alt text, so a screen reader gets a roster the room does not need.
+   */
+  people: { type: Array, default: () => [] },
+  /**
+   * The diameter, passed to each `::avatar`. Defaults to `sm` rather than Avatar's own `md`: this
+   * component exists to fit many faces in a row, and `sm` is the rung that does it.
+   */
+  size: { type: String, default: 'sm', validator: (s) => ['sm', 'md', 'lg'].includes(s) },
+  /**
+   * How far each face sits over the one before it, as a fraction of the diameter.
+   *
+   * · `snug` 0.2 — a long row: twelve faces in the width of nine
+   * · `base` 0.3 — the default, a clear group that still reads face by face
+   * · `tight` 0.45 — a crowd, where the row is a texture and the count is the only reading
+   */
+  overlap: { type: String, default: 'base', validator: (o) => ['snug', 'base', 'tight'].includes(o) },
+})
+
+const OVERLAPS = { snug: 0.2, base: 0.3, tight: 0.45 }
+/* Looked up, not interpolated — a validator is stripped in production and an invented value would
+   otherwise resolve `undefined` and lay the faces out with no overlap at all. */
+const step = computed(() => OVERLAPS[props.overlap] ?? OVERLAPS.base)
+
+/*
+  ★★ THE FIRST FACE IS ON TOP, AND EVERY ROW OF OVERLAPPING DISCS IN THE WORLD IS DRAWN THIS WAY —
+  a hand of cards, a stack of coins, a facepile. Reading order is left to right, so the leftmost
+  disc being the nearest is what makes the row read as a sequence laid down rather than as a queue
+  seen from behind. Descending z-index, which needs one number per item and so cannot be a class.
+*/
+const stacked = computed(() =>
+  props.people.map((person, i) => ({ ...person, z: props.people.length - i })));
+</script>
+
+<template>
+  <div class="avatar-group" :style="{ '--group-step': step }">
+    <Avatar
+      v-for="(person, i) of stacked"
+      :key="`${person.image}-${i}`"
+      class="avatar-group-item"
+      :style="{ zIndex: person.z }"
+      :image="person.image"
+      :alt="person.name"
+      :size="size"
+    />
+  </div>
+</template>
+
+<style scoped>
+.avatar-group {
+  display: flex;
+  align-items: center;
+  /* A row that runs past its container wraps rather than overflowing the slide; the negative margin
+     below is horizontal only, so a second line sits clear of the first. */
+  flex-wrap: wrap;
+}
+/*
+  ⚠ `> *` REACHES THE CHILD COMPONENT'S ROOT, AND ONLY ITS ROOT. Vue's scoped CSS stamps this
+  component's scope id onto a child component's outermost element as well as its own, which is what
+  lets the arrangement live here while the circle stays Avatar's. Nothing deeper is reachable, and
+  nothing deeper should be — a parent reaching into `.avatar-face` would be this component owning
+  half of another one.
+*/
+.avatar-group > * + * {
+  /* The overlap. `--avatar-size` is set by Avatar itself on the same element, so the step is a
+     fraction of the diameter that element actually drew rather than one restated here. */
+  margin-left: calc(var(--avatar-size) * var(--group-step) * -1);
+}
+.avatar-group > * {
+  /* z-index does nothing without it; the inline order would otherwise put the LAST face on top. */
+  position: relative;
+}
+</style>

package/components/BadgeStrip.vue

@@ -0,0 +1,203 @@
+<script setup>
+/*
+  An array-driven row of dark tiles — the deck's tag list. `items` is the array-driven path Grid's
+  own `items` prop also documents: Slidev binds YAML arrays straight to props, so a strip of
+  badges is data, not four hand-written <span> tags that drift out of sync with the list it names.
+  Unlike Grid's `items`, this one is a PLAIN STRING per tile, not an object — a badge has nothing
+  to render beyond its own label, so there's no per-item slot to hand a shape to. Passing objects
+  (`:items="[{label:'Cargo'}]"`) renders "[object Object]" at the tile's correct size — the
+  template below falls back to a `label` field if it finds one, so that mistake stays readable
+  rather than silently wrong.
+
+  Colour is the same PAIR mechanism as Chip: a badge picks a chip by `background`, never a fill on its
+  own, so it can't land on one of the unreadable fill/ink combinations the palette actually has.
+*/
+import { backgroundStyle, outlineStyle, chromePillStyle, BACKGROUND_VALUES } from './backgrounds';
+
+defineProps({
+  /** The badge labels, in row order — plain strings, not objects. */
+  items: { type: Array, required: true },
+  /**
+   * Which named background every tile paints — the family, and for `solid` its half.
+   *
+   * `solid` takes a PINNED value, `<name>-<half>`: warm, accent, vivid or neutral, pinned to the
+   * light or dark column of the generator's table. A solid badge is an OBJECT sitting on the deck
+   * and paints its own ground, so it reads the same on either register.
+   *
+   * `outline` takes the BARE name, because it borrows the slide's ground and so follows the
+   * register — `--deck-ink-<name>` has no half for an author to choose between. Passing a pinned
+   * value there discards the half rather than erroring; passing a bare name to `solid` takes that
+   * family's dark half.
+   *
+   * `accent-dark` (near-black green) is the default — a dark strip, as the reference deck draws it.
+   */
+  background: {
+    type: String,
+    default: 'accent-dark',
+    // Imported, not inlined — BACKGROUND_VALUES is a module-level import, so it survives defineProps() being
+    // hoisted out of setup() at build time. See backgrounds.js.
+    validator: (t) => BACKGROUND_VALUES.includes(t),
+  },
+  /**
+   * Paint from the running chrome's own register-aware role instead of a chip tone.
+   *
+   * ★★ THE CHROME IS NOT A CHIP. Chips are register-INVARIANT by design — a saturated object on the
+   * deck, reading the same on either ground — and the running pills are the opposite case: they land
+   * on whatever ground the SLIDE gives them. Pinned to forest-700 they failed the 3:1 non-text floor
+   * on every dark panel ground (bark 1.09:1, forest-900 1.77:1, neutral-800 2.33:1). This opts a
+   * strip into the accent pair, which moves with the register; `background` is then ignored.
+   */
+  chrome: { type: Boolean, default: false },
+  /**
+   * How the tile is painted. `solid` fills with the tone's pair; `outline` draws the same tone as a
+   * stroke and a label on the slide's own ground, filling nothing.
+   *
+   * Both take the SAME background, the same uppercase overline, the same size and the same pill — the only
+   * difference is whether the colour is the ground or the ink. That is the point of the pair: a strip
+   * can be quietened without becoming a different kind of object.
+   *
+   * ★★ THEY READ THE TONE FROM OPPOSITE ENDS, and that asymmetry is not a defect. `solid` paints its
+   * own ground, so it takes a PINNED half (`accent-dark`) and reads the same on either register.
+   * `outline` borrows the SLIDE's ground, so it takes the register-following `--deck-ink-<name>` and
+   * the half in the tone name is discarded. Stroking a pinned half instead would put `accent-dark` —
+   * forest-950, which IS the dark register's ground — at 1.00:1 on every dark slide.
+   *
+   * ★ AN EARLIER `outline` WAS NOT A VARIANT OF THIS AT ALL. It painted --deck-fg-subtle rather than
+   * a background, dropped the uppercase and the tracking, ran at 0.6 of the overline size, and carried its
+   * own exemption from the contrast floor. It had one caller, the standing confidentiality marking,
+   * which is now ConfidentialMark.vue.
+   */
+  variant: { type: String, default: 'solid', validator: (v) => ['solid', 'outline'].includes(v) },
+  /**
+   * An icon class for every item in the strip — a UnoCSS icon, e.g. 'i-lucide-eye-off'. Applies to
+   * EVERY item, because this component renders a row of peers and singling one out would need a
+   * per-item shape `items` does not have; in practice the only caller that wants one passes a
+   * single item. Empty by default, so a strip stays text-only unless asked.
+   */
+  icon: { type: String, default: '' },
+});
+
+/** A stray object item (the Grid `items` shape, passed here by mistake) still reads as text. */
+const label = (item) => (typeof item === 'string' ? item : String(item?.label ?? item));
+</script>
+
+<template>
+  <div class="badge-strip">
+    <span
+      v-for="(item, index) in items"
+      :key="index"
+      class="badge-strip-item"
+      :class="{ 'is-outline': variant === 'outline' && !chrome }"
+      :style="chrome ? chromePillStyle() : variant === 'outline' ? outlineStyle(background) : backgroundStyle(background)"
+    ><span v-if="icon" class="badge-strip-icon" :class="icon" aria-hidden="true" />{{ label(item) }}</span>
+  </div>
+</template>
+
+<style scoped>
+.badge-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--deck-space-2);
+}
+/*
+  ★★ `display: block`, NOT `inline-flex` — this is what makes the ellipsis below actually render.
+
+  `text-overflow` applies to a BLOCK CONTAINER's inline content. This element is a flex item of
+  `.badge-strip`, so `inline-flex` was blockified to `flex` — a flex container has no inline
+  formatting context of its own, `text-overflow` had nothing to act on, and the declaration was
+  inert. Shipped, 17 pills across 10 slides were cut MID-GLYPH with no "…" — the exact failure the
+  cap below exists to prevent, reproduced one box further in. Proved by mutation on the live page:
+  the same element with the same text renders "DECK-D…" as a block and "DECK-DAR|K" (the K sliced
+  vertically) as a flex container.
+
+  It also fixes the SECOND, different mechanism — a pill flex-SHRUNK below its own content width
+  (deck-showcase 78, where the 20em cap is not involved at all). `overflow: hidden` zeroes a flex
+  item's automatic minimum size, so a crowded row squeezes a pill regardless of the cap; as a block
+  container the squeezed pill now ellipsises instead of clipping.
+
+  Vertical centring does not need flex here: the box is one line of text with symmetric padding, so
+  the line box IS the centred content. `align-items` was doing nothing a line box was not already
+  doing.
+*/
+/*
+  ★★ AND `flex: none`, WHICH IS WHAT MAKES `flex-wrap: wrap` ABOVE MEAN ANYTHING.
+
+  A flex item's automatic minimum size is normally its min-content width — for `white-space: nowrap`
+  text, the whole label — which is what would push a row that does not fit onto a second line. But
+  `overflow: hidden` (three lines down, and load-bearing for the ellipsis) sets that automatic
+  minimum to ZERO, so the flex algorithm preferred to SQUEEZE every badge onto one line rather than
+  wrap. Measured on deck-showcase 169 — a slide titled "Every feature, in one row" — all eight
+  badges were shrunk below their own content and cut, between 14px and 134px each, with not one
+  feature legible in full. The 20em cap was not even involved.
+
+  `flex: none` restores the intent: a badge is as wide as its label (up to the cap), and a row that
+  does not fit wraps, which is exactly what `flex-wrap: wrap` on the container already said. The cap
+  and the ellipsis stay for the other case — ONE label longer than the cap, which no amount of
+  wrapping can fix.
+*/
+.badge-strip-item {
+  display: block;
+  flex: none;
+  padding: var(--deck-space-1) var(--deck-space-3);
+  border-radius: var(--deck-radius-full);
+  font-family: var(--type-deck-overline-family);
+  font-weight: var(--type-deck-overline-weight);
+  font-size: var(--type-deck-overline-size);
+  line-height: var(--type-deck-overline-line-height);
+  letter-spacing: var(--type-deck-overline-tracking);
+  text-transform: uppercase;
+  white-space: nowrap;
+  /* FIX ROUND 1, IMPORTANT 4 — every label this component renders is caller-supplied text, not a
+     closed vocabulary this file controls: slide-top.vue's section pill is a divider's extracted
+     TITLE or an author's `section:` override, slide-bottom.vue's confidentiality pill is a bare
+     `confidential:` string, and Task 8 generates 200 slides' worth of both. `white-space: nowrap`
+     without a cap just keeps growing — measured live, a 22-character label already runs 488px, so
+     a realistic ~90-character string (the review's own example) clears the 1920px canvas outright,
+     and does so INVISIBLY: `.slidev-slide-content` is `overflow: hidden`, so the overrun is
+     silently clipped with no ellipsis, not a visible spill anyone would notice. `max-width` here
+     is in `em`, the same unit `.deck-chip` already caps its own prose at (22em) — a length, not a
+     token, matching this file's own "prose is measured in em, not a fixed px" precedent (see
+     README's "Measure is set in em, never ch") — and `overflow`/`text-overflow` turn a cap into a
+     visible "…" instead of a silent cut, which is the actual point: a truncated pill still reads
+     as "there was more here", where a clipped one reads as complete and wrong. */
+  max-width: 20em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/*
+  The stroke is `currentColor`, so it is the label's own colour by construction and the two cannot be
+  set apart.
+
+  ⚠ A PLAIN 1px, NOT DIVIDED BY `--slidev-slide-scale`. It was written that way first, reasoning that
+  a 1px border on a canvas drawn at 0.58 is a sub-pixel line — but that argument applies to EVERY
+  border in the theme, and none of the others do it (BrowserFrame, Carousel, the code frames and the
+  card rules are all plain `1px`). The variable exists for the opposite case: base.css uses it only
+  under `body > [class*='-tooltip']`, elements Unovis renders OUTSIDE the scaled canvas, which have
+  to borrow the factor because they never had it. A badge is inside the canvas and already carries
+  it, so dividing again yields a stroke pinned to one DEVICE pixel — visibly finer than the card it
+  sits next to at any zoom.
+
+  The padding is unchanged from `solid`. A border adds 2px to the box, which is a real difference in a
+  row that mixes the two, and taking it out of the padding to compensate would make the outline's TEXT
+  sit 1px in from where the solid's does — a worse mismatch than the one it fixes, and visible where
+  the two stack.
+*/
+.badge-strip-item.is-outline {
+  background: none;
+  border: 1px solid currentColor;
+}
+/*
+  The icon rides INSIDE the pill's own line box, sized in em so it tracks whatever type role the
+  variant sets rather than needing its own number. aria-hidden: it repeats what the label already
+  says, and a screen reader announcing "eye-off Private & Confidential" is worse than the label
+  alone. Gap in em for the same reason as the size.
+*/
+.badge-strip-icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-right: 0.4em;
+  vertical-align: -0.12em; /* optical centring against the cap height, not the baseline */
+  flex: none;
+}
+</style>