srcdev-nuxt-components 9.5.7 → 9.6.1

package/app/components/01.atoms/display-pill/DisplayPill.vue

@@ -2,15 +2,20 @@
   <component
     :is="tag"
     class="display-pill"
-    :class="[size, variant, { 'is-reversed': reversed }, elementClasses]"
+    :class="elementClasses"
     :type="tag === 'button' ? 'button' : undefined"
+    :data-size="size"
+    :data-variant="variant"
+    :data-reversed="reversed || undefined"
     :data-icon-position="iconPosition()"
   >
     <span v-if="slots.icon" class="display-pill-icon">
       <slot name="icon"></slot>
     </span>
-    <span v-if="label" class="display-pill-label">{{ label }}</span>
-    <slot v-else name="default"></slot>
+    <span v-if="hasText()" class="display-pill-label">
+      <template v-if="hasLabel">{{ label }}</template>
+      <slot v-else name="default"></slot>
+    </span>
   </component>
 </template>
 
@@ -35,10 +40,14 @@ const props = withDefaults(defineProps<Props>(), {
 
 const slots = useSlots();
 
-// A function, not a computed: slots aren't reactive, so a cached value goes stale when a slot is toggled.
+const hasLabel = computed(() => !!props.label?.trim());
+
+// Functions, not computeds: slots aren't reactive, so a cached value goes stale when a slot is toggled.
+const hasText = () => hasLabel.value || !!slots.default;
+
 const iconPosition = () => {
   if (!slots.icon) return undefined;
-  if (!props.label && !slots.default) return "only";
+  if (!hasText()) return "only";
   return props.reversed ? "end" : "start";
 };
 
@@ -55,6 +64,8 @@ watch(
   .display-pill {
     --_background: var(--display-pill-background, var(--slate-01));
     --_text-colour: var(--display-pill-text-colour, var(--slate-09));
+    --_border-colour: var(--display-pill-border-colour, transparent);
+    --_ring-colour: var(--display-pill-ring-colour, var(--_background));
     --_font-size: var(--display-pill-font-size, 1.2rem);
     --_icon-size: var(--display-pill-icon-size, 1.4rem);
 
@@ -92,19 +103,21 @@ watch(
     }
 
     border: var(--display-pill-border-width, 0.1rem) var(--display-pill-border-style, solid)
-      var(--display-pill-border-colour, transparent);
+      var(--_border-colour);
     /* 100vw always resolves to a full pill radius regardless of element size */
     border-radius: var(--display-pill-border-radius, 100vw);
     outline: var(--display-pill-outline, none);
     outline-offset: var(--display-pill-outline-offset, 0);
+    /* box-shadow, not outline: outlines ignore border-radius before Safari 16.4. */
+    box-shadow: 0 0 0 var(--display-pill-ring-width, 0) var(--_ring-colour);
     background-color: var(--_background);
     color: var(--_text-colour);
     font-family: inherit;
     font-size: var(--_font-size);
     font-weight: var(--display-pill-font-weight, 500);
     line-height: 1;
-    white-space: nowrap;
     width: fit-content;
+    max-inline-size: 100%;
     cursor: default;
     user-select: none;
 
@@ -117,55 +130,78 @@ watch(
       }
     }
 
-    &.is-reversed {
+    &:empty {
+      display: none;
+    }
+
+    &[data-reversed] {
       flex-direction: row-reverse;
     }
 
     .display-pill-icon {
       display: inline-flex;
+      flex-shrink: 0;
       align-items: center;
       font-size: var(--_icon-size);
     }
 
     .display-pill-label {
-      display: inline-flex;
-      align-items: center;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: var(--display-pill-label-line-clamp, 1);
+      line-clamp: var(--display-pill-label-line-clamp, 1);
+      overflow: hidden;
+      overflow-wrap: anywhere;
+      min-inline-size: 0;
+      /* Room for descenders and accents, which line-height: 1 would otherwise clip. */
+      padding-block: 0.15em;
+      margin-block: -0.15em;
     }
 
-    &.sm {
+    &[data-size="sm"] {
       --_font-size: var(--display-pill-font-size-sm, 1rem);
       --_icon-size: var(--display-pill-icon-size-sm, 1.2rem);
     }
 
-    &.lg {
+    &[data-size="lg"] {
       --_font-size: var(--display-pill-font-size-lg, 1.4rem);
       --_icon-size: var(--display-pill-icon-size-lg, 1.6rem);
     }
 
     /* Variant token, then the base token, then the variant's own default. */
-    &.primary {
+    &[data-variant="primary"] {
       --_background: var(--display-pill-primary-background, var(--display-pill-background, var(--blue-01)));
       --_text-colour: var(--display-pill-primary-text-colour, var(--display-pill-text-colour, var(--blue-09)));
+      --_border-colour: var(--display-pill-primary-border-colour, var(--display-pill-border-colour, transparent));
+      --_ring-colour: var(--display-pill-primary-ring-colour, var(--display-pill-ring-colour, var(--_background)));
     }
 
-    &.success {
-      --_background: var(--display-pill-success-background, var(--display-pill-background, var(--green-01)));
-      --_text-colour: var(--display-pill-success-text-colour, var(--display-pill-text-colour, var(--green-10)));
+    &[data-variant="success"] {
+      --_background: var(--display-pill-success-background, var(--display-pill-background, var(--status-success-surface)));
+      --_text-colour: var(--display-pill-success-text-colour, var(--display-pill-text-colour, var(--status-success-text)));
+      --_border-colour: var(--display-pill-success-border-colour, var(--display-pill-border-colour, transparent));
+      --_ring-colour: var(--display-pill-success-ring-colour, var(--display-pill-ring-colour, var(--_background)));
     }
 
-    &.warning {
-      --_background: var(--display-pill-warning-background, var(--display-pill-background, var(--orange-01)));
-      --_text-colour: var(--display-pill-warning-text-colour, var(--display-pill-text-colour, var(--orange-10)));
+    &[data-variant="warning"] {
+      --_background: var(--display-pill-warning-background, var(--display-pill-background, var(--status-warning-surface)));
+      --_text-colour: var(--display-pill-warning-text-colour, var(--display-pill-text-colour, var(--status-warning-text)));
+      --_border-colour: var(--display-pill-warning-border-colour, var(--display-pill-border-colour, transparent));
+      --_ring-colour: var(--display-pill-warning-ring-colour, var(--display-pill-ring-colour, var(--_background)));
     }
 
-    &.danger {
-      --_background: var(--display-pill-danger-background, var(--display-pill-background, var(--red-01)));
-      --_text-colour: var(--display-pill-danger-text-colour, var(--display-pill-text-colour, var(--red-10)));
+    &[data-variant="danger"] {
+      --_background: var(--display-pill-danger-background, var(--display-pill-background, var(--status-danger-surface)));
+      --_text-colour: var(--display-pill-danger-text-colour, var(--display-pill-text-colour, var(--status-danger-text)));
+      --_border-colour: var(--display-pill-danger-border-colour, var(--display-pill-border-colour, transparent));
+      --_ring-colour: var(--display-pill-danger-ring-colour, var(--display-pill-ring-colour, var(--_background)));
     }
 
-    &.neutral {
+    &[data-variant="neutral"] {
       --_background: var(--display-pill-neutral-background, var(--display-pill-background, var(--slate-08)));
       --_text-colour: var(--display-pill-neutral-text-colour, var(--display-pill-text-colour, var(--slate-03)));
+      --_border-colour: var(--display-pill-neutral-border-colour, var(--display-pill-border-colour, transparent));
+      --_ring-colour: var(--display-pill-neutral-ring-colour, var(--display-pill-ring-colour, var(--_background)));
     }
   }
 }

package/app/components/01.atoms/display-pill/stories/DisplayPill.stories.ts

@@ -1,6 +1,10 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { computed } from "vue";
 import StorybookComponent from "../DisplayPill.vue";
 
+type LineClamp = "none" | "1" | "2" | "3";
+
+// labelLineClamp is story-only: it drives a CSS token, not a DisplayPill prop. See its argTypes entry.
 type StoryArgs = {
   tag: "span" | "div" | "button" | "a";
   label: string;
@@ -8,12 +12,32 @@ type StoryArgs = {
   variant: "default" | "primary" | "success" | "warning" | "danger" | "neutral";
   reversed: boolean;
   showIcon: boolean;
+  labelLineClamp: LineClamp;
+  ring?: boolean;
 };
 
 export default {
   title: "Atoms/DisplayPill",
   component: StorybookComponent,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Used for the neutral duration and price pills in [ServiceSummary](?path=/story/organisms-services-service-summary--default) " +
+          "and [ServiceDetail](?path=/story/organisms-services-service-detail--default), which restyle them through their own pill tokens.",
+      },
+    },
+  },
   argTypes: {
+    labelLineClamp: {
+      control: "select",
+      options: ["none", "1", "2", "3"] satisfies LineClamp[],
+      description:
+        "**Story control, not a prop.** Sets the `--display-pill-label-line-clamp` CSS token on a wrapper so you can try it here. " +
+        "To use it in an app, set the token in your own CSS, e.g. `.tag-list { --display-pill-label-line-clamp: none; }`. " +
+        "`1` (the default) is single-line ellipsis, `none` lets a long label wrap.",
+      table: { category: "CSS tokens (story only, set in your CSS)", defaultValue: { summary: "1" } },
+    },
     tag: {
       control: { type: "inline-radio" },
       options: ["span", "div", "button", "a"],
@@ -58,16 +82,30 @@ export default {
     variant: "default",
     reversed: false,
     showIcon: true,
+    labelLineClamp: "1",
   },
 } as Meta<StoryArgs>;
 
+// Links open in the Storybook manager (target="_top"), not inside the preview iframe.
+const usedByNote = `
+  <p style="margin: 0; flex-basis: 100%; text-align: center; font-size: 1.4rem;">
+    In use: the duration and price pills in the
+    <a href="/?path=/story/organisms-services-service-summary--default" target="_top">ServiceSummary</a> and
+    <a href="/?path=/story/organisms-services-service-detail--default" target="_top">ServiceDetail</a> stories.
+  </p>
+`;
+
+const tokenStyles = (args: StoryArgs) =>
+  computed(() => ({ "--display-pill-label-line-clamp": args.labelLineClamp }));
+
 const Template: StoryFn<StoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
-    return { args };
+    return { args, tokenStyles: tokenStyles(args) };
   },
   template: `
-    <div style="display: flex; align-items: center; justify-content: center; min-height: 100vh; gap: 1.6rem; flex-wrap: wrap;">
+    <div :style="tokenStyles" style="display: flex; align-items: center; align-content: center; justify-content: center; min-height: 100vh; gap: 1.6rem; flex-wrap: wrap;">
+      ${usedByNote}
       <StorybookComponent
         :tag="args.tag"
         :label="args.label"
@@ -90,10 +128,11 @@ const variants = ["default", "primary", "success", "warning", "danger", "neutral
 export const AllVariants: StoryFn<StoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
-    return { args, variants };
+    return { args, variants, tokenStyles: tokenStyles(args) };
   },
   template: `
-    <div style="display: flex; align-items: center; justify-content: center; min-height: 100vh; gap: 1.6rem; flex-wrap: wrap;">
+    <div :style="tokenStyles" style="display: flex; align-items: center; align-content: center; justify-content: center; min-height: 100vh; gap: 1.6rem; flex-wrap: wrap;">
+      ${usedByNote}
       <StorybookComponent
         v-for="variant in variants"
         :key="variant"
@@ -112,30 +151,215 @@ export const AllVariants: StoryFn<StoryArgs> = (args) => ({
 });
 AllVariants.argTypes = { variant: { table: { disable: true } }, label: { table: { disable: true } } };
 
-export const OutlinedViaBaseTokens: StoryFn<StoryArgs> = (args) => ({
+// Each variant keeps its own text colour, so currentColor borders follow the variant. Neutral's text is a light
+// step (it's the dark, inverted pill), so it's darkened here to stay visible once its background is transparent.
+const tokenShowcase =
+  (tokens: string, argTokens: (args: StoryArgs) => Record<string, string> = () => ({})): StoryFn<StoryArgs> =>
+  (args) => ({
   components: { StorybookComponent },
   setup() {
-    return { args, variants };
+    return { args, variants, argStyles: computed(() => argTokens(args)) };
   },
   template: `
-    <div
-      style="
-        display: flex; align-items: center; justify-content: center; min-height: 100vh; gap: 1.6rem; flex-wrap: wrap;
-        --display-pill-background: transparent;
-        --display-pill-text-colour: #1e293b;
-        --display-pill-border-colour: currentColor;
-      "
-    >
-      <StorybookComponent v-for="variant in variants" :key="variant" :label="variant" :size="args.size" :variant="variant" />
+    <div :style="argStyles" style="display: flex; align-items: center; justify-content: center; min-height: 100vh; gap: 1.6rem; flex-wrap: wrap; ${tokens}">
+      <StorybookComponent
+        v-for="variant in variants"
+        :key="variant"
+        :tag="args.tag"
+        :label="variant"
+        :size="args.size"
+        :variant="variant"
+        :reversed="args.reversed"
+      >
+        <template v-if="args.showIcon" #icon>
+          <Icon name="material-symbols:check-circle-outline" />
+        </template>
+      </StorybookComponent>
     </div>
   `,
 });
+
+const showcaseArgTypes = {
+  variant: { table: { disable: true } },
+  label: { table: { disable: true } },
+  labelLineClamp: { table: { disable: true } },
+};
+
+export const OutlinedViaBaseTokens = tokenShowcase(`
+  --display-pill-background: transparent;
+  --display-pill-border-width: 0.2rem;
+  --display-pill-border-colour: var(--slate-05);
+  --display-pill-primary-border-colour: var(--blue-06);
+  --display-pill-success-border-colour: var(--status-success);
+  --display-pill-warning-border-colour: var(--status-warning);
+  --display-pill-danger-border-colour: var(--status-danger);
+  --display-pill-neutral-border-colour: var(--slate-08);
+  --display-pill-neutral-text-colour: var(--slate-08);
+`);
 OutlinedViaBaseTokens.storyName = "Outlined (base tokens override every variant)";
+OutlinedViaBaseTokens.argTypes = showcaseArgTypes;
 OutlinedViaBaseTokens.parameters = {
   docs: {
     description: {
       story:
-        "Setting only the base --display-pill-background/-text-colour/-border-colour on an ancestor restyles every variant. A variant-specific token (e.g. --display-pill-success-background) would still win for that variant.",
+        "A transparent base --display-pill-background on an ancestor clears every variant's fill; --display-pill-border-colour sets a base border, " +
+        "and the per-variant --display-pill-<variant>-border-colour tokens give each variant its own mid-step status colour while the text keeps its darker step. " +
+        "--display-pill-neutral-text-colour darkens the neutral pill, whose default text is light because it's normally a dark, inverted pill.",
+    },
+  },
+};
+
+// A 2px ring in each variant's light -02 step, toggled by the story-only ring control.
+const ring02Tokens: Record<string, string> = {
+  "--display-pill-ring-width": "0.2rem",
+  "--display-pill-ring-colour": "var(--slate-02)",
+  "--display-pill-primary-ring-colour": "var(--blue-02)",
+  "--display-pill-success-ring-colour": "var(--green-02)",
+  "--display-pill-warning-ring-colour": "var(--orange-02)",
+  "--display-pill-danger-ring-colour": "var(--red-02)",
+  "--display-pill-neutral-ring-colour": "var(--slate-02)",
+};
+
+const ringArgTypes = {
+  ...showcaseArgTypes,
+  ring: {
+    control: "boolean" as const,
+    description:
+      "**Story control, not a prop.** Sets `--display-pill-ring-width: 0.2rem` and `--display-pill-<variant>-ring-colour` to each variant's `-02` step " +
+      "(`var(--blue-02)`, `var(--green-02)`...) on a wrapper. In an app, set the same tokens in your CSS, e.g. `.tag-list { --display-pill-ring-width: 0.2rem; }`.",
+    table: { category: "CSS tokens (story only, set in your CSS)", defaultValue: { summary: "off" } },
+  },
+};
+
+const ringArgTokens = (args: StoryArgs): Record<string, string> => (args.ring ? ring02Tokens : {});
+
+export const OutlinedMonochrome = tokenShowcase(`
+  --display-pill-background: transparent;
+  --display-pill-border-colour: currentColor;
+  --display-pill-text-colour: var(--slate-07);
+  --display-pill-primary-text-colour: var(--blue-07);
+  --display-pill-success-text-colour: var(--green-07);
+  --display-pill-warning-text-colour: var(--orange-07);
+  --display-pill-danger-text-colour: var(--red-07);
+  --display-pill-neutral-text-colour: var(--slate-10);
+`, ringArgTokens);
+OutlinedMonochrome.storyName = "Outlined monochrome (mid-step colours)";
+OutlinedMonochrome.args = { ring: false };
+OutlinedMonochrome.argTypes = ringArgTypes;
+OutlinedMonochrome.parameters = {
+  docs: {
+    description: {
+      story:
+        "Border and text share one colour per variant (--display-pill-border-colour: currentColor on a transparent background). " +
+        "The default text steps (-09/-10) are near-black in every hue, so outlined like this the variants look alike. " +
+        "Each text token is lifted to its -07 step (all at 48% lightness, so contrast stays even across variants); the border follows because it's currentColor. " +
+        "default and neutral are both slate, so neutral uses the darker -10 step to stay distinct.",
+    },
+  },
+};
+
+export const RingedTwoTone = tokenShowcase(`
+  --display-pill-border-width: 0.1rem;
+  --display-pill-border-colour: currentColor;
+  --display-pill-ring-width: 0.2rem;
+`, ringArgTokens);
+RingedTwoTone.storyName = "Ringed (dark border, light ring, per variant)";
+RingedTwoTone.args = { ring: false };
+RingedTwoTone.argTypes = ringArgTypes;
+RingedTwoTone.parameters = {
+  docs: {
+    description: {
+      story:
+        "A 1px border in the variant's dark text colour (--display-pill-border-colour: currentColor) inside a 2px ring in the variant's light background colour " +
+        "(--display-pill-ring-width: 0.2rem; --display-pill-ring-colour defaults to the pill's background). The neutral pill is inverted, so its border is light and its ring dark. " +
+        "The ring control (a CSS token, not a prop) swaps the ring to each variant's -02 step, a shade darker than the fill, so it reads as a separate ring. " +
+        "The ring is a box-shadow, so it takes no layout space: leave room around ringed pills with gap or margin.",
+    },
+  },
+};
+
+const longGerman = "Haarverlängerungsberatungstermin";
+
+type StressCase = {
+  key: string;
+  caption: string;
+  label?: string;
+  slotHtml?: string;
+  icon?: string;
+  variant?: string;
+  size?: "sm" | "md" | "lg";
+  tag?: "span" | "button" | "a";
+  reversed?: boolean;
+  dir?: "rtl";
+};
+
+const stressCases: StressCase[] = [
+  { key: "german", caption: "Long German words", label: `${longGerman} und ${longGerman}`, icon: "material-symbols:schedule-outline" },
+  { key: "url", caption: "Unbroken URL", label: "https://example.com/a/very/long/path/that/never/breaks/anywhere/at/all" },
+  { key: "price", caption: "Long price (reversed)", label: "Ab 1.250,00 € pro Sitzung", icon: "material-symbols:sell-outline", reversed: true },
+  { key: "emoji", caption: "Emoji first", label: "👩‍👩‍👧‍👦🇬🇧🇫🇷 Family plan", variant: "primary" },
+  { key: "html", caption: "HTML-like text", label: "<script>alert('xss')</script>", variant: "danger" },
+  { key: "rtl", caption: "Right-to-left", label: "تسريحات شعر جديدة لموسم الخريف", icon: "material-symbols:check-circle-outline", dir: "rtl", variant: "success" },
+  { key: "accents", caption: "Descenders and accents", label: "Ägypten · gypsy · ÇĄĘ · Ýjqpg", variant: "warning", size: "lg" },
+  { key: "single", caption: "Single character", label: "A", variant: "neutral" },
+  { key: "empty", caption: "Empty label (renders nothing)", label: "" },
+  { key: "blank", caption: "Whitespace label + icon (icon-only)", label: "   ", icon: "material-symbols:star-outline", variant: "primary" },
+  { key: "brokenIcon", caption: "Broken icon name", label: "Missing icon", icon: "material-symbols:this-icon-does-not-exist" },
+  { key: "slot", caption: "Long default slot", slotHtml: `<strong>Pro</strong> plan with ${longGerman}`, icon: "material-symbols:star", variant: "primary" },
+  { key: "invalidVariant", caption: "Unknown variant from a CMS", label: "variant: info", variant: "info" },
+  { key: "button", caption: "Button, small", label: `Filter: ${longGerman}`, tag: "button", size: "sm" },
+  { key: "link", caption: "Link, large", label: `${longGerman}${longGerman}`, tag: "a", size: "lg", variant: "neutral" },
+];
+
+const stressWidths = ["32rem", "16rem", "8rem"];
+
+export const StressTest: StoryFn<StoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    return { stressCases, stressWidths, tokenStyles: tokenStyles(args) };
+  },
+  template: `
+    <div :style="tokenStyles" style="display: grid; gap: 2.4rem; padding: 3.2rem 2rem; font: 1.2rem sans-serif;">
+      <div style="display: grid; grid-template-columns: 16rem repeat(3, max-content); gap: 1.2rem 2.4rem; align-items: start;">
+        <span></span>
+        <strong v-for="width in stressWidths" :key="width">{{ width }} wide</strong>
+        <template v-for="item in stressCases" :key="item.key">
+          <span style="overflow-wrap: anywhere;">{{ item.caption }}</span>
+          <div
+            v-for="width in stressWidths"
+            :key="width"
+            :dir="item.dir"
+            :style="{ inlineSize: width, outline: '1px dashed currentColor', padding: '0.4rem' }"
+          >
+            <StorybookComponent
+              :label="item.label"
+              :variant="item.variant"
+              :size="item.size ?? 'md'"
+              :tag="item.tag ?? 'span'"
+              :href="item.tag === 'a' ? '#' : undefined"
+              :reversed="item.reversed ?? false"
+            >
+              <template v-if="item.icon" #icon><Icon :name="item.icon" /></template>
+              <template v-if="item.slotHtml" #default><span v-html="item.slotHtml"></span></template>
+            </StorybookComponent>
+          </div>
+        </template>
+      </div>
+    </div>
+  `,
+});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+StressTest.parameters = {
+  controls: { include: ["labelLineClamp"] },
+  docs: {
+    description: {
+      story:
+        "Hostile labels at three container widths: long German words, an unbroken URL, a long reversed price, emoji, HTML-like and right-to-left text, " +
+        "descenders and accents, a single character, empty and whitespace-only labels, a broken icon name, a long default slot, an unknown variant, " +
+        "and small button and large link pills. Check that no pill grows past its dashed box, long text ends in an ellipsis on one line, " +
+        "descenders and accents aren't clipped, the empty label renders no pill, the whitespace label becomes an icon-only pill, " +
+        "the unknown variant falls back to the default colours, and the icon never shrinks. " +
+        "Set the labelLineClamp control (a CSS token, not a prop) to none to see long labels wrap instead.",
     },
   },
 };

package/app/components/01.atoms/display-pill/tests/DisplayPill.spec.ts

@@ -64,14 +64,32 @@ describe("DisplayPill", () => {
     expect(wrapper.find(".display-pill-label").text()).toBe("Active");
   });
 
-  it("renders default slot when no label prop is set", async () => {
+  it("renders default slot inside .display-pill-label when no label prop is set", async () => {
     const wrapper = await mountSuspended(DisplayPill, {
       slots: { default: "<strong class='custom'>Custom</strong>" },
     });
-    expect(wrapper.find(".custom").exists()).toBe(true);
+    expect(wrapper.find(".display-pill-label .custom").exists()).toBe(true);
+  });
+
+  it("treats a whitespace-only label as no label and falls back to the default slot", async () => {
+    const wrapper = await mountSuspended(DisplayPill, {
+      props: { label: "   " },
+      slots: { default: "<strong class='custom'>Custom</strong>" },
+    });
+    expect(wrapper.find(".display-pill-label .custom").exists()).toBe(true);
+  });
+
+  it.each(["", "   "])("renders no label element for label=%j with no default slot", async (label) => {
+    const wrapper = await mountSuspended(DisplayPill, { props: { label } });
     expect(wrapper.find(".display-pill-label").exists()).toBe(false);
   });
 
+  it("renders a label with HTML-like text as text, not markup", async () => {
+    const wrapper = await mountSuspended(DisplayPill, { props: { label: "<b>bold</b>" } });
+    expect(wrapper.find(".display-pill-label").text()).toBe("<b>bold</b>");
+    expect(wrapper.find("b").exists()).toBe(false);
+  });
+
   it("does not render default slot when label prop is set", async () => {
     const wrapper = await mountSuspended(DisplayPill, {
       props: { label: "Active" },
@@ -92,43 +110,46 @@ describe("DisplayPill", () => {
 
   // ─── Size ─────────────────────────────────────────────────────────────────
 
-  it("applies md size class by default", async () => {
+  it("sets data-size='md' by default", async () => {
     const wrapper = await mountSuspended(DisplayPill);
-    expect(wrapper.classes()).toContain("md");
+    expect(wrapper.attributes("data-size")).toBe("md");
   });
 
-  it.each(["sm", "md", "lg"] as const)("applies %s size class when size='%s'", async (size) => {
+  it.each(["sm", "md", "lg"] as const)("sets data-size='%s' when size='%s'", async (size) => {
     const wrapper = await mountSuspended(DisplayPill, { props: { size } });
-    expect(wrapper.classes()).toContain(size);
+    expect(wrapper.attributes("data-size")).toBe(size);
+    expect(wrapper.classes()).not.toContain(size);
   });
 
   // ─── Variant ──────────────────────────────────────────────────────────────
 
-  it("applies default variant class by default", async () => {
+  it("sets data-variant='default' by default", async () => {
     const wrapper = await mountSuspended(DisplayPill);
-    expect(wrapper.classes()).toContain("default");
+    expect(wrapper.attributes("data-variant")).toBe("default");
   });
 
   it.each(["default", "primary", "success", "warning", "danger", "neutral"] as const)(
-    "applies %s variant class when variant='%s'",
+    "sets data-variant='%s' when variant='%s'",
     async (variant) => {
       const wrapper = await mountSuspended(DisplayPill, { props: { variant } });
-      expect(wrapper.classes()).toContain(variant);
+      expect(wrapper.attributes("data-variant")).toBe(variant);
+      expect(wrapper.classes()).not.toContain(variant);
     }
   );
 
   // ─── Reversed ─────────────────────────────────────────────────────────────
 
-  it("does not apply is-reversed class by default", async () => {
+  it("does not set data-reversed by default", async () => {
     const wrapper = await mountSuspended(DisplayPill);
-    expect(wrapper.classes()).not.toContain("is-reversed");
+    expect(wrapper.attributes("data-reversed")).toBeUndefined();
   });
 
-  it("applies is-reversed class when reversed=true", async () => {
+  it("sets data-reversed when reversed=true", async () => {
     const wrapper = await mountSuspended(DisplayPill, {
       props: { reversed: true },
     });
-    expect(wrapper.classes()).toContain("is-reversed");
+    expect(wrapper.attributes("data-reversed")).toBeDefined();
+    expect(wrapper.classes()).not.toContain("is-reversed");
   });
 
   // ─── styleClassPassthrough ────────────────────────────────────────────────
@@ -219,6 +240,14 @@ describe("DisplayPill", () => {
     expect(wrapper.attributes("data-icon-position")).toBe("only");
   });
 
+  it("sets data-icon-position='only' when the label is whitespace", async () => {
+    const wrapper = await mountSuspended(DisplayPill, {
+      props: { label: "  " },
+      slots: { icon: "<span>●</span>" },
+    });
+    expect(wrapper.attributes("data-icon-position")).toBe("only");
+  });
+
   it("treats default slot text as a label for icon position", async () => {
     const wrapper = await mountSuspended(DisplayPill, {
       slots: { icon: "<span>●</span>", default: "Pro plan" },

package/app/components/01.atoms/display-pill/tests/__snapshots__/DisplayPill.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`DisplayPill > renders correct HTML structure (default) 1`] = `"<span class="display-pill md default"><!--v-if--><span class="display-pill-label">Status</span></span>"`;
+exports[`DisplayPill > renders correct HTML structure (default) 1`] = `"<span class="display-pill" data-size="md" data-variant="default"><!--v-if--><span class="display-pill-label">Status</span></span>"`;
 
-exports[`DisplayPill > renders correct HTML structure (reversed) 1`] = `"<span class="display-pill md default is-reversed" data-icon-position="end"><span class="display-pill-icon"><span class="icon">✓</span></span><span class="display-pill-label">Status</span></span>"`;
+exports[`DisplayPill > renders correct HTML structure (reversed) 1`] = `"<span class="display-pill" data-size="md" data-variant="default" data-reversed="true" data-icon-position="end"><span class="display-pill-icon"><span class="icon">✓</span></span><span class="display-pill-label">Status</span></span>"`;
 
-exports[`DisplayPill > renders correct HTML structure (with icon slot) 1`] = `"<span class="display-pill lg success" data-icon-position="start"><span class="display-pill-icon"><span class="icon">✓</span></span><span class="display-pill-label">Status</span></span>"`;
+exports[`DisplayPill > renders correct HTML structure (with icon slot) 1`] = `"<span class="display-pill" data-size="lg" data-variant="success" data-icon-position="start"><span class="display-pill-icon"><span class="icon">✓</span></span><span class="display-pill-label">Status</span></span>"`;