srcdev-nuxt-components 9.6.0 → 9.6.2

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.",
+    },
+  },
+};

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

@@ -37,7 +37,7 @@ describe("DisplayChip", () => {
 
   it("renders correct HTML structure (square + styleClassPassthrough)", async () => {
     const wrapper = await mountSuspended(DisplayChip, {
-      props: { shape: "square", styleClassPassthrough: ["online"] },
+      props: { shape: "square", status: "online", styleClassPassthrough: ["featured"] },
     });
     expect(wrapper.html()).toMatchSnapshot();
   });
@@ -63,15 +63,41 @@ describe("DisplayChip", () => {
 
   // ─── Shape ────────────────────────────────────────────────────────────────
 
-  it("applies circle class by default", async () => {
+  it("sets data-shape='circle' by default", async () => {
     const wrapper = await mountSuspended(DisplayChip);
-    expect(wrapper.classes()).toContain("circle");
+    expect(wrapper.attributes("data-shape")).toBe("circle");
   });
 
-  it("applies square class when shape='square'", async () => {
+  it("sets data-shape='square' when shape='square'", async () => {
     const wrapper = await mountSuspended(DisplayChip, { props: { shape: "square" } });
-    expect(wrapper.classes()).toContain("square");
-    expect(wrapper.classes()).not.toContain("circle");
+    expect(wrapper.attributes("data-shape")).toBe("square");
+  });
+
+  it("does not put shape or status on the root as classes", async () => {
+    const wrapper = await mountSuspended(DisplayChip, { props: { shape: "square", status: "online" } });
+    expect(wrapper.classes()).toEqual(["display-chip"]);
+  });
+
+  // ─── Status ───────────────────────────────────────────────────────────────
+
+  it("sets data-status='offline' by default", async () => {
+    const wrapper = await mountSuspended(DisplayChip);
+    expect(wrapper.attributes("data-status")).toBe("offline");
+  });
+
+  it.each(["online", "idle", "dnd"] as const)("sets data-status='%s' from the status prop", async (status) => {
+    const wrapper = await mountSuspended(DisplayChip, { props: { status } });
+    expect(wrapper.attributes("data-status")).toBe(status);
+  });
+
+  it("renders statusLabel as screen-reader text", async () => {
+    const wrapper = await mountSuspended(DisplayChip, { props: { status: "online", statusLabel: "Online" } });
+    expect(wrapper.find(".sr-only").text()).toBe("Online");
+  });
+
+  it("renders no screen-reader text without statusLabel", async () => {
+    const wrapper = await mountSuspended(DisplayChip);
+    expect(wrapper.find(".sr-only").exists()).toBe(false);
   });
 
   // ─── CSS custom properties ────────────────────────────────────────────────
@@ -89,39 +115,81 @@ describe("DisplayChip", () => {
     expect(style.getPropertyValue("--_chip-angle")).toBe("45deg");
   });
 
-  it("sets default CSS custom properties when no config is provided", async () => {
+  it("falls back to the public tokens when no config is provided", async () => {
     const wrapper = await mountSuspended(DisplayChip);
     const style = (wrapper.element as HTMLElement).style;
-    expect(style.getPropertyValue("--_chip-size")).toBe("12px");
-    expect(style.getPropertyValue("--_chip-mask-width")).toBe("4px");
-    expect(style.getPropertyValue("--_chip-offset")).toBe("0px");
-    expect(style.getPropertyValue("--_chip-angle")).toBe("90deg");
+    expect(style.getPropertyValue("--_chip-size")).toBe("var(--display-chip-size, 1.2rem)");
+    expect(style.getPropertyValue("--_chip-mask-width")).toBe("var(--display-chip-mask-width, 0.4rem)");
+    expect(style.getPropertyValue("--_chip-offset")).toBe("var(--display-chip-offset, 0rem)");
+    expect(style.getPropertyValue("--_chip-angle")).toBe("var(--display-chip-angle, 90deg)");
+  });
+
+  it("falls back per field when config is partial", async () => {
+    const wrapper = await mountSuspended(DisplayChip, { props: { config: { label: "5", angle: "45deg" } } });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_chip-size")).toBe("var(--display-chip-size, 1.2rem)");
+    expect(style.getPropertyValue("--_chip-angle")).toBe("45deg");
   });
 
   // ─── Label ────────────────────────────────────────────────────────────────
 
-  it("does not render .chip-label when config has no label", async () => {
+  it("does not render .display-chip-label when config has no label", async () => {
     const wrapper = await mountSuspended(DisplayChip);
-    expect(wrapper.find(".chip-label").exists()).toBe(false);
+    expect(wrapper.find(".display-chip-label").exists()).toBe(false);
   });
 
-  it("renders .chip-label when config.label is set", async () => {
+  it("renders .display-chip-label when config.label is set", async () => {
     const wrapper = await mountSuspended(DisplayChip, {
       props: { config: { size: "12px", maskWidth: "4px", offset: "0px", angle: "90deg", label: "5" } },
     });
-    expect(wrapper.find(".chip-label").exists()).toBe(true);
-    expect(wrapper.find(".chip-label").text()).toBe("5");
+    expect(wrapper.find(".display-chip-label").exists()).toBe(true);
+    expect(wrapper.find(".display-chip-label").text()).toBe("5");
   });
 
   it.each([
-    ["A", "length-1"],
-    ["+2", "length-2"],
-    ["DND", "length-3"],
-  ])("applies length class for label '%s'", async (label, expectedClass) => {
-    const wrapper = await mountSuspended(DisplayChip, {
-      props: { config: { size: "12px", maskWidth: "4px", offset: "0px", angle: "90deg", label } },
-    });
-    expect(wrapper.find(".chip-label").classes()).toContain(expectedClass);
+    ["A", "1"],
+    ["+2", "2"],
+    ["DND", "3"],
+    ["👨‍👩‍👧‍👦", "1"],
+    ["999+", "3"],
+  ])("sets data-length for label '%s'", async (label, expected) => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const wrapper = await mountSuspended(DisplayChip, { props: { config: { label } } });
+    expect(wrapper.find(".display-chip-label").attributes("data-length")).toBe(expected);
+    warnSpy.mockRestore();
+  });
+
+  it("keeps a multi-codepoint emoji whole instead of splitting it", async () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const wrapper = await mountSuspended(DisplayChip, { props: { config: { label: "👨‍👩‍👧‍👦" } } });
+    expect(wrapper.find(".display-chip-label").text()).toBe("👨‍👩‍👧‍👦");
+    expect(warnSpy).not.toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+
+  it("truncates by grapheme, not UTF-16 code unit", async () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const wrapper = await mountSuspended(DisplayChip, { props: { config: { label: "🇬🇧🇺🇸🇫🇷🇩🇪" } } });
+    expect(wrapper.find(".display-chip-label").text()).toBe("🇬🇧🇺🇸🇫🇷");
+    warnSpy.mockRestore();
+  });
+
+  it("does not render a label for a whitespace-only label", async () => {
+    const wrapper = await mountSuspended(DisplayChip, { props: { config: { label: "   " } } });
+    expect(wrapper.find(".display-chip-label").exists()).toBe(false);
+  });
+
+  it("renders an HTML-like label as text", async () => {
+    const wrapper = await mountSuspended(DisplayChip, { props: { config: { label: "<b>" } } });
+    expect(wrapper.find(".display-chip-label b").exists()).toBe(false);
+    expect(wrapper.find(".display-chip-label").text()).toBe("<b>");
+  });
+
+  it("updates the label when config changes after mount", async () => {
+    const wrapper = await mountSuspended(DisplayChip, { props: { config: { label: "1" } } });
+    await wrapper.setProps({ config: { label: "42" } });
+    expect(wrapper.find(".display-chip-label").text()).toBe("42");
+    expect(wrapper.find(".display-chip-label").attributes("data-length")).toBe("2");
   });
 
   it("truncates label to 3 characters when label exceeds maximum length", async () => {
@@ -129,7 +197,7 @@ describe("DisplayChip", () => {
     const wrapper = await mountSuspended(DisplayChip, {
       props: { config: { size: "12px", maskWidth: "4px", offset: "0px", angle: "90deg", label: "ABCD" } },
     });
-    expect(wrapper.find(".chip-label").text()).toBe("ABC");
+    expect(wrapper.find(".display-chip-label").text()).toBe("ABC");
     warnSpy.mockRestore();
   });
 
@@ -144,16 +212,17 @@ describe("DisplayChip", () => {
 
   // ─── Icon ─────────────────────────────────────────────────────────────────
 
-  it("does not render .chip-icon when config has no icon", async () => {
+  it("does not render .display-chip-icon when config has no icon", async () => {
     const wrapper = await mountSuspended(DisplayChip);
-    expect(wrapper.find(".chip-icon").exists()).toBe(false);
+    expect(wrapper.find(".display-chip-icon").exists()).toBe(false);
   });
 
-  it("renders .chip-icon when config.icon is set", async () => {
+  it("renders .display-chip-icon when config.icon is set", async () => {
     const wrapper = await mountSuspended(DisplayChip, {
       props: { config: { size: "12px", maskWidth: "4px", offset: "0px", angle: "90deg", icon: "mdi:check" } },
     });
-    expect(wrapper.find(".chip-icon").exists()).toBe(true);
+    expect(wrapper.find(".display-chip-icon").exists()).toBe(true);
+    expect(wrapper.find(".display-chip-icon").attributes("aria-hidden")).toBe("true");
   });
 
   // ─── Slot ─────────────────────────────────────────────────────────────────

package/app/components/02.molecules/display-chip/tests/__snapshots__/DisplayChip.spec.ts.snap

@@ -1,12 +1,16 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`DisplayChip > renders correct HTML structure (default) 1`] = `"<span class="display-chip circle" style="--_chip-size: 12px; --_chip-mask-width: 4px; --_chip-offset: 0px; --_chip-angle: 90deg;"><!--v-if--><!--v-if--></span>"`;
+exports[`DisplayChip > renders correct HTML structure (default) 1`] = `"<span class="display-chip" data-shape="circle" data-status="offline" style="--_chip-size: var(--display-chip-size, 1.2rem); --_chip-mask-width: var(--display-chip-mask-width, 0.4rem); --_chip-offset: var(--display-chip-offset, 0rem); --_chip-angle: var(--display-chip-angle, 90deg);"><!--v-if--><!--v-if--><!--v-if--></span>"`;
 
-exports[`DisplayChip > renders correct HTML structure (square + styleClassPassthrough) 1`] = `"<span class="display-chip square online" style="--_chip-size: 12px; --_chip-mask-width: 4px; --_chip-offset: 0px; --_chip-angle: 90deg;"><!--v-if--><!--v-if--></span>"`;
+exports[`DisplayChip > renders correct HTML structure (square + styleClassPassthrough) 1`] = `"<span class="display-chip featured" data-shape="square" data-status="online" style="--_chip-size: var(--display-chip-size, 1.2rem); --_chip-mask-width: var(--display-chip-mask-width, 0.4rem); --_chip-offset: var(--display-chip-offset, 0rem); --_chip-angle: var(--display-chip-angle, 90deg);"><!--v-if--><!--v-if--><!--v-if--></span>"`;
 
 exports[`DisplayChip > renders correct HTML structure (with icon) 1`] = `
-"<span class="display-chip circle" style="--_chip-size: 12px; --_chip-mask-width: 4px; --_chip-offset: 0px; --_chip-angle: 90deg;"><span class="iconify i-mdi:check chip-icon" aria-hidden="true"></span>
+"<span class="display-chip" data-shape="circle" data-status="offline" style="--_chip-size: 12px; --_chip-mask-width: 4px; --_chip-offset: 0px; --_chip-angle: 90deg;"><span class="iconify i-mdi:check display-chip-icon" aria-hidden="true"></span>
+<!--v-if-->
 <!--v-if--></span>"
 `;
 
-exports[`DisplayChip > renders correct HTML structure (with label) 1`] = `"<span class="display-chip circle" style="--_chip-size: 12px; --_chip-mask-width: 4px; --_chip-offset: 0px; --_chip-angle: 90deg;"><!--v-if--><span class="chip-label length-1">5</span></span>"`;
+exports[`DisplayChip > renders correct HTML structure (with label) 1`] = `
+"<span class="display-chip" data-shape="circle" data-status="offline" style="--_chip-size: 12px; --_chip-mask-width: 4px; --_chip-offset: 0px; --_chip-angle: 90deg;"><!--v-if--><span class="display-chip-label" data-length="1">5</span>
+<!--v-if--></span>"
+`;