srcdev-nuxt-components 9.6.0 → 9.6.1

package/app/components/02.molecules/display-chip/CONSUMER-STYLING.md

@@ -2,19 +2,35 @@
 
 ## Public token API
 
+### Geometry
+
 | Token | Default | Controls |
 |---|---|---|
-| `--display-chip-colour-offline` | `slategrey` | Dot colour with no status class |
-| `--display-chip-colour-online` | `rgb(0, 255, 135)` | Dot colour with `.online` |
-| `--display-chip-colour-idle` | `rgb(255, 185, 51)` | Dot colour with `.idle` |
-| `--display-chip-colour-dnd` | `rgb(255, 40, 80)` | Dot colour with `.dnd` |
+| `--display-chip-size` | `1.2rem` | Dot diameter. Negative values clamp to `0` (no dot) |
+| `--display-chip-mask-width` | `0.4rem` | Width of the cutout ring around the dot. Negative values clamp to `0` |
+| `--display-chip-offset` | `0rem` | Extra distance from the host's edge (negative pulls the dot inwards) |
+| `--display-chip-angle` | `90deg` | Position around the host, clockwise from the top |
+
+A field set in the `config` prop wins over its token for that chip. Fields left out of `config` fall
+back to the token, so `:config="{ label: '5' }"` gets the default geometry.
+
+> Changed 2026-10-08: geometry tokens are new. Before, geometry came only from `config`, and a
+> `config` missing any of `size`/`maskWidth`/`offset`/`angle` broke the dot and cutout entirely.
+
+### Colour
+
+| Token | Default | Controls |
+|---|---|---|
+| `--display-chip-colour-offline` | `var(--status-neutral)` | Dot colour for `status="offline"` (the default) |
+| `--display-chip-colour-online` | `var(--status-success)` | Dot colour for `status="online"` |
+| `--display-chip-colour-idle` | `var(--status-warning)` | Dot colour for `status="idle"` |
+| `--display-chip-colour-dnd` | `var(--status-danger)` | Dot colour for `status="dnd"` |
 | `--display-chip-text-colour` | `black` | Icon and label colour on the dot |
 
-Geometry (size, mask width, offset, angle) is set through the `config` prop, not tokens. Those
-values are written inline as private `--_chip-size`, `--_chip-mask-width`, `--_chip-offset` and
-`--_chip-angle`, which feed the private position maths (`--_mask-diameter`, `--_position-x`,
-`--_position-y`, `--_offset`, `--_circle-x`, `--_circle-y`) and the resolved `--_dot-colour`. None
-of these are public API.
+Private tokens (not public API): `--_chip-size`, `--_chip-mask-width`, `--_chip-offset` and
+`--_chip-angle` (written inline from `config` or the geometry tokens), `--_size`, and the position
+maths (`--_mask-diameter`, `--_position-x`, `--_position-y`, `--_offset`, `--_circle-x`,
+`--_circle-y`), plus the resolved `--_dot-colour` and the label's `--_font-size-adjust`.
 
 > Changed 2026-09-27: the status colours were unprefixed `--color-offline`, `--color-online`,
 > `--color-idle` and `--color-dnd`, and the geometry and maths vars were unprefixed too
@@ -22,20 +38,34 @@ of these are public API.
 > consumer variable of the same name. The icon is now sized with `font-size` (its old
 > `width`/`height` were overridden by `@nuxt/icon`), and the icon/label colour is a token instead
 > of a hardcoded `black`.
+>
+> Changed 2026-10-07: the status colours default to the global `--status-*` tokens
+> (`03.theming/_status.css`) instead of hardcoded neon `rgb()` values and `slategrey`, so they
+> match `DisplayPill`, `SelectMenu` and anything else reading the shared set. To keep the old
+> look, set the four `--display-chip-colour-*` tokens to the previous values. To restyle every
+> status across the library, override `--status-*` instead. See
+> `.claude/skills/theming-status-tokens.md`.
 
 ---
 
 ## State hooks
 
-| Class | When |
-|---|---|
-| `.display-chip.circle`, `.square` | The `shape` prop (must match the slotted content's shape) |
-| `.online`, `.idle`, `.dnd` | Added by you through `style-class-passthrough`; no class means offline |
+| Hook | Element | When |
+|---|---|---|
+| `[data-shape="circle\|square"]` | `.display-chip` (root) | The `shape` prop (must match the slotted content's shape) |
+| `[data-status="offline\|online\|idle\|dnd"]` | `.display-chip` (root) | The `status` prop (default `offline`) |
+| `[data-length="1\|2\|3"]` | `.display-chip-label` | Label length in characters (emoji count as one), for font-size stepping |
 
-Inner elements: the dot is `.display-chip::after`; `.chip-icon` and `.chip-label` (with
-`.length-1`/`.length-2`/`.length-3` for font-size stepping) sit on top of it. Every other direct
-child gets the cutout `mask-image`.
+Inner elements: the dot is `.display-chip::after`; `.display-chip-icon` and `.display-chip-label`
+sit on top of it. The `statusLabel` text is a `.sr-only` span. Every other direct child gets the
+cutout `mask-image`.
 
+> Changed 2026-10-08: shape and status are `data-shape`/`data-status` attributes instead of the
+> `.circle`/`.square` and `.online`/`.idle`/`.dnd` classes, so they can't collide with a
+> consumer's own classes of the same name. Status is now the `status` prop rather than a class
+> passed through `style-class-passthrough`. `.chip-icon` → `.display-chip-icon`, `.chip-label` →
+> `.display-chip-label`, and its `.length-N` classes → `data-length="N"`.
+>
 > Changed 2026-09-27: root class renamed from `.display-chip-core`.
 
 ---
@@ -48,10 +78,13 @@ Set the tokens above on an element you own (a page or section class, or a class
 `<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
 `:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
 
+**Caveat:** a geometry field set in `config` is written inline on the chip, so it beats the
+matching `--display-chip-*` geometry token from any ancestor. Leave the field out of `config` to
+let the token apply.
+
 ---
 
 ## Class passthrough
 
-`style-class-passthrough` adds classes to the root `.display-chip`. It's also how you set the
-status (`online`, `idle`, `dnd`). Reactive after mount. `DisplayAvatar` with `chip` renders this
-component as its root, so the same applies there.
+`style-class-passthrough` adds classes to the root `.display-chip`. Reactive after mount.
+`DisplayAvatar` with `chip` renders this component as its root, so the same applies there.

package/app/components/02.molecules/display-chip/DisplayChip.vue

@@ -1,17 +1,27 @@
 <template>
-  <component :is="tag" class="display-chip" :class="[shape, elementClasses]" :style="chipStyles">
+  <component
+    :is="tag"
+    class="display-chip"
+    :class="elementClasses"
+    :data-shape="shape"
+    :data-status="status"
+    :style="chipStyles"
+  >
     <slot name="default"></slot>
-    <Icon v-if="config?.icon" :name="config.icon" class="chip-icon" />
-    <span v-if="config?.label" class="chip-label" :class="`length-${config.label.length}`">{{ validatedLabel }}</span>
+    <Icon v-if="config?.icon" :name="config.icon" class="display-chip-icon" aria-hidden="true" />
+    <span v-if="labelGraphemes.length" class="display-chip-label" :data-length="displayLength">{{ displayLabel }}</span>
+    <span v-if="statusLabel" class="sr-only">{{ statusLabel }}</span>
   </component>
 </template>
 
 <script setup lang="ts">
-import type { DisplayChipConfig } from "~/types/components";
+import type { DisplayChipConfig, DisplayChipStatus } from "~/types/components";
 
 interface Props {
   tag?: "div" | "span";
   shape?: "circle" | "square";
+  status?: DisplayChipStatus;
+  statusLabel?: string;
   config?: DisplayChipConfig;
   styleClassPassthrough?: string | string[];
 }
@@ -19,17 +29,14 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   tag: "span",
   shape: "circle",
-  config: () => ({
-    size: "12px",
-    maskWidth: "4px",
-    offset: "0px",
-    angle: "90deg",
-    icon: undefined,
-    label: undefined,
-  }),
+  status: "offline",
+  statusLabel: "",
+  config: () => ({}),
   styleClassPassthrough: () => [],
 });
 
+const MAX_LABEL_LENGTH = 3;
+
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(
@@ -39,112 +46,123 @@ watch(
   }
 );
 
-const validatedLabel = computed(() => {
-  if (!props.config?.label) return props.config?.label;
-  if (props.config.label.length > 3) {
-    console.warn(
-      `DisplayChip: label "${
-        props.config.label
-      }" exceeds maximum length of 3 characters. Truncating to "${props.config.label.slice(0, 3)}"`
-    );
-    return props.config.label.slice(0, 3);
-  }
-  return props.config.label;
+const labelGraphemes = computed(() => {
+  const label = props.config?.label?.trim();
+  if (!label) return [];
+  return Array.from(new Intl.Segmenter(undefined, { granularity: "grapheme" }).segment(label), ({ segment }) => segment);
 });
 
+const displayLabel = computed(() => labelGraphemes.value.slice(0, MAX_LABEL_LENGTH).join(""));
+const displayLength = computed(() => Math.min(labelGraphemes.value.length, MAX_LABEL_LENGTH));
+
+watch(
+  labelGraphemes,
+  (graphemes) => {
+    if (graphemes.length > MAX_LABEL_LENGTH) {
+      console.warn(
+        `DisplayChip: label "${props.config?.label}" exceeds maximum length of ${MAX_LABEL_LENGTH} characters. Truncating to "${displayLabel.value}"`
+      );
+    }
+  },
+  { immediate: true }
+);
+
+// Always written inline so a nested chip never inherits its parent's geometry.
 const chipStyles = computed(() => ({
-  "--_chip-size": props.config?.size,
-  "--_chip-mask-width": props.config?.maskWidth,
-  "--_chip-offset": props.config?.offset,
-  "--_chip-angle": props.config?.angle,
+  "--_chip-size": props.config?.size || "var(--display-chip-size, 1.2rem)",
+  "--_chip-mask-width": props.config?.maskWidth || "var(--display-chip-mask-width, 0.4rem)",
+  "--_chip-offset": props.config?.offset || "var(--display-chip-offset, 0rem)",
+  "--_chip-angle": props.config?.angle || "var(--display-chip-angle, 90deg)",
 }));
 </script>
 
 <style lang="css">
 @layer components {
   .display-chip {
-    --_mask-diameter: calc(var(--_chip-size) + (var(--_chip-mask-width) * 2));
-    --_dot-colour: var(--display-chip-colour-offline, slategrey);
+    --_size: max(0px, var(--_chip-size));
+    --_mask-diameter: calc(var(--_size) + (max(0px, var(--_chip-mask-width)) * 2));
+    --_dot-colour: var(--display-chip-colour-offline, var(--status-neutral));
 
     position: relative;
     display: inline-block;
 
-    &.circle {
+    &[data-shape="circle"] {
       --_offset: calc((100% / 2) + var(--_chip-offset));
       --_position-x: calc(var(--_offset) * cos(var(--_chip-angle) - 90deg) + (100% / 2));
       --_position-y: calc(var(--_offset) * sin(var(--_chip-angle) - 90deg) + (100% / 2));
     }
 
-    &.square {
-      --_circle-x: calc(50% + (50% + var(--_chip-offset) + (var(--_chip-size) / 2)) * cos(var(--_chip-angle) - 90deg));
-      --_circle-y: calc(50% + (50% + var(--_chip-offset) + (var(--_chip-size) / 2)) * sin(var(--_chip-angle) - 90deg));
+    &[data-shape="square"] {
+      --_circle-x: calc(50% + (50% + var(--_chip-offset) + (var(--_size) / 2)) * cos(var(--_chip-angle) - 90deg));
+      --_circle-y: calc(50% + (50% + var(--_chip-offset) + (var(--_size) / 2)) * sin(var(--_chip-angle) - 90deg));
       --_position-x: clamp(calc(var(--_chip-offset) * -1), var(--_circle-x), calc(100% + var(--_chip-offset)));
       --_position-y: clamp(calc(var(--_chip-offset) * -1), var(--_circle-y), calc(100% + var(--_chip-offset)));
     }
 
-    &.online {
-      --_dot-colour: var(--display-chip-colour-online, rgb(0, 255, 135));
+    &[data-status="online"] {
+      --_dot-colour: var(--display-chip-colour-online, var(--status-success));
     }
 
-    &.idle {
-      --_dot-colour: var(--display-chip-colour-idle, rgb(255, 185, 51));
+    &[data-status="idle"] {
+      --_dot-colour: var(--display-chip-colour-idle, var(--status-warning));
     }
 
-    &.dnd {
-      --_dot-colour: var(--display-chip-colour-dnd, rgb(255, 40, 80));
+    &[data-status="dnd"] {
+      --_dot-colour: var(--display-chip-colour-dnd, var(--status-danger));
     }
 
     &::after {
       content: "";
-      aspect-ratio: 1;
       background: var(--_dot-colour);
       position: absolute;
-      width: var(--_chip-size);
+      width: var(--_size);
+      height: var(--_size);
       border-radius: 100%;
       z-index: 1;
     }
 
     &::after,
-    .chip-icon,
-    .chip-label {
-      top: calc(var(--_position-y) - (var(--_chip-size) / 2));
-      left: calc(var(--_position-x) - (var(--_chip-size) / 2));
+    .display-chip-icon,
+    .display-chip-label {
+      top: calc(var(--_position-y) - (var(--_size) / 2));
+      left: calc(var(--_position-x) - (var(--_size) / 2));
     }
 
-    .chip-icon {
+    .display-chip-icon {
       position: absolute;
-      font-size: var(--_chip-size);
+      font-size: var(--_size);
       color: var(--display-chip-text-colour, black);
       z-index: 2;
     }
 
-    .chip-label {
+    .display-chip-label {
       --_font-size-adjust: 0.7;
 
       position: absolute;
-      width: var(--_chip-size);
-      height: var(--_chip-size);
+      width: var(--_size);
+      height: var(--_size);
       border-radius: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--display-chip-text-colour, black);
       z-index: 2;
-      font-size: calc(var(--_chip-size) * var(--_font-size-adjust));
+      font-size: calc(var(--_size) * var(--_font-size-adjust));
       line-height: 1;
       letter-spacing: -0.05rem;
+      white-space: nowrap;
       user-select: none;
 
-      &.length-2 {
+      &[data-length="2"] {
         --_font-size-adjust: 0.6;
       }
 
-      &.length-3 {
+      &[data-length="3"] {
         --_font-size-adjust: 0.5;
       }
     }
 
-    & > *:not(.chip-icon, .chip-label) {
+    & > *:not(.display-chip-icon, .display-chip-label, .sr-only) {
       mask-image: radial-gradient(
         var(--_mask-diameter) var(--_mask-diameter) at var(--_position-x) var(--_position-y),
         transparent calc(50% - 0.5px),

package/app/components/02.molecules/display-chip/stories/DisplayChip.stories.ts

@@ -14,6 +14,7 @@ interface ChipStoryArgs {
   icon: string;
   label: string;
   status: "offline" | "online" | "idle" | "dnd";
+  statusLabel: string;
   useSlot: boolean;
   slotContent: string;
   styleClassPassthrough: string[];
@@ -87,11 +88,18 @@ export default {
     status: {
       control: { type: "select" },
       options: ["offline", "online", "idle", "dnd"],
-      description: "Status color for the chip",
+      description: "Status colour for the chip dot",
       table: {
         category: "Appearance",
       },
     },
+    statusLabel: {
+      control: { type: "text" },
+      description: "Screen-reader text for the status (e.g. 'Online'), so it isn't conveyed by colour alone",
+      table: {
+        category: "Accessibility",
+      },
+    },
     // Slot Configuration
     useSlot: {
       control: { type: "boolean" },
@@ -129,6 +137,7 @@ export default {
     icon: "",
     label: "",
     status: "offline",
+    statusLabel: "",
     useSlot: true,
     slotContent: "SRC",
     styleClassPassthrough: [],
@@ -149,7 +158,7 @@ const Template: StoryFn<ChipStoryArgs> = (args) => ({
       })
     );
 
-    const classes = computed(() => [...(args.styleClassPassthrough || []), args.status]);
+    const classes = computed(() => args.styleClassPassthrough || []);
 
     return { args, chipConfig, classes };
   },
@@ -159,6 +168,8 @@ const Template: StoryFn<ChipStoryArgs> = (args) => ({
         :tag="args.tag"
         :shape="args.shape"
         :config="chipConfig"
+        :status="args.status"
+        :status-label="args.statusLabel"
         :style-class-passthrough="classes"
       >
         <template v-if="args.useSlot" #default>
@@ -290,14 +301,14 @@ const MultipleChipsTemplate: StoryFn<ChipStoryArgs> = (args) => ({
     <div style="display: flex; gap: 40px; align-items: center; justify-content: center; height: 100vh; flex-wrap: wrap;">
       <StorybookComponent
         :config="{ size: '12px', maskWidth: '4px', offset: '0px', angle: '45deg', label: '5' }"
-        :style-class-passthrough="['online']"
+        status="online"
       >
         <div style="width: 50px; height: 50px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #f8fafc; font-weight: 600; font-size: 1.3rem; font-family: sans-serif;">SRC</div>
       </StorybookComponent>
 
       <StorybookComponent
         :config="{ size: '10px', maskWidth: '3px', offset: '2px', angle: '315deg', icon: 'mdi:pause' }"
-        :style-class-passthrough="['idle']"
+        status="idle"
       >
         <div style="width: 50px; height: 50px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #f8fafc; font-weight: 600; font-size: 1.3rem; font-family: sans-serif;">SRC</div>
       </StorybookComponent>
@@ -305,14 +316,14 @@ const MultipleChipsTemplate: StoryFn<ChipStoryArgs> = (args) => ({
       <StorybookComponent
         shape="square"
         :config="{ size: '14px', maskWidth: '2px', offset: '-5px', angle: '135deg', label: 'DND' }"
-        :style-class-passthrough="['dnd']"
+        status="dnd"
       >
         <div style="width: 50px; height: 50px; background: #64748b; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #f8fafc; font-weight: 600; font-size: 1.3rem; font-family: sans-serif;">SRC</div>
       </StorybookComponent>
 
       <StorybookComponent
         :config="{ size: '16px', maskWidth: '6px', offset: '8px', angle: '90deg' }"
-        :style-class-passthrough="['offline']"
+        status="offline"
       >
         <div style="width: 50px; height: 50px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #f8fafc; font-weight: 600; font-size: 1.3rem; font-family: sans-serif;">SRC</div>
       </StorybookComponent>
@@ -328,3 +339,89 @@ MultipleChips.parameters = {
     },
   },
 };
+
+const hostStyle = (shape: "circle" | "square", size = 50) =>
+  `width: ${size}px; height: ${size}px; background: #64748b; border-radius: ${shape === "circle" ? "50%" : "4px"}; display: flex; align-items: center; justify-content: center; color: #f8fafc; font: 600 1.3rem sans-serif;`;
+
+const stressChips: Array<{
+  key: string;
+  caption: string;
+  shape?: "circle" | "square";
+  status?: ChipStoryArgs["status"];
+  config?: DisplayChipConfig;
+  hostSize?: number;
+  hostText?: string;
+  brokenImage?: boolean;
+  noSlot?: boolean;
+  dir?: "rtl";
+}> = [
+  { key: "family", caption: "ZWJ family emoji (one grapheme)", status: "online", config: { size: "18px", angle: "45deg", label: "👨‍👩‍👧‍👦" } },
+  { key: "flags", caption: "4 flags, truncated to 3", status: "idle", config: { size: "20px", angle: "45deg", label: "🇬🇧🇺🇸🇫🇷🇩🇪" } },
+  { key: "count", caption: '"999+", truncated to "999"', status: "dnd", config: { size: "18px", angle: "45deg", label: "999+" } },
+  { key: "wide", caption: '"WWW" (widest glyphs)', status: "online", config: { size: "16px", angle: "45deg", label: "WWW" } },
+  { key: "html", caption: "HTML-like label", status: "dnd", config: { size: "18px", angle: "45deg", label: "<b>" } },
+  { key: "rtl", caption: "Arabic label in an RTL wrapper", status: "online", dir: "rtl", config: { size: "18px", angle: "45deg", label: "مرحبا" } },
+  { key: "whitespace", caption: "Whitespace-only label (no label)", status: "idle", config: { size: "14px", angle: "45deg", label: "   " } },
+  { key: "partial", caption: "Config with only a label (geometry from defaults)", status: "online", config: { label: "5" } },
+  { key: "empty-config", caption: "Empty config object", status: "dnd", config: {} },
+  { key: "zero", caption: "size 0px (no dot)", status: "online", config: { size: "0px", angle: "45deg" } },
+  { key: "negative", caption: "size -10px, mask -4px (clamped to 0)", status: "online", config: { size: "-10px", maskWidth: "-4px", angle: "45deg" } },
+  { key: "huge", caption: "size 64px on a 50px host", status: "idle", config: { size: "64px", angle: "45deg", label: "9" } },
+  { key: "angles", caption: "angle -45deg, offset 40px", status: "online", config: { size: "12px", angle: "-45deg", offset: "40px" } },
+  { key: "wrap", caption: "angle 720deg, offset -30px (square)", shape: "square", status: "dnd", config: { size: "12px", angle: "720deg", offset: "-30px" } },
+  { key: "invalid", caption: "Invalid units: size 'abc', angle '45'", status: "online", config: { size: "abc", angle: "45" } },
+  { key: "broken-icon", caption: "Broken icon name", status: "online", config: { size: "16px", angle: "45deg", icon: "not-a-real-set:missing" } },
+  { key: "tiny-host", caption: "8px host", status: "online", hostSize: 8, config: { size: "6px", maskWidth: "1px", angle: "45deg" } },
+  { key: "big-host", caption: "200px host, long host text", status: "online", hostSize: 200, hostText: "Donaudampfschifffahrtsgesellschaft", config: { size: "24px", angle: "135deg", label: "!" } },
+  { key: "broken-image", caption: "Broken image as host", status: "idle", brokenImage: true, config: { size: "12px", angle: "45deg" } },
+  { key: "no-slot", caption: "No slot content", status: "online", noSlot: true, config: { size: "12px", angle: "45deg" } },
+];
+
+export const StressTest: StoryFn<ChipStoryArgs> = () => ({
+  components: { StorybookComponent },
+  setup() {
+    return { stressChips, hostStyle };
+  },
+  template: `
+    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 4.8rem 2.4rem; padding: 4rem 2rem; font: 1.2rem sans-serif;">
+      <figure
+        v-for="chip in stressChips"
+        :key="chip.key"
+        :dir="chip.dir"
+        style="margin: 0; display: grid; justify-items: center; align-content: start; gap: 1.6rem; min-inline-size: 0;"
+      >
+        <StorybookComponent :shape="chip.shape ?? 'circle'" :status="chip.status" :config="chip.config" status-label="Status">
+          <template v-if="!chip.noSlot" #default>
+            <img
+              v-if="chip.brokenImage"
+              src="/does-not-exist.jpg"
+              alt="Broken avatar"
+              width="50"
+              height="50"
+              :style="hostStyle(chip.shape ?? 'circle')"
+            />
+            <div v-else :style="hostStyle(chip.shape ?? 'circle', chip.hostSize)">
+              <span style="overflow-wrap: anywhere; text-align: center;">{{ chip.hostText ?? (chip.hostSize && chip.hostSize < 20 ? "" : "SRC") }}</span>
+            </div>
+          </template>
+        </StorybookComponent>
+        <figcaption style="text-align: center; overflow-wrap: anywhere;">{{ chip.caption }}</figcaption>
+      </figure>
+    </div>
+  `,
+});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+StressTest.parameters = {
+  // Fixed showcase: hardcoded values, so Controls would do nothing here.
+  controls: { disable: true },
+  docs: {
+    description: {
+      story:
+        "Hostile config and labels: a ZWJ family emoji and a run of flags (must not split into broken characters), a label over the 3-character limit, " +
+        "the widest Latin glyphs, HTML-like and right-to-left text, a whitespace-only label, a config with missing or empty geometry, zero, negative, " +
+        "oversized and invalid sizes, out-of-range angles and offsets, a broken icon name, tiny and huge hosts, a broken image and no slot at all. " +
+        "Check that every label is whole and centred on its dot, missing geometry falls back to the default 12px dot at 90deg, negative and invalid sizes show no dot " +
+        "rather than a broken one, and the cutout ring always sits under the dot.",
+    },
+  },
+};