srcdev-nuxt-components 9.6.0 → 9.6.1

package/app/components/01.atoms/animations/glowing-border/stories/GlowingBorder.stories.ts

@@ -1,5 +1,10 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { computed, ref } from "vue";
 import StorybookComponent from "../GlowingBorder.vue";
+import InputTextCore from "../../../../05.forms/input-text/InputTextCore.vue";
+import InputButton from "../../../../05.forms/input-button/InputButton.vue";
+import CanvasSwitcher from "../../../canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
 
 const PX_OPTIONS = ["1px", "2px", "3px", "4px", "5px", "6px"] as const;
 const DURATION_OPTIONS = ["5s", "6s", "7s", "8s", "9s", "10s", "11s", "12s", "13s", "14s", "15s"] as const;
@@ -11,8 +16,24 @@ type StoryArgs = {
   borderWidth: (typeof PX_OPTIONS)[number];
   borderRadius: (typeof PX_OPTIONS)[number];
   animationDuration: (typeof DURATION_OPTIONS)[number];
+  canvasBackground: string;
+  surface: string;
 };
 
+const darkColours = ["#000000", "#020024", "#0f0f23", "#1e293b", "#262626"];
+const darkColourLabels = {
+  "": "Theme default (light)",
+  "#000000": "Black",
+  "#020024": "Midnight",
+  "#0f0f23": "Ink",
+  "#1e293b": "Slate",
+  "#262626": "Charcoal",
+};
+const surfaceLabels = { ...darkColourLabels, "#ffffff": "White" };
+const isDark = (colour: string) => darkColours.includes(colour);
+
+const tokenCategory = "CSS tokens (story only, set in your CSS)";
+
 export default {
   title: "Atoms/Effects/GlowingBorder",
   component: StorybookComponent,
@@ -29,25 +50,41 @@ export default {
     },
     content: {
       control: { type: "text" },
-      description: "Slot content",
+      description: "**Story control, not a prop.** Text placed in the default slot.",
+      table: { category: "Slot content (story only)" },
     },
     borderWidth: {
       control: { type: "select" },
       options: PX_OPTIONS,
-      description: "--glowing-border-width",
-      table: { category: "CSS tokens" },
+      description: "**Story control, not a prop.** Sets `--glowing-border-width`. In your CSS: `.promo { --glowing-border-width: 4px; }`",
+      table: { category: tokenCategory },
     },
     borderRadius: {
       control: { type: "select" },
       options: PX_OPTIONS,
-      description: "--glowing-border-radius",
-      table: { category: "CSS tokens" },
+      description: "**Story control, not a prop.** Sets `--glowing-border-radius`. In your CSS: `.promo { --glowing-border-radius: 6px; }`",
+      table: { category: tokenCategory },
     },
     animationDuration: {
       control: { type: "select" },
       options: DURATION_OPTIONS,
-      description: "--glowing-border-animation-duration",
-      table: { category: "CSS tokens" },
+      description:
+        "**Story control, not a prop.** Sets `--glowing-border-animation-duration`. In your CSS: `.promo { --glowing-border-animation-duration: 6s; }`",
+      table: { category: tokenCategory },
+    },
+    surface: {
+      control: { type: "select", labels: surfaceLabels },
+      options: ["", "#ffffff", ...darkColours],
+      description:
+        "**Story control, not a prop.** Sets `--glowing-border-surface` (and a light `--glowing-border-text-colour` for dark values). In your CSS: `.promo { --glowing-border-surface: #0f0f23; --glowing-border-text-colour: #f3f4f6; }`",
+      table: { category: tokenCategory },
+    },
+    canvasBackground: {
+      control: { type: "select", labels: darkColourLabels },
+      options: ["", ...darkColours],
+      description:
+        "**Story control, not a prop.** Background of the demo stage, so the glow can be checked on a dark page.",
+      table: { category: "Story canvas (story only)" },
     },
     styleClassPassthrough: {
       table: { disable: true },
@@ -66,26 +103,43 @@ export default {
     borderWidth: "3px",
     borderRadius: "6px",
     animationDuration: "10s",
+    canvasBackground: "",
+    surface: "",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Wraps its default slot in an animated conic-gradient glow border. The canvas and surface controls are story-only, for checking the glow against dark themes.",
+      },
+    },
   },
 } as Meta<StoryArgs>;
 
+function useStorySetup(args: StoryArgs) {
+  const stageStyle = computed(() => ({
+    background: args.canvasBackground || undefined,
+  }));
+  const tokenStyle = computed(() => ({
+    "--glowing-border-width": args.borderWidth,
+    "--glowing-border-radius": args.borderRadius,
+    "--glowing-border-animation-duration": args.animationDuration,
+    "--glowing-border-surface": args.surface || undefined,
+    "--glowing-border-text-colour":
+      isDark(args.surface) ? "#f3f4f6" : undefined,
+  }));
+  return { args, stageStyle, tokenStyle };
+}
+
 const Template: StoryFn<StoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
-    return { args };
+    return useStorySetup(args);
   },
   template: `
-    <div style="padding: 40px; background-color: var(--slate-10);">
-      <StorybookComponent
-        :tag="args.tag"
-        :variant="args.variant"
-        :style="{
-          '--glowing-border-width': args.borderWidth,
-          '--glowing-border-radius': args.borderRadius,
-          '--glowing-border-animation-duration': args.animationDuration,
-        }"
-      >
-        <div style="padding: 20px; color: var(--slate-02);">
+    <div style="padding: 40px;" :style="stageStyle">
+      <StorybookComponent :tag="args.tag" :variant="args.variant" :style="tokenStyle">
+        <div style="padding: 20px;">
           <h3 style="margin: 0 0 12px 0; font-size: 1.5rem; font-weight: 600;">GlowingBorder</h3>
           <p style="margin: 0; line-height: 1.6;">{{ args.content }}</p>
         </div>
@@ -127,39 +181,144 @@ Steel.args = {
 export const Green = Template.bind({});
 Green.args = {
   variant: "green",
-  content:
-    "Green variant cycles through vibrant, saturated greens for a fresh, energetic glow effect.",
+  content: "Green variant cycles through vibrant, saturated greens for a fresh, energetic glow effect.",
+};
+
+export const CustomTokens = Template.bind({});
+CustomTokens.args = {
+  variant: "vivid",
+  content: "Border width, radius, and animation speed all driven by the CSS token controls.",
+  borderWidth: "6px",
+  borderRadius: "4px",
+  animationDuration: "5s",
+};
+
+export const HighlightedControls: StoryFn<StoryArgs> = (args) => ({
+  components: { StorybookComponent, InputTextCore, InputButton },
+  setup() {
+    const { args: storyArgs, stageStyle } = useStorySetup(args);
+    const glowStyle = (controlRadius: string) =>
+      computed(() => ({
+        "--glowing-border-width": args.borderWidth,
+        "--glowing-border-radius": `calc(${controlRadius} + ${args.borderWidth})`,
+        "--glowing-border-animation-duration": args.animationDuration,
+        "--glowing-border-surface": "transparent",
+        "--glowing-border-overflow": "visible",
+        display: "inline-block",
+      }));
+    const buttonGlowStyle = glowStyle("var(--button-border-radius)");
+    const inputGlowStyle = computed(() => ({
+      ...glowStyle("var(--form-input-border-radius)").value,
+      "--input-text-border": "transparent",
+      display: "block",
+    }));
+    const email = ref("");
+    return { args: storyArgs, stageStyle, buttonGlowStyle, inputGlowStyle, email };
+  },
+  template: `
+    <div style="padding: 40px; display: grid; gap: 32px; justify-items: start;" :style="stageStyle">
+      <StorybookComponent tag="span" :variant="args.variant" :style="buttonGlowStyle">
+        <InputButton type="button" variant="primary" button-text="Book a free consultation"></InputButton>
+      </StorybookComponent>
+
+      <div style="display: grid; gap: 8px; inline-size: min(100%, 40rem);">
+        <label for="highlighted-email">Early-access email</label>
+        <StorybookComponent :variant="args.variant" :style="inputGlowStyle">
+          <InputTextCore
+            id="highlighted-email"
+            v-model="email"
+            type="email"
+            name="highlighted-email"
+            placeholder="eg. jane@example.com"
+          ></InputTextCore>
+        </StorybookComponent>
+      </div>
+    </div>
+  `,
+});
+HighlightedControls.args = {
+  variant: "vivid",
+  borderWidth: "3px",
+};
+HighlightedControls.parameters = {
+  docs: {
+    description: {
+      story:
+        "The glow replaces a single control's border, for when a design calls out something special. No changes to the controls: " +
+        "InputButton's border already matches its surface, and the input gets `--input-text-border: transparent`. On the GlowingBorder, " +
+        "the radius is the control's radius plus the glow width, the surface is transparent, and `--glowing-border-overflow: visible` " +
+        "keeps the controls' hover and focus outlines from being clipped. Tab through to check the focus rings.",
+    },
+  },
 };
 
-const CustomTokensTemplate: StoryFn<StoryArgs> = (args) => ({
+export const StressTest: StoryFn<StoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
-    return { args };
+    const longUnbroken = "Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft";
+    const longUrl = "https://example.com/" + "a-very-long-path-segment-without-spaces".repeat(4);
+    const longCopy =
+      "Unsere Behandlungen werden individuell auf Ihre Bedürfnisse abgestimmt, damit Sie sich rundum wohlfühlen und entspannt nach Hause gehen können. ".repeat(
+        6
+      );
+    return { ...useStorySetup(args), longUnbroken, longUrl, longCopy };
   },
   template: `
-    <div style="padding: 40px; background-color: var(--slate-10);">
-      <StorybookComponent
-        :tag="args.tag"
-        :variant="args.variant"
-        :style="{
-          '--glowing-border-width': args.borderWidth,
-          '--glowing-border-radius': args.borderRadius,
-          '--glowing-border-animation-duration': args.animationDuration,
-        }"
-      >
-        <div style="padding: 20px; color: var(--slate-02);">
-          <p style="margin: 0; line-height: 1.6;">{{ args.content }}</p>
+    <div style="padding: 24px 16px; display: grid; gap: 24px;" :style="stageStyle">
+      <StorybookComponent :tag="args.tag" :variant="args.variant" :style="tokenStyle">
+        <div style="padding: 20px;">
+          <h3 style="margin: 0 0 12px 0;">{{ longUnbroken }}</h3>
+          <p style="margin: 0 0 12px 0;">{{ longUrl }}</p>
+          <p style="margin: 0;">{{ longCopy }}</p>
         </div>
       </StorybookComponent>
+      <StorybookComponent :tag="args.tag" :variant="args.variant" :style="tokenStyle"></StorybookComponent>
+      <StorybookComponent :tag="args.tag" :variant="args.variant" :style="tokenStyle">A</StorybookComponent>
+      <StorybookComponent :tag="args.tag" :variant="args.variant" :style="tokenStyle">
+        <p style="margin: 0; padding: 12px;">🎉 Emoji first, then &lt;b&gt;html&lt;/b&gt; as text</p>
+      </StorybookComponent>
+      <StorybookComponent :tag="args.tag" :variant="args.variant" :style="tokenStyle">
+        <p dir="rtl" style="margin: 0; padding: 12px;">نص عربي طويل من اليمين إلى اليسار للتحقق من الاتجاه</p>
+      </StorybookComponent>
+      <p style="margin: 0;">
+        Inline use:
+        <StorybookComponent tag="span" :variant="args.variant" :style="tokenStyle">{{ longUnbroken }}</StorybookComponent>
+        sits in running text.
+      </p>
     </div>
   `,
 });
-
-export const CustomTokens = CustomTokensTemplate.bind({});
-CustomTokens.args = {
-  variant: "vivid",
-  content: "Border width, radius, and animation speed all driven by the controls above.",
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+StressTest.args = {
   borderWidth: "6px",
-  borderRadius: "4px",
-  animationDuration: "5s",
+  borderRadius: "6px",
+};
+StressTest.decorators = [
+  (story, context) => ({
+    components: { story, CanvasSwitcher },
+    setup() {
+      const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "mobileCanvas");
+      return { canvasName };
+    },
+    template: `
+      <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+        <CanvasSwitcher v-model:canvas-name="canvasName" />
+      </div>
+      <div :class="canvasName" style="margin-inline: auto; outline: 1px dashed currentColor;">
+        <story />
+      </div>
+    `,
+  }),
+];
+StressTest.parameters = {
+  initialCanvas: "mobileCanvas",
+  docs: {
+    description: {
+      story:
+        "Oversized and odd slot content. Long unbroken words and URLs should wrap inside the border rather than being clipped " +
+        "(the root has overflow: hidden), long German copy should grow the box, the empty one should collapse to just its border, " +
+        "HTML-like text should render as text, RTL text should align right, and the inline span should wrap within running text. " +
+        "Check at every canvas width and with each variant.",
+    },
+  },
 };

package/app/components/01.atoms/animations/glowing-border/tests/GlowingBorder.spec.ts

@@ -52,19 +52,30 @@ describe("GlowingBorder", () => {
 
   // ─── Variant ──────────────────────────────────────────────────────────────
 
-  it("applies subtle variant class by default", async () => {
+  it("sets data-variant='subtle' by default", async () => {
     const wrapper = await mountSuspended(GlowingBorder);
-    expect(wrapper.classes()).toContain("subtle");
+    expect(wrapper.attributes("data-variant")).toBe("subtle");
   });
 
   it.each(["subtle", "vivid", "silver", "steel", "green"] as const)(
-    "applies %s variant class when variant='%s'",
+    "sets data-variant='%s' when variant='%s'",
     async (variant) => {
       const wrapper = await mountSuspended(GlowingBorder, { props: { variant } });
-      expect(wrapper.classes()).toContain(variant);
+      expect(wrapper.attributes("data-variant")).toBe(variant);
     }
   );
 
+  it("does not add the variant name as a class, so consumer classes like .green can't collide", async () => {
+    const wrapper = await mountSuspended(GlowingBorder, { props: { variant: "green" } });
+    expect(wrapper.classes()).not.toContain("green");
+  });
+
+  it("updates data-variant when the variant prop changes", async () => {
+    const wrapper = await mountSuspended(GlowingBorder, { props: { variant: "vivid" } });
+    await wrapper.setProps({ variant: "steel" });
+    expect(wrapper.attributes("data-variant")).toBe("steel");
+  });
+
   // ─── styleClassPassthrough ────────────────────────────────────────────────
 
   it("applies a single styleClassPassthrough string", async () => {

package/app/components/01.atoms/animations/glowing-border/tests/__snapshots__/GlowingBorder.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`GlowingBorder > renders correct HTML structure (default) 1`] = `"<div class="glowing-border subtle">Content</div>"`;
+exports[`GlowingBorder > renders correct HTML structure (default) 1`] = `"<div class="glowing-border" data-variant="subtle">Content</div>"`;

package/app/components/01.atoms/display-pill/CONSUMER-STYLING.md

@@ -17,9 +17,9 @@ the base token restyles every variant, and a variant token still wins for that o
 | `--display-pill-background` | `var(--slate-01)` | Background (the `default` variant, and the fallback for every other variant) |
 | `--display-pill-text-colour` | `var(--slate-09)` | Text/icon colour (same fallback role) |
 | `--display-pill-primary-background` / `-text-colour` | `var(--blue-01)` / `var(--blue-09)` | `primary` variant |
-| `--display-pill-success-background` / `-text-colour` | `var(--green-01)` / `var(--green-10)` | `success` variant |
-| `--display-pill-warning-background` / `-text-colour` | `var(--orange-01)` / `var(--orange-10)` | `warning` variant |
-| `--display-pill-danger-background` / `-text-colour` | `var(--red-01)` / `var(--red-10)` | `danger` variant |
+| `--display-pill-success-background` / `-text-colour` | `var(--status-success-surface)` / `var(--status-success-text)` | `success` variant |
+| `--display-pill-warning-background` / `-text-colour` | `var(--status-warning-surface)` / `var(--status-warning-text)` | `warning` variant |
+| `--display-pill-danger-background` / `-text-colour` | `var(--status-danger-surface)` / `var(--status-danger-text)` | `danger` variant |
 | `--display-pill-neutral-background` / `-text-colour` | `var(--slate-08)` / `var(--slate-03)` | `neutral` variant (dark) |
 | `--display-pill-focus-ring` | `var(--theme-border-focus)` | `:focus-visible` outline on `button`/`a` pills |
 
@@ -29,16 +29,26 @@ the base token restyles every variant, and a variant token still wins for that o
 > `--yellow-*` ramp that doesn't exist, so it always showed its hardcoded hex fallbacks; it now uses
 > the `orange` ramp the warning theme moved to.
 
+`success`, `warning` and `danger` default to the global `--status-*` tokens
+(`03.theming/_status.css`), so overriding those restyles pills along with every other status
+indicator; same colours as before (changed 2026-10-07). `primary` (brand) and `neutral` (a dark,
+inverted pill) keep their own defaults and don't read the status set. See
+`.claude/skills/theming-status-tokens.md`.
+
 ### Border, outline and shape
 
 | Token | Default | Controls |
 |---|---|---|
-| `--display-pill-border-colour` | `transparent` | Border colour |
+| `--display-pill-border-colour` | `transparent` | Border colour (every variant's fallback) |
+| `--display-pill-<variant>-border-colour` | the base border colour | Border colour for one variant (`primary`, `success`, `warning`, `danger`, `neutral`) |
 | `--display-pill-border-width` | `0.1rem` | Border width |
 | `--display-pill-border-style` | `solid` | Border style |
 | `--display-pill-border-radius` | `100vw` | Radius (100vw is always a full pill) |
 | `--display-pill-outline` | `none` | Decorative outline (shorthand) on every pill |
 | `--display-pill-outline-offset` | `0` | Offset for that outline |
+| `--display-pill-ring-width` | `0` | Width of a ring drawn just outside the border (a `box-shadow`, so it follows the radius on every browser and takes no layout space) |
+| `--display-pill-<variant>-ring-colour` | the base ring colour | Ring colour for one variant (`primary`, `success`, `warning`, `danger`, `neutral`) |
+| `--display-pill-ring-colour` | the pill's resolved background | Ring colour. The default follows each variant's background, so `border-colour: currentColor` plus a ring gives a two-tone border in every variant's own colours |
 
 ### Size
 
@@ -50,6 +60,16 @@ the base token restyles every variant, and a variant token still wins for that o
 
 The unsuffixed token is the `md` value; `-sm`/`-lg` apply to those sizes.
 
+### Label
+
+| Token | Default | Controls |
+|---|---|---|
+| `--display-pill-label-line-clamp` | `1` | Lines of label text before an ellipsis. `1` keeps the pill on one line; `none` lets a long label wrap; any other number caps the lines |
+
+Applies to the `label` prop and to default-slot content alike. Clamped text stays in the DOM, so
+screen readers still read all of it. If a pill's text must stay fully readable (a price, say) in a
+narrow space, set `none`.
+
 > **Changed 2026-09-27**: the icon-size tokens were declared but never used, so icons weren't
 > sized. The icon slot is now wrapped in `.display-pill-icon`, which sets its `font-size`.
 
@@ -70,23 +90,35 @@ keeps the same proportions. Tune a **ratio** to change spacing across all sizes,
 > `-lg`, etc., now removed). It's now derived from the icon size; results are within about 0.1rem
 > of the old values, except `lg` block padding (`0.6rem` → `0.48rem`), which was out of proportion.
 
-Private tokens (not public API): `--_background`, `--_text-colour`, `--_font-size`, `--_padding-inline`,
-`--_padding-block`, `--_padding-inline-icon` (derived from `--_icon-size`), `--_icon-size`, swapped by the size and variant classes.
+Private tokens (not public API): `--_background`, `--_text-colour`, `--_border-colour`, `--_ring-colour`, `--_font-size`, `--_padding-inline`,
+`--_padding-block`, `--_padding-inline-icon` (derived from `--_icon-size`), `--_icon-size`, swapped by the size and variant attributes.
 
 > **Changed 2026-10-06**: a pill is capped at its container's width (`max-inline-size: 100%`), and a
 > label too long for it ends in an ellipsis instead of overflowing. Short labels are unaffected.
+>
+> **Changed 2026-10-08**: default-slot text is now wrapped in `.display-pill-label` too, so it
+> ellipsizes like a `label` prop instead of spilling out of the pill. The ellipsis is now a
+> line clamp (`--display-pill-label-line-clamp`, default `1`) rather than `white-space: nowrap`,
+> so a long label breaks at a space before the ellipsis rather than mid-word. A pill with no text
+> and no icon (empty or whitespace-only `label`, no slots) no longer renders a blank coloured blob.
 
 ## State hooks
 
-- Size class: `.sm`, `.md`, `.lg`. Variant class: `.default`, `.primary`, `.success`, `.warning`,
-  `.danger`, `.neutral`. `.is-reversed` when `reversed`.
+- `data-size`: `sm`, `md`, `lg`. `data-variant`: `default`, `primary`, `success`, `warning`,
+  `danger`, `neutral` (an unknown value gets the default colours). `data-reversed` when `reversed`.
 - `data-icon-position`: `start` (icon before the text), `end` (`reversed`), `only` (icon with no
   label or text), or absent (no icon). It picks which side gets `--display-pill-padding-inline-icon`.
 - Classes: `.display-pill` (root), `.display-pill-icon` (icon slot wrapper, only when used),
-  `.display-pill-label` (only with the `label` prop).
+  `.display-pill-label` (wraps the `label` prop or default-slot content, absent when there's no text).
 - `button`/`a` roots get a pointer cursor and a `:focus-visible` outline.
 
 > **Changed 2026-09-27**: `.pill-label` → `.display-pill-label`.
+>
+> **Changed 2026-10-08**: size, variant and reversed were bare classes (`.sm`, `.primary`,
+> `.success`, `.is-reversed`...), which a consumer's own utility classes of the same name could
+> match, since the pill renders inside the consumer's DOM. Replace `.display-pill.primary` with
+> `.display-pill[data-variant="primary"]`, `.display-pill.sm` with `.display-pill[data-size="sm"]`,
+> and `.display-pill.is-reversed` with `.display-pill[data-reversed]`.
 
 ## Local overrides
 
@@ -100,6 +132,19 @@ component need `:deep()`. Patterns and examples: `.claude/skills/component-local
 won't reach those pills. `ServiceSummary` and `ServiceDetail` set `--display-pill-background`,
 `-text-colour` and `-border-colour` on their pill rows; use their own `--service-*-pill-*` tokens.
 
+## Recipe: two-tone ringed pills
+
+A 1px border in each variant's dark text colour, inside a 2px ring in its light background colour:
+
+```css
+.tag-list {
+  --display-pill-border-colour: currentColor;
+  --display-pill-ring-width: 0.2rem;
+}
+```
+
+The `neutral` variant is inverted (light text on dark), so its border comes out light and its ring dark.
+
 ## Recipe: outlined pills
 
 ```css
@@ -110,6 +155,27 @@ won't reach those pills. `ServiceSummary` and `ServiceDetail` set `--display-pil
 }
 ```
 
+That gives every variant the surrounding text colour. To keep each variant's own colour, leave
+`--display-pill-text-colour` unset and set the per-variant text tokens instead. The default text
+steps (`-09`/`-10`) are near-black in every hue, so lift them to `-07` to tell the variants apart
+(the border follows, being `currentColor`):
+
+```css
+.tag-list {
+  --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);
+}
+```
+
+Add a ring in each variant's light `-02` step with `--display-pill-ring-width: 0.2rem` and
+`--display-pill-<variant>-ring-colour` (`var(--blue-02)`, `var(--green-02)`, and so on).
+
 ## Class passthrough
 
 `style-class-passthrough` adds classes to the root. Reachable in normal use.

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,18 +103,19 @@ 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;
@@ -118,57 +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: block;
+      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;
-      overflow-x: clip;
-      text-overflow: ellipsis;
+      /* 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)));
     }
   }
 }