srcdev-nuxt-components 9.1.42 → 9.1.44

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

@@ -1,6 +1,7 @@
+import { computed } from "vue";
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import StorybookComponent from "../DisplayChip.vue";
-import type { DisplayChipConfig } from "../../../types/components";
+import type { DisplayChipConfig } from "~/types/components";
 
 // Custom interface for story args
 interface ChipStoryArgs {
@@ -129,7 +130,7 @@ export default {
     label: "",
     status: "offline",
     useSlot: true,
-    slotContent: "Avatar content",
+    slotContent: "SRC",
     styleClassPassthrough: [],
   },
 } as Meta<typeof StorybookComponent>;
@@ -137,30 +138,43 @@ export default {
 const Template: StoryFn<ChipStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
-    const chipConfig: DisplayChipConfig = {
-      size: `${args.chipSize}px`,
-      maskWidth: `${args.chipMaskWidth}px`,
-      offset: `${args.chipOffset}px`,
-      angle: `${args.chipAngle}deg`,
-      icon: args.icon || undefined,
-      label: args.label || undefined,
-    };
+    const chipConfig = computed(
+      (): DisplayChipConfig => ({
+        size: `${args.chipSize}px`,
+        maskWidth: `${args.chipMaskWidth}px`,
+        offset: `${args.chipOffset}px`,
+        angle: `${args.chipAngle}deg`,
+        icon: args.icon || undefined,
+        label: args.label || undefined,
+      })
+    );
 
-    const classes = [...(args.styleClassPassthrough || []), args.status];
+    const classes = computed(() => [...(args.styleClassPassthrough || []), args.status]);
 
     return { args, chipConfig, classes };
   },
   template: `
-    <div style="padding: 40px; display: flex; align-items: center; justify-content: center; min-height: 200px;">
+    <div style="display: flex; align-items: center; justify-content: center; height: 100vh;">
       <StorybookComponent
         :tag="args.tag"
         :shape="args.shape"
         :config="chipConfig"
         :style-class-passthrough="classes"
-        style="width: 100px; height: 100px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500;"
       >
         <template v-if="args.useSlot" #default>
-          {{ args.slotContent }}
+          <div :style="{
+            width: '50px',
+            height: '50px',
+            background: '#64748b',
+            borderRadius: args.shape === 'circle' ? '50%' : '4px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: '#f8fafc',
+            fontWeight: '600',
+            fontSize: '1.3rem',
+            fontFamily: 'sans-serif',
+          }">{{ args.slotContent }}</div>
         </template>
       </StorybookComponent>
     </div>
@@ -179,7 +193,6 @@ export const WithIcon = Template.bind({});
 WithIcon.args = {
   status: "online",
   icon: "mdi:check",
-  slotContent: "Icon Chip",
 };
 
 // Different Statuses
@@ -257,7 +270,6 @@ SquareShape.args = {
   shape: "square",
   status: "online",
   label: "□",
-  slotContent: "Square Parent",
 };
 
 // With Offset
@@ -266,7 +278,6 @@ WithOffset.args = {
   status: "online",
   chipOffset: 10,
   label: "10",
-  slotContent: "Offset Example",
 };
 
 // Multiple Chips Demo
@@ -276,61 +287,34 @@ const MultipleChipsTemplate: StoryFn<ChipStoryArgs> = (args) => ({
     return { args };
   },
   template: `
-    <div style="padding: 40px; display: flex; gap: 40px; align-items: center; justify-content: center; flex-wrap: wrap;">
+    <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'
-        }"
+        :config="{ size: '12px', maskWidth: '4px', offset: '0px', angle: '45deg', label: '5' }"
         :style-class-passthrough="['online']"
-        style="width: 80px; height: 80px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white;"
       >
-        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'
-        }"
+        :config="{ size: '10px', maskWidth: '3px', offset: '2px', angle: '315deg', icon: 'mdi:pause' }"
         :style-class-passthrough="['idle']"
-        style="width: 80px; height: 80px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white;"
       >
-        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>
 
       <StorybookComponent
         shape="square"
-        :config="{
-          size: '14px',
-          maskWidth: '2px',
-          offset: '-5px',
-          angle: '135deg',
-          label: 'DND'
-        }"
+        :config="{ size: '14px', maskWidth: '2px', offset: '-5px', angle: '135deg', label: 'DND' }"
         :style-class-passthrough="['dnd']"
-        style="width: 80px; height: 80px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white;"
       >
-        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'
-        }"
+        :config="{ size: '16px', maskWidth: '6px', offset: '8px', angle: '90deg' }"
         :style-class-passthrough="['offline']"
-        style="width: 80px; height: 80px; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: white;"
       >
-        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>
     </div>
   `,

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

@@ -0,0 +1,191 @@
+import { describe, it, expect, vi } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import DisplayChip from "../DisplayChip.vue";
+
+describe("DisplayChip", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(DisplayChip);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure (default)", async () => {
+    const wrapper = await mountSuspended(DisplayChip);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (with label)", async () => {
+    const wrapper = await mountSuspended(DisplayChip, {
+      props: { config: { size: "12px", maskWidth: "4px", offset: "0px", angle: "90deg", label: "5" } },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (with icon)", async () => {
+    const wrapper = await mountSuspended(DisplayChip, {
+      props: { config: { size: "12px", maskWidth: "4px", offset: "0px", angle: "90deg", icon: "mdi:check" } },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (square + styleClassPassthrough)", async () => {
+    const wrapper = await mountSuspended(DisplayChip, {
+      props: { shape: "square", styleClassPassthrough: ["online"] },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("renders as <span> by default", async () => {
+    const wrapper = await mountSuspended(DisplayChip);
+    expect(wrapper.element.tagName).toBe("SPAN");
+  });
+
+  it("renders as <div> when tag='div'", async () => {
+    const wrapper = await mountSuspended(DisplayChip, { props: { tag: "div" } });
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  // ─── Base class ───────────────────────────────────────────────────────────
+
+  it("always has the display-chip-core class", async () => {
+    const wrapper = await mountSuspended(DisplayChip);
+    expect(wrapper.classes()).toContain("display-chip-core");
+  });
+
+  // ─── Shape ────────────────────────────────────────────────────────────────
+
+  it("applies circle class by default", async () => {
+    const wrapper = await mountSuspended(DisplayChip);
+    expect(wrapper.classes()).toContain("circle");
+  });
+
+  it("applies square class when shape='square'", async () => {
+    const wrapper = await mountSuspended(DisplayChip, { props: { shape: "square" } });
+    expect(wrapper.classes()).toContain("square");
+    expect(wrapper.classes()).not.toContain("circle");
+  });
+
+  // ─── CSS custom properties ────────────────────────────────────────────────
+
+  it("sets CSS custom properties from config", async () => {
+    const wrapper = await mountSuspended(DisplayChip, {
+      props: {
+        config: { size: "16px", maskWidth: "3px", offset: "4px", angle: "45deg" },
+      },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--chip-size")).toBe("16px");
+    expect(style.getPropertyValue("--chip-mask-width")).toBe("3px");
+    expect(style.getPropertyValue("--chip-offset")).toBe("4px");
+    expect(style.getPropertyValue("--chip-angle")).toBe("45deg");
+  });
+
+  it("sets default CSS custom properties 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");
+  });
+
+  // ─── Label ────────────────────────────────────────────────────────────────
+
+  it("does not render .chip-label when config has no label", async () => {
+    const wrapper = await mountSuspended(DisplayChip);
+    expect(wrapper.find(".chip-label").exists()).toBe(false);
+  });
+
+  it("renders .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");
+  });
+
+  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);
+  });
+
+  it("truncates label to 3 characters when label exceeds maximum length", async () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    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");
+    warnSpy.mockRestore();
+  });
+
+  it("emits a console warning when label exceeds 3 characters", async () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    await mountSuspended(DisplayChip, {
+      props: { config: { size: "12px", maskWidth: "4px", offset: "0px", angle: "90deg", label: "ABCD" } },
+    });
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("exceeds maximum length of 3 characters"));
+    warnSpy.mockRestore();
+  });
+
+  // ─── Icon ─────────────────────────────────────────────────────────────────
+
+  it("does not render .chip-icon when config has no icon", async () => {
+    const wrapper = await mountSuspended(DisplayChip);
+    expect(wrapper.find(".chip-icon").exists()).toBe(false);
+  });
+
+  it("renders .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);
+  });
+
+  // ─── Slot ─────────────────────────────────────────────────────────────────
+
+  it("renders default slot content", async () => {
+    const wrapper = await mountSuspended(DisplayChip, {
+      slots: { default: "<div class='avatar'>SRC</div>" },
+    });
+    expect(wrapper.find(".avatar").exists()).toBe(true);
+    expect(wrapper.find(".avatar").text()).toBe("SRC");
+  });
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(DisplayChip, {
+      props: { styleClassPassthrough: "online" },
+    });
+    expect(wrapper.classes()).toContain("online");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(DisplayChip, {
+      props: { styleClassPassthrough: ["online", "featured"] },
+    });
+    expect(wrapper.classes()).toContain("online");
+    expect(wrapper.classes()).toContain("featured");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(DisplayChip, {
+      props: { styleClassPassthrough: ["online"] },
+    });
+    expect(wrapper.classes()).toContain("online");
+    await wrapper.setProps({ styleClassPassthrough: ["idle"] });
+    expect(wrapper.classes()).not.toContain("online");
+    expect(wrapper.classes()).toContain("idle");
+  });
+});

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

@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DisplayChip > renders correct HTML structure (default) 1`] = `"<span class="display-chip-core 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 (square + styleClassPassthrough) 1`] = `"<span class="display-chip-core 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 (with icon) 1`] = `
+"<span class="display-chip-core 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>
+<!--v-if--></span>"
+`;
+
+exports[`DisplayChip > renders correct HTML structure (with label) 1`] = `"<span class="display-chip-core 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>"`;

package/app/pages/auto-grid.vue

@@ -0,0 +1,311 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-32']">
+          <h1 class="page-heading-1">AutoGrid</h1>
+          <p class="page-body-normal">
+            Responsive auto-fit CSS grid wrapper. Columns auto-fit to a minimum width; when
+            <code>is-responsive</code> is enabled, the minimum shifts at container breakpoints via
+            <code>@container</code> queries.
+          </p>
+        </LayoutRow>
+
+        <div v-if="isDev" class="qa-panel">
+          <details class="qa-panel__details">
+            <summary class="qa-panel__summary">
+              <span class="qa-panel__title">QA — AutoGrid</span>
+              <code class="qa-panel__status">
+                tag:{{ qaTag }} · responsive:{{ qaIsResponsive ? "on" : "off" }} · small:{{ qaMinColSizeSmall }} · default:{{ qaMinColSizeDefault }} · large:{{ qaMinColSizeLarge }} · gap:{{ qaGap }}
+              </code>
+            </summary>
+            <div class="qa-panel__body">
+
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">tag</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="opt in tagOptions"
+                    :key="opt"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaTag === opt }"
+                    @click="qaTag = opt"
+                  >{{ opt }}</button>
+                </div>
+              </div>
+
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">is-responsive</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="opt in [true, false]"
+                    :key="String(opt)"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaIsResponsive === opt }"
+                    @click="qaIsResponsive = opt"
+                  >{{ opt ? "on" : "off" }}</button>
+                </div>
+              </div>
+
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">min-col-size-small</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="preset in sizePresets"
+                    :key="preset"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaMinColSizeSmall === preset }"
+                    @click="qaMinColSizeSmall = preset"
+                  >{{ preset }}</button>
+                </div>
+                <input v-model="qaMinColSizeSmall" placeholder="e.g. 200px" class="qa-panel__input" />
+              </div>
+
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">min-col-size-default</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="preset in sizePresets"
+                    :key="preset"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaMinColSizeDefault === preset }"
+                    @click="qaMinColSizeDefault = preset"
+                  >{{ preset }}</button>
+                </div>
+                <input v-model="qaMinColSizeDefault" placeholder="e.g. 300px" class="qa-panel__input" />
+              </div>
+
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">min-col-size-large</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="preset in sizePresets"
+                    :key="preset"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaMinColSizeLarge === preset }"
+                    @click="qaMinColSizeLarge = preset"
+                  >{{ preset }}</button>
+                </div>
+                <input v-model="qaMinColSizeLarge" placeholder="e.g. 350px" class="qa-panel__input" />
+              </div>
+
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">gap</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="preset in gapPresets"
+                    :key="preset"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaGap === preset }"
+                    @click="qaGap = preset"
+                  >{{ preset }}</button>
+                </div>
+                <input v-model="qaGap" placeholder="e.g. 2rem" class="qa-panel__input" />
+              </div>
+
+            </div>
+          </details>
+        </div>
+
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-32']">
+          <div class="auto-grid-demo-container">
+            <AutoGrid
+              :tag="qaTag"
+              :is-responsive="qaIsResponsive"
+              :min-col-size-small="qaMinColSizeSmall"
+              :min-col-size-default="qaMinColSizeDefault"
+              :min-col-size-large="qaMinColSizeLarge"
+              :style="qaStyle"
+            >
+              <template v-for="card in statCards" #[card.id] :key="card.id">
+                <div class="stat-card">
+                  <span class="stat-card__label">{{ card.label }}</span>
+                  <span class="stat-card__value">{{ card.value }}</span>
+                </div>
+              </template>
+            </AutoGrid>
+          </div>
+        </LayoutRow>
+
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: false });
+
+useHead({
+  title: "AutoGrid",
+  meta: [{ name: "description", content: "AutoGrid component demo" }],
+  bodyAttrs: { class: "auto-grid-page" },
+});
+
+const isDev = import.meta.dev;
+
+const tagOptions = ["div", "section", "article", "main"] as const;
+const qaTag = ref<"div" | "section" | "article" | "main">("div");
+const qaIsResponsive = ref(false);
+const qaMinColSizeSmall = ref("250px");
+const qaMinColSizeDefault = ref("300px");
+const qaMinColSizeLarge = ref("350px");
+const qaGap = ref("1rem");
+
+const sizePresets = ["150px", "200px", "250px", "300px", "350px", "400px"];
+const gapPresets = ["0.5rem", "1rem", "1.6rem", "2.4rem", "3.2rem"];
+
+const qaStyle = computed(() => ({
+  "--auto-grid-min-col-size-small": qaMinColSizeSmall.value,
+  "--auto-grid-min-col-size-default": qaMinColSizeDefault.value,
+  "--auto-grid-min-col-size-large": qaMinColSizeLarge.value,
+  "--auto-grid-gap": qaGap.value,
+}));
+
+const statCards = [
+  { id: "item-1", label: "Revenue", value: "£24,500" },
+  { id: "item-2", label: "Clients", value: "142" },
+  { id: "item-3", label: "Bookings", value: "38" },
+  { id: "item-4", label: "Avg. Rating", value: "4.9" },
+  { id: "item-5", label: "New Users", value: "76" },
+  { id: "item-6", label: "Retention", value: "91%" },
+];
+</script>
+
+<style lang="css">
+.auto-grid-page {
+  code {
+    font-family: monospace;
+    font-size: 0.9em;
+    background: var(--slate-02);
+    padding: 0.1em 0.4em;
+    border-radius: 0.3rem;
+  }
+
+  .auto-grid-demo-container {
+    container-type: inline-size;
+  }
+
+  .stat-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+    padding: 2.4rem;
+    background: white;
+    border-radius: 0.8rem;
+    box-shadow: 0 2px 8px oklch(0% 0 0 / 0.08);
+  }
+
+  .stat-card__label {
+    font-size: 1.2rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--slate-08, #6b7280);
+  }
+
+  .stat-card__value {
+    font-size: 2.4rem;
+    font-weight: 700;
+    color: var(--slate-12, #111827);
+  }
+
+  /* ── QA Panel ──────────────────────────────────────────────────── */
+
+  .qa-panel {
+    background: oklch(15% 0 0);
+    color: white;
+    font-size: 1.3rem;
+  }
+
+  .qa-panel__details {
+    padding: 1rem 2rem;
+  }
+
+  .qa-panel__summary {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 1.6rem;
+    list-style: none;
+    user-select: none;
+
+    &::-webkit-details-marker { display: none; }
+  }
+
+  .qa-panel__title {
+    font-weight: 600;
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  .qa-panel__status {
+    font-family: monospace;
+    font-size: 1.2rem;
+    background: oklch(0% 0 0 / 0.3);
+    padding: 0.2rem 0.8rem;
+    border-radius: 0.4rem;
+    user-select: text;
+    cursor: text;
+  }
+
+  .qa-panel__body {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2.4rem;
+    padding-block: 1.2rem 0.4rem;
+  }
+
+  .qa-panel__group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+  }
+
+  .qa-panel__label {
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    opacity: 0.55;
+  }
+
+  .qa-panel__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+  }
+
+  .qa-panel__chip {
+    font-family: monospace;
+    font-size: 1.2rem;
+    color: white;
+    background: oklch(0% 0 0 / 0.25);
+    border: 1px solid oklch(100% 0 0 / 0.18);
+    padding: 0.3rem 1rem;
+    border-radius: 0.4rem;
+    cursor: pointer;
+    transition: background 0.15s;
+
+    &:hover { background: oklch(0% 0 0 / 0.4); }
+
+    &.is-active {
+      background: oklch(55% 0.18 240);
+      border-color: oklch(55% 0.18 240);
+    }
+  }
+
+  .qa-panel__input {
+    font-family: monospace;
+    font-size: 1.2rem;
+    color: white;
+    background: oklch(0% 0 0 / 0.25);
+    border: 1px solid oklch(100% 0 0 / 0.18);
+    padding: 0.3rem 1rem;
+    border-radius: 0.4rem;
+    width: 18rem;
+
+    &::placeholder { opacity: 0.45; }
+  }
+}
+</style>