@saasicat/ui-vue 0.24.1 → 0.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasicat/ui-vue",
-  "version": "0.24.1",
+  "version": "0.25.0",
   "description": "Vue 3 components, resource clients and composables for the SuperAdmin UI shell. Provides boot and manifest loaders, navigation, actions and standard pages.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -61,7 +61,7 @@
     "src"
   ],
   "dependencies": {
-    "@saasicat/types": "^0.24.1"
+    "@saasicat/types": "^0.25.0"
   },
   "peerDependencies": {
     "pinia": "^2.0.0 || ^3.0.0",

package/src/components/admin-page/AdminAccordion.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="sa-accordion" :class="{ 'sa-accordion--open': open }">
+        <div class="sa-accordion__head">
+            <button
+                :id="triggerId"
+                type="button"
+                class="sa-accordion__trigger"
+                :aria-expanded="open"
+                :aria-controls="bodyId"
+                :disabled="disabled"
+                @click="emit('update:open', !open)"
+            >
+                <span
+                    v-if="$slots.mark"
+                    class="sa-accordion__mark"
+                    :class="`sa-accordion__mark--${markTone}`"
+                >
+                    <slot name="mark" />
+                </span>
+                <span class="sa-accordion__label"><slot name="header" /></span>
+                <q-icon name="chevron_right" size="18px" class="sa-accordion__chev" />
+            </button>
+            <div v-if="$slots['header-actions']" class="sa-accordion__actions">
+                <slot name="header-actions" />
+            </div>
+        </div>
+        <div
+            v-if="open"
+            :id="bodyId"
+            role="region"
+            :aria-labelledby="triggerId"
+            class="sa-accordion__body"
+        >
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useId } from 'vue';
+
+// One disclosure: a header that opens a body. Eight surfaces in this package
+// built their own, in three incompatible idioms, and agreed on nothing —
+// three header paddings, three body paddings, two radii, two colours for the
+// open border, two transition durations, and hover feedback on exactly one of
+// six despite five setting `cursor: pointer`.
+//
+// The reason is not that eight decisions were taken. It is that none was: there
+// is an `AdminTable` and an `AdminSection`, and for "open this" there was
+// nothing, so every page wrote it again. `admin-page-shell.test.ts` rule 14
+// records the same story for tables — "nine pages used QTable directly and
+// agreed on nothing".
+//
+// **The trigger is a `<button>`, and that is the point of the component.**
+// Four of the eight were a `<div>` with a click handler: no `tabindex`, no
+// keyboard, and a screen reader announcing text rather than a control. A grep
+// for `aria-expanded` across the whole package returned nothing at all. A
+// shared component has that argument once; eight surfaces have to win it eight
+// times, and the score was 4:4.
+//
+// `header-actions` is a SIBLING of the button rather than a slot inside it, and
+// both halves of that matter. A control inside the trigger would fire the
+// toggle on its way past — the discovery cards put a live status control in
+// their clickable header — and interactive content nested in a `<button>` is
+// not valid HTML, so the browser's own behaviour there is not something to
+// rely on.
+//
+// The state is NOT owned here. Five of the eight take it from the page
+// (`openKey === row.id`), and in the bundle list opening one card while closing
+// another is tied to loading that bundle's versions — a component that owned a
+// boolean would break that. The other four simply hold the id, and lose nothing
+// by the arrangement. `v-model:open` keeps the page in charge either way.
+//
+// The body is `v-if`, which is what all seven JS implementations already did.
+// Uniform by accident until now; uniform on purpose from here.
+const {
+    open,
+    disabled = false,
+    markTone = 'accent',
+} = defineProps<{
+    /** Whether the body is shown. The page owns this — see above. */
+    open: boolean;
+    /** A locked row: the trigger is inert and announces itself as such. */
+    disabled?: boolean;
+    /**
+     * The `mark` badge's tone. `accent` unless the row is in a state the badge
+     * itself should report — the discovery quota with no usage provider is the
+     * one case, and it swaps its glyph as well.
+     *
+     * Two values because two exist. The frame, size, radius and position do not
+     * change with it: that is what makes the badge the same badge everywhere.
+     */
+    markTone?: 'accent' | 'negative';
+}>();
+
+const emit = defineEmits<{ 'update:open': [value: boolean] }>();
+
+defineSlots<{
+    /**
+     * The icon that identifies the row, in a badge this component draws.
+     *
+     * A slot rather than a prop, because the glyph is sometimes conditional and
+     * sometimes carries its own attributes. The BADGE is not the page's
+     * business: three surfaces had three answers — a 34px accent-tinted square,
+     * a bare 22px glyph, and a bare 20px glyph coloured by a Quasar palette
+     * prop — so the same row on two pages did not look like the same row.
+     */
+    mark?(): unknown;
+    /** The header's content — a title, keys, chips, whatever the row needs. */
+    header(): unknown;
+    /**
+     * Controls on the right of the header that must NOT toggle it.
+     * Rendered outside the trigger, so a click here is only a click here.
+     */
+    'header-actions'?(): unknown;
+    /** The body. Only rendered while open. */
+    default(): unknown;
+}>();
+
+// `useId`, as in `AdminSection`: `aria-controls` and `aria-labelledby` have to
+// point at THIS instance, and an accordion is by nature rendered many times on
+// one page.
+const triggerId = useId();
+const bodyId = useId();
+</script>

package/src/components/bundle-editor/BundleFeaturesEditor.vue

@@ -208,7 +208,12 @@ function onToggle(featureKey: string): void {
     margin-left: 4px;
 }
 .bd-feature-pill.on .bd-feature-key {
-    color: var(--sa-color-accent);
+    /* `-strong`, not the bare accent: the pill's `on` surface is a 24 % tint of
+     * blue over the dark card, and the brand does not change between themes —
+     * 2.92:1 there. The selected states around this one were moved to
+     * `-strong` already; this descendant was missed because it sets a colour
+     * and no background, which is a shape no contrast check reads. */
+    color: var(--sa-color-accent-strong);
 }
 .bd-feature-pill.overlap .bd-feature-key {
     color: var(--sa-color-negative-fg);

package/src/components/dialogs/PilotCreateDialog.vue

@@ -170,7 +170,7 @@
                                 >
                                     <span
                                         class="pl-plan-opt__dot"
-                                        :style="{ background: p.color ?? '#94a3b8' }"
+                                        :style="{ background: p.color ?? IDENTITY_NEUTRAL }"
                                     />
                                     <div class="pl-plan-opt__text">
                                         <span class="pl-plan-opt__key">{{ p.value }}</span>
@@ -263,6 +263,7 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue';
 import MfaPromptDialog from '../MfaPromptDialog.vue';
+import { IDENTITY_NEUTRAL } from '../../client/identity-accents.js';
 import { formatMessage } from '../../client/i18n/format.js';
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { PilotCopy, PilotCreatePayload, PilotCreateResult } from './types.js';

package/src/components/dialogs/PilotEditDialog.vue

@@ -46,7 +46,7 @@
                         >
                             <span
                                 class="pl-plan-opt__dot"
-                                :style="{ background: p.color ?? '#94a3b8' }"
+                                :style="{ background: p.color ?? IDENTITY_NEUTRAL }"
                             />
                             <div class="pl-plan-opt__text">
                                 <span class="pl-plan-opt__key">{{ p.value }}</span>
@@ -148,6 +148,7 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue';
 import MfaPromptDialog from '../MfaPromptDialog.vue';
+import { IDENTITY_NEUTRAL } from '../../client/identity-accents.js';
 import { formatMessage } from '../../client/i18n/format.js';
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { PilotRow } from '../../pages-standard/PilotsPage.vue';

package/src/components/dialogs/PromoCodeDialogFields.vue

@@ -85,7 +85,10 @@
                     :style="planChipStyle(p)"
                     @click="togglePlan(p.key)"
                 >
-                    <span class="pc-plan-opt__mark" :style="{ background: p.color ?? '#64748b' }" />
+                    <span
+                        class="pc-plan-opt__mark"
+                        :style="{ background: p.color ?? IDENTITY_NEUTRAL }"
+                    />
                     {{ p.label }}
                 </button>
             </div>
@@ -265,7 +268,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { identityChipStyle } from '../../client/identity-accents.js';
+import { IDENTITY_NEUTRAL, identityChipStyle } from '../../client/identity-accents.js';
 import { formatMessage } from '../../client/i18n/format.js';
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { PromoCodeDurationType, PromoCodePlanOption, PromoCodeValueType } from './types.js';

package/src/components/plan-detail/PlanDetail.vue

@@ -825,23 +825,61 @@ async function executeTerminate(): Promise<void> {
     );
     border-color: var(--sa-color-border);
 }
+/* The marker block at the head of a diff row.
+ *
+ * Every rule below carries BOTH halves of its pair, and that is deliberate:
+ * the geometry used to live here and the background one rule further down,
+ * which made neither rule judgeable on its own. `theme-role-contrast` needs a
+ * background and a colour in the same body to measure anything, so the split
+ * hid `--sa-color-fg-on-accent` on `--sa-color-positive-strong` — white on
+ * green-500, 2.54:1, in BOTH themes — for as long as the component existed.
+ *
+ * A tint plus the tone's `-fg`, not a solid plus white: `-strong` is the rung
+ * chosen to read as a COLOUR against its theme's surface, which puts it in the
+ * middle of the lightness range — and nothing reads on the middle. That is
+ * what `<tone>-fg` and `-surface-strong` are for. */
 .pd-diff-icon {
     width: 32px;
     align-self: stretch;
     display: grid;
     place-items: center;
     flex: 0 0 32px;
-    color: var(--sa-color-fg-on-accent);
+    background: var(--sa-color-bg-sunken);
+    color: var(--sa-color-fg-body);
     font: 700 var(--sa-text-lg) var(--sa-font-body);
 }
 .pd-diff-row.add .pd-diff-icon {
-    background: var(--sa-color-positive-strong);
+    background: var(--sa-color-positive-surface-strong);
+    color: var(--sa-color-positive-fg);
 }
 .pd-diff-row.rm .pd-diff-icon {
-    background: var(--sa-color-negative-strong);
+    background: var(--sa-color-negative-surface-strong);
+    color: var(--sa-color-negative-fg);
 }
+/* Unchanged, and deliberately not brought into line with the two above: it was
+ * already readable (14.6:1) and `--sa-color-bg-sunken` is what the `mod` row
+ * itself starts its gradient with, so a neutral tint here would leave the
+ * marker with almost nothing to stand against in the light theme. It only
+ * gains the foreground it was already inheriting, so the rule can be read. */
 .pd-diff-row.mod .pd-diff-icon {
     background: var(--sa-color-inverse-surface);
+    color: var(--sa-color-inverse-fg);
+}
+/* The single-version listing marks WHAT a row is rather than what changed, so
+ * it reads the catalogue-entity roles. These three were the last colour
+ * literals in a template: `style="background: #f59e0b"` and friends, painted
+ * white by the base rule above at 2.15:1, 2.77:1 and 4.23:1. */
+.pd-diff-row.plain .pd-diff-icon.feature {
+    background: var(--sa-color-feature-surface);
+    color: var(--sa-color-feature-fg);
+}
+.pd-diff-row.plain .pd-diff-icon.quota {
+    background: var(--sa-color-quota-surface);
+    color: var(--sa-color-quota-fg);
+}
+.pd-diff-row.plain .pd-diff-icon.bundle {
+    background: var(--sa-color-bundle-surface);
+    color: var(--sa-color-bundle-fg);
 }
 .pd-diff-body {
     flex: 1;

package/src/components/plan-detail/PlanVersionDiffPanel.vue

@@ -66,7 +66,7 @@
                     :key="'cf-' + f"
                     class="pd-diff-row plain"
                 >
-                    <div class="pd-diff-icon" style="background: #8b5cf6">·</div>
+                    <div class="pd-diff-icon feature">·</div>
                     <div class="pd-diff-body">
                         <span class="pd-diff-label">{{ featureLabel(f) }}</span>
                         <code class="pd-diff-key">{{ f }}</code>
@@ -88,7 +88,7 @@
                     :key="'cq-' + k"
                     class="pd-diff-row plain"
                 >
-                    <div class="pd-diff-icon" style="background: #0ea5e9">·</div>
+                    <div class="pd-diff-icon quota">·</div>
                     <div class="pd-diff-body">
                         <span class="pd-diff-label">{{ quotaLabel(k) }}</span>
                         <code class="pd-diff-key">{{ k }}</code>
@@ -111,7 +111,7 @@
                     :key="'cb-' + b"
                     class="pd-diff-row plain"
                 >
-                    <div class="pd-diff-icon" style="background: #f59e0b">·</div>
+                    <div class="pd-diff-icon bundle">·</div>
                     <div class="pd-diff-body">
                         <span class="pd-diff-label">{{ bundleLabel(b) }}</span>
                         <code class="pd-diff-key">{{ b }}</code>

package/src/components/plan-version-editor/PlanCatalogPreview.vue

@@ -25,9 +25,13 @@
 
         <div class="pve-prev-window" :class="`pve-prev-window--${previewMode}`">
             <div class="pve-prev-chrome">
-                <span class="pve-prev-dot" style="background: #ef4444" />
-                <span class="pve-prev-dot" style="background: #f59e0b" />
-                <span class="pve-prev-dot" style="background: #10b981" />
+                <!-- The same window controls as MarketingCatalogPreview, drawn
+                     a second time, and the same reason for the `-strong`
+                     rungs. The chrome itself is duplicated markup and belongs
+                     in one component; that is a Phase 4 job, not a colour one. -->
+                <span class="pve-prev-dot" style="background: var(--sa-color-negative-strong)" />
+                <span class="pve-prev-dot" style="background: var(--sa-color-warning-strong)" />
+                <span class="pve-prev-dot" style="background: var(--sa-color-positive-strong)" />
                 <div class="pve-prev-url">{{ catalogUrl }}</div>
             </div>
             <div class="pve-prev-body">

package/src/pages-standard/BundlesPage.vue

@@ -687,32 +687,14 @@ const classifyDiff = computed(() => props.classifyDiff);
     flex-direction: column;
     gap: 8px;
 }
-.sa-bd-card {
-    background: var(--sa-color-bg-surface);
-    border: 1px solid var(--sa-color-border);
-    border-radius: 10px;
-    overflow: hidden;
-}
-.sa-bd-card.open {
-    border-color: var(--sa-color-accent);
-}
+/* The card's surface, open border, head padding, chevron and body now come
+ * from `AdminAccordion` — twelve declarations that were this page's fourth
+ * opinion on what an accordion looks like. What is left below is what the
+ * BUNDLE row puts inside that header. */
 .sa-bd-card__head {
     display: flex;
-    gap: 12px;
+    gap: var(--sa-space-4);
     align-items: center;
-    padding: 12px 14px;
-    cursor: pointer;
-}
-.sa-bd-card__mark {
-    width: 34px;
-    height: 34px;
-    border-radius: 8px;
-    background: var(--sa-color-accent-surface-strong);
-    color: var(--sa-color-accent-strong);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
 }
 .sa-bd-card__titlewrap {
     flex: 1;
@@ -737,18 +719,6 @@ const classifyDiff = computed(() => props.classifyDiff);
     font-size: var(--sa-text-sm);
     color: var(--sa-color-fg-muted);
 }
-.sa-bd-card__chev {
-    transition: transform 0.15s;
-    color: var(--sa-color-fg-subtle);
-}
-.sa-bd-card__chev.open {
-    transform: rotate(90deg);
-}
-.sa-bd-card__body {
-    border-top: 1px solid var(--sa-color-border);
-    padding: 14px;
-    background: var(--sa-color-bg-sunken);
-}
 .sa-bd-grid {
     display: grid;
     grid-template-columns: minmax(280px, 360px) 1fr;

package/src/pages-standard/MarketingCatalogPage.vue

@@ -1724,8 +1724,13 @@ async function onLocaleChange(loc: string): Promise<void> {
         color 0.12s;
 }
 .sa-marketing-tf-chip em {
+    /* No colour of its own — the mono face and the smaller step already set it
+     * apart from the chip's label, and a colour here does not follow the chip.
+     * `--sa-color-fg-subtle` stayed put when :hover moved the chip's surface to
+     * a 22 % accent tint, which measured 2.92:1 in the dark theme: a foreground
+     * declared without the background it will end up on is a pair nothing can
+     * check, and this one was wrong in exactly the state nobody screenshots. */
     font-style: normal;
-    color: var(--sa-color-fg-subtle);
     font: 500 var(--sa-text-xs) var(--sa-font-mono);
 }
 .sa-marketing-tf-chip:hover:not(:disabled) {

package/src/pages-standard/bundles-page/BundleAccordionList.vue

@@ -1,44 +1,41 @@
 <template>
     <div class="sa-bundles__list">
-        <div
+        <AdminAccordion
             v-for="bundle in filteredBundles"
             :key="bundle.id"
             class="sa-bd-card"
-            :class="{ open: openKey === bundle.id }"
+            :open="openKey === bundle.id"
+            @update:open="emit('toggle', bundle)"
         >
-            <div class="sa-bd-card__head" @click="emit('toggle', bundle)">
-                <div class="sa-bd-card__mark"><q-icon name="inventory_2" size="18px" /></div>
-                <div class="sa-bd-card__titlewrap">
-                    <div class="sa-bd-card__titlerow">
-                        <span class="sa-bd-card__key">{{ bundle.bundleKey }}</span>
-                        <span
-                            class="sa-bundle-chip"
-                            :class="`sa-bundle-chip--${statusClass(bundle)}`"
-                            :title="statusTooltip(bundle)"
-                        >
-                            {{ statusLabel(bundle) }}
-                        </span>
-                        <span
-                            v-if="i18nLocaleCount(bundle) > 0"
-                            class="sa-bundle-chip sa-bundle-chip--info"
-                        >
-                            {{ translationCount(bundle) }}
-                        </span>
+            <template #mark><q-icon name="inventory_2" size="18px" /></template>
+
+            <template #header>
+                <div class="sa-bd-card__head">
+                    <div class="sa-bd-card__titlewrap">
+                        <div class="sa-bd-card__titlerow">
+                            <span class="sa-bd-card__key">{{ bundle.bundleKey }}</span>
+                            <span
+                                class="sa-bundle-chip"
+                                :class="`sa-bundle-chip--${statusClass(bundle)}`"
+                                :title="statusTooltip(bundle)"
+                            >
+                                {{ statusLabel(bundle) }}
+                            </span>
+                            <span
+                                v-if="i18nLocaleCount(bundle) > 0"
+                                class="sa-bundle-chip sa-bundle-chip--info"
+                            >
+                                {{ translationCount(bundle) }}
+                            </span>
+                        </div>
+                        <div class="sa-bd-card__name">{{ bundle.label }}</div>
+                        <div class="sa-bd-card__desc">{{ bundle.description || '—' }}</div>
                     </div>
-                    <div class="sa-bd-card__name">{{ bundle.label }}</div>
-                    <div class="sa-bd-card__desc">{{ bundle.description || '—' }}</div>
                 </div>
-                <q-icon
-                    name="chevron_right"
-                    class="sa-bd-card__chev"
-                    :class="{ open: openKey === bundle.id }"
-                />
-            </div>
+            </template>
 
-            <div v-if="openKey === bundle.id" class="sa-bd-card__body">
-                <slot name="detail" :bundle="bundle" />
-            </div>
-        </div>
+            <slot name="detail" :bundle="bundle" />
+        </AdminAccordion>
 
         <div v-if="bundlesTotal > 0 && filteredBundles.length === 0" class="sa-bd-empty-row">
             {{ msg.list.emptyNoMatch }}
@@ -48,6 +45,7 @@
 
 <script setup lang="ts">
 import type { BundleRow } from '@saasicat/types';
+import AdminAccordion from '../../components/admin-page/AdminAccordion.vue';
 import {
     bundleStatusMeta,
     type BundleAggregateStatus,

package/src/pages-standard/discovery-page/DiscoveryFeatureCard.vue

@@ -1,71 +1,79 @@
 <template>
-    <div class="sa-fc" :class="{ expanded }">
-        <div class="sa-fc__head" @click="emit('toggle')">
-            <q-icon :name="iconValue || 'help_outline'" size="22px" class="sa-fc__icon" />
-            <div class="sa-fc__main">
-                <div class="sa-fc__titlerow">
-                    <code class="sa-fc__key">{{ feature.featureKey }}</code>
-                    <span class="sa-fc__label">{{ labelValue || feature.featureKey }}</span>
-                    <span v-if="newCapsCount > 0" class="sa-fc__flag sa-fc__flag--new">
-                        {{ newCapsLabel }}
-                    </span>
-                    <span v-if="deprecatedCapsCount > 0" class="sa-fc__flag sa-fc__flag--dep">
-                        {{ deprecatedCapsLabel }}
-                    </span>
-                    <span
-                        v-if="feature.successorKey"
-                        class="sa-fc__flag sa-fc__flag--succ"
-                        :title="replacedByLabel"
-                    >
-                        {{ replacedByLabel }}
-                    </span>
+    <AdminAccordion class="sa-fc" :open="expanded" @update:open="emit('toggle')">
+        <template #mark><q-icon :name="iconValue || 'help_outline'" size="18px" /></template>
+
+        <template #header>
+            <div class="sa-fc__head">
+                <div class="sa-fc__main">
+                    <div class="sa-fc__titlerow">
+                        <code class="sa-fc__key">{{ feature.featureKey }}</code>
+                        <span class="sa-fc__label">{{ labelValue || feature.featureKey }}</span>
+                        <span v-if="newCapsCount > 0" class="sa-fc__flag sa-fc__flag--new">
+                            {{ newCapsLabel }}
+                        </span>
+                        <span v-if="deprecatedCapsCount > 0" class="sa-fc__flag sa-fc__flag--dep">
+                            {{ deprecatedCapsLabel }}
+                        </span>
+                        <span
+                            v-if="feature.successorKey"
+                            class="sa-fc__flag sa-fc__flag--succ"
+                            :title="replacedByLabel"
+                        >
+                            {{ replacedByLabel }}
+                        </span>
+                        <span
+                            v-if="feature.replaces.length"
+                            class="sa-fc__flag sa-fc__flag--repl"
+                            :title="replacesLabel"
+                        >
+                            {{ replacesLabel }}
+                        </span>
+                    </div>
+                    <div class="sa-fc__sub">
+                        <template v-if="owners.length">
+                            <span class="sa-muted">{{ msg.owner }}</span>
+                            {{ owners.join(', ') }}
+                            <span class="sa-fc__dot">·</span>
+                        </template>
+                        {{ capabilities.length }}
+                        {{
+                            capabilities.length === 1
+                                ? msg.feature.capabilityOne
+                                : msg.feature.capabilityMany
+                        }}
+                        <template v-if="tierValue">
+                            <span class="sa-fc__dot">·</span>
+                            <span class="sa-fc__tier">{{ tierValue }}</span>
+                        </template>
+                    </div>
+                </div>
+
+                <div class="sa-fc__coverage">
                     <span
-                        v-if="feature.replaces.length"
-                        class="sa-fc__flag sa-fc__flag--repl"
-                        :title="replacesLabel"
+                        v-for="lng in targetLocales"
+                        :key="lng"
+                        class="sa-cov-pill"
+                        :class="coverageClass(coverage(lng))"
                     >
-                        {{ replacesLabel }}
+                        <span>{{ localeShort(lng) }}</span>
+                        <span>{{ coveragePct(coverage(lng)) }}%</span>
                     </span>
                 </div>
-                <div class="sa-fc__sub">
-                    <template v-if="owners.length">
-                        <span class="sa-muted">{{ msg.owner }}</span>
-                        {{ owners.join(', ') }}
-                        <span class="sa-fc__dot">·</span>
-                    </template>
-                    {{ capabilities.length }}
-                    {{
-                        capabilities.length === 1
-                            ? msg.feature.capabilityOne
-                            : msg.feature.capabilityMany
-                    }}
-                    <template v-if="tierValue">
-                        <span class="sa-fc__dot">·</span>
-                        <span class="sa-fc__tier">{{ tierValue }}</span>
-                    </template>
-                </div>
-            </div>
-
-            <div class="sa-fc__coverage">
-                <span
-                    v-for="lng in targetLocales"
-                    :key="lng"
-                    class="sa-cov-pill"
-                    :class="coverageClass(coverage(lng))"
-                >
-                    <span>{{ localeShort(lng) }}</span>
-                    <span>{{ coveragePct(coverage(lng)) }}%</span>
-                </span>
             </div>
+        </template>
 
+        <!-- Outside the trigger, not merely `@click.stop` inside it. The old
+             head was a `<div @click>` with this control nested in it, and the
+             only thing keeping a status change from also toggling the card was
+             a `.stop` somebody remembered. Structure beats memory. -->
+        <template #header-actions>
             <DiscoveryStatusControl
                 :status="feature.discoveryStatus"
                 @set-status="(target) => emit('review', feature.featureKey, target)"
             />
-            <q-icon name="chevron_right" class="sa-fc__chev" :class="{ open: expanded }" />
-        </div>
+        </template>
 
-        <div v-if="expanded" class="sa-fc__body">
+        <div class="sa-fc__body">
             <div v-if="feature.discoveryStatus === 'outdated'" class="sa-fc__banner warn">
                 <q-icon name="warning" size="16px" />
                 <span>
@@ -140,7 +148,7 @@
                 "
             />
         </div>
-    </div>
+    </AdminAccordion>
 </template>
 
 <script setup lang="ts">
@@ -152,6 +160,7 @@ import type {
     FeatureCatalogEntryRow,
     UpdateCatalogEntryBaseData,
 } from '@saasicat/types';
+import AdminAccordion from '../../components/admin-page/AdminAccordion.vue';
 import CatalogEntryTransPanel from './CatalogEntryTransPanel.vue';
 import DiscoveryCapList from './DiscoveryCapList.vue';
 import DiscoveryStatusControl from './DiscoveryStatusControl.vue';
@@ -268,26 +277,16 @@ function coverage(locale: string): number {
 </script>
 
 <style scoped>
-.sa-fc {
-    border: 1px solid var(--sa-color-border);
-    border-radius: 10px;
-    background: var(--sa-color-bg-surface);
-    overflow: hidden;
-}
-.sa-fc.expanded {
-    border-color: var(--sa-color-scheduled-border);
-    box-shadow: 0 1px 3px var(--sa-shadow-tint-2);
-}
+/* Surface, radius, open border, head padding, chevron and body come from
+ * `AdminAccordion`. What is left is what a FEATURE row puts in that header.
+ *
+ * These seven rules were byte-identical to `DiscoveryQuotaCard`'s after a
+ * prefix rename — jscpd could not see it, because `minTokens: 50` is larger
+ * than any single rule here. The duplication was real and below the threshold. */
 .sa-fc__head {
     display: flex;
     align-items: center;
-    gap: 12px;
-    padding: 10px 12px;
-    cursor: pointer;
-}
-.sa-fc__icon {
-    color: var(--sa-color-fg-secondary);
-    flex-shrink: 0;
+    gap: var(--sa-space-4);
 }
 .sa-fc__main {
     flex: 1;
@@ -355,18 +354,6 @@ function coverage(locale: string): number {
     gap: 6px;
     flex-shrink: 0;
 }
-.sa-fc__chev {
-    color: var(--sa-color-fg-subtle);
-    transition: transform 0.15s;
-}
-.sa-fc__chev.open {
-    transform: rotate(90deg);
-}
-.sa-fc__body {
-    border-top: 1px solid var(--sa-color-border-soft);
-    padding: 12px;
-    background: var(--sa-color-bg-sunken);
-}
 .sa-fc__banner {
     display: flex;
     align-items: center;

package/src/pages-standard/discovery-page/DiscoveryQuotaCard.vue

@@ -1,62 +1,76 @@
 <template>
-    <div class="sa-qc" :class="{ expanded, warn: !quota.usageProvider }">
-        <div class="sa-qc__head" @click="emit('toggle')">
-            <q-icon
-                :name="quota.usageProvider ? 'inventory_2' : 'error'"
-                :color="quota.usageProvider ? 'primary' : 'negative'"
-                size="20px"
-                class="sa-qc__icon"
-            />
-            <div class="sa-qc__main">
-                <div class="sa-qc__titlerow">
-                    <span class="sa-qc__label">{{ labelValue || quota.quotaKey }}</span>
-                    <code class="sa-qc__key">{{ quota.quotaKey }}</code>
-                    <span class="sa-chip">{{ quota.enforcementMode }}</span>
-                    <span
-                        v-if="quota.successorKey"
-                        class="sa-qc__flag sa-qc__flag--succ"
-                        :title="replacedByLabel"
-                    >
-                        {{ replacedByLabel }}
-                    </span>
+    <AdminAccordion
+        class="sa-qc"
+        :class="{ warn: !quota.usageProvider }"
+        :open="expanded"
+        :mark-tone="quota.usageProvider ? 'accent' : 'negative'"
+        @update:open="emit('toggle')"
+    >
+        <!-- The glyph already says it; the tone lets the badge say it too. The
+             `:color` this replaces was a Quasar PALETTE name, which reaches past
+             the role layer — `negative` there is Quasar's, not the theme's. -->
+        <template #mark>
+            <q-icon :name="quota.usageProvider ? 'inventory_2' : 'error'" size="18px" />
+        </template>
+
+        <template #header>
+            <div class="sa-qc__head">
+                <div class="sa-qc__main">
+                    <div class="sa-qc__titlerow">
+                        <span class="sa-qc__label">{{ labelValue || quota.quotaKey }}</span>
+                        <code class="sa-qc__key">{{ quota.quotaKey }}</code>
+                        <span class="sa-chip">{{ quota.enforcementMode }}</span>
+                        <span
+                            v-if="quota.successorKey"
+                            class="sa-qc__flag sa-qc__flag--succ"
+                            :title="replacedByLabel"
+                        >
+                            {{ replacedByLabel }}
+                        </span>
+                        <span
+                            v-if="quota.replaces.length"
+                            class="sa-qc__flag sa-qc__flag--repl"
+                            :title="replacesLabel"
+                        >
+                            {{ replacesLabel }}
+                        </span>
+                    </div>
+                    <div class="sa-qc__sub">
+                        {{ msg.unit }} <code>{{ quota.unit }}</code> · {{ msg.quota.usageProvider }}
+                        <code v-if="quota.usageProvider">{{ quota.usageProvider }}</code>
+                        <span v-else class="sa-qc__missing">{{
+                            msg.quota.usageProviderMissing
+                        }}</span>
+                    </div>
+                    <div v-if="!quota.usageProvider" class="sa-qc__warning">
+                        {{ msg.quota.noUsageProviderWarning }}
+                    </div>
+                </div>
+
+                <div class="sa-qc__coverage">
                     <span
-                        v-if="quota.replaces.length"
-                        class="sa-qc__flag sa-qc__flag--repl"
-                        :title="replacesLabel"
+                        v-for="lng in targetLocales"
+                        :key="lng"
+                        class="sa-cov-pill"
+                        :class="coverageClass(coverage(lng))"
                     >
-                        {{ replacesLabel }}
+                        <span>{{ localeShort(lng) }}</span>
+                        <span>{{ coveragePct(coverage(lng)) }}%</span>
                     </span>
                 </div>
-                <div class="sa-qc__sub">
-                    {{ msg.unit }} <code>{{ quota.unit }}</code> · {{ msg.quota.usageProvider }}
-                    <code v-if="quota.usageProvider">{{ quota.usageProvider }}</code>
-                    <span v-else class="sa-qc__missing">{{ msg.quota.usageProviderMissing }}</span>
-                </div>
-                <div v-if="!quota.usageProvider" class="sa-qc__warning">
-                    {{ msg.quota.noUsageProviderWarning }}
-                </div>
-            </div>
-
-            <div class="sa-qc__coverage">
-                <span
-                    v-for="lng in targetLocales"
-                    :key="lng"
-                    class="sa-cov-pill"
-                    :class="coverageClass(coverage(lng))"
-                >
-                    <span>{{ localeShort(lng) }}</span>
-                    <span>{{ coveragePct(coverage(lng)) }}%</span>
-                </span>
             </div>
+        </template>
 
+        <!-- See DiscoveryFeatureCard: outside the trigger, not `@click.stop`
+             inside it. -->
+        <template #header-actions>
             <DiscoveryStatusControl
                 :status="quota.discoveryStatus"
                 @set-status="(target) => emit('review', quota.quotaKey, target)"
             />
-            <q-icon name="chevron_right" class="sa-qc__chev" :class="{ open: expanded }" />
-        </div>
+        </template>
 
-        <div v-if="expanded" class="sa-qc__body">
+        <div class="sa-qc__body">
             <div v-if="quota.discoveryStatus === 'outdated'" class="sa-qc__banner">
                 <q-icon name="warning" size="16px" />
                 <span>
@@ -74,7 +88,7 @@
                 "
             />
         </div>
-    </div>
+    </AdminAccordion>
 </template>
 
 <script setup lang="ts">
@@ -85,6 +99,7 @@ import type {
     QuotaCatalogEntryRow,
     UpdateCatalogEntryBaseData,
 } from '@saasicat/types';
+import AdminAccordion from '../../components/admin-page/AdminAccordion.vue';
 import CatalogEntryTransPanel from './CatalogEntryTransPanel.vue';
 import DiscoveryStatusControl from './DiscoveryStatusControl.vue';
 import { formatMessage } from '../../client/i18n/format.js';
@@ -153,31 +168,22 @@ function coverage(locale: string): number {
 </script>
 
 <style scoped>
-.sa-qc {
-    border: 1px solid var(--sa-color-border);
-    border-radius: 10px;
-    background: var(--sa-color-bg-surface);
-    overflow: hidden;
-}
+/* Surface, radius, open border, head padding, chevron and body come from
+ * `AdminAccordion`. What is left is what a QUOTA row puts in that header — and
+ * `warn`, which is this card's own idea and not the accordion's.
+ *
+ * Two values changed by moving: the open border was
+ * `--sa-color-scheduled-border` plus a shadow here and `--sa-color-accent`
+ * everywhere else, and the head padding was 10/12 against 12/14 next door.
+ * Those differences were the finding, not the design. */
 .sa-qc.warn {
     border-color: var(--sa-color-negative-border);
-}
-.sa-qc.expanded {
-    border-color: var(--sa-color-scheduled-border);
-    box-shadow: 0 1px 3px var(--sa-shadow-tint-2);
+    background: var(--sa-color-negative-surface);
 }
 .sa-qc__head {
     display: flex;
     align-items: center;
-    gap: 12px;
-    padding: 10px 12px;
-    cursor: pointer;
-}
-.sa-qc.warn .sa-qc__head {
-    background: var(--sa-color-negative-surface);
-}
-.sa-qc__icon {
-    flex-shrink: 0;
+    gap: var(--sa-space-4);
 }
 .sa-qc__main {
     flex: 1;
@@ -230,18 +236,6 @@ function coverage(locale: string): number {
     gap: 6px;
     flex-shrink: 0;
 }
-.sa-qc__chev {
-    color: var(--sa-color-fg-subtle);
-    transition: transform 0.15s;
-}
-.sa-qc__chev.open {
-    transform: rotate(90deg);
-}
-.sa-qc__body {
-    border-top: 1px solid var(--sa-color-border-soft);
-    padding: 12px;
-    background: var(--sa-color-bg-sunken);
-}
 .sa-qc__banner {
     display: flex;
     align-items: center;

package/src/pages-standard/marketing-catalog/MarketingCatalogPreview.vue

@@ -1,9 +1,23 @@
 <template>
     <div class="sa-marketing-window">
         <div class="sa-marketing-chrome">
-            <span class="sa-marketing-chrome-dot" style="background: #ef4444" />
-            <span class="sa-marketing-chrome-dot" style="background: #f59e0b" />
-            <span class="sa-marketing-chrome-dot" style="background: #10b981" />
+            <!-- The window controls of the browser this mock-up draws. Their hue
+                 is fixed by what they depict rather than by what they mean, and
+                 the `-strong` rungs are exactly that hue — the three replaced
+                 the same three literals byte for byte. Only the amber differs
+                 between themes, and it lifts one rung in the dark one. -->
+            <span
+                class="sa-marketing-chrome-dot"
+                style="background: var(--sa-color-negative-strong)"
+            />
+            <span
+                class="sa-marketing-chrome-dot"
+                style="background: var(--sa-color-warning-strong)"
+            />
+            <span
+                class="sa-marketing-chrome-dot"
+                style="background: var(--sa-color-positive-strong)"
+            />
             <div class="sa-marketing-chrome-url">{{ previewUrl }}</div>
         </div>
         <div class="sa-marketing-canvas">

package/src/ui/theme/components/accordion.css

@@ -0,0 +1,118 @@
+/* Accordion — a header that opens a body (see AdminAccordion).
+ *
+ * Every value here was one of several. The survey that led to this file found
+ * three header paddings across the package (0, 10/12, 12/14), three body
+ * paddings (12, 14, 18/20/22), two radii (8 and 10), two colours for the open
+ * border (`accent` and `scheduled-border`), two transition durations, and hover
+ * feedback on one of six surfaces that all set `cursor: pointer`.
+ *
+ * The values below are the scale's, not the average of the six: a rung exists
+ * for each, so a literal here would be a fourth opinion rather than a decision.
+ */
+
+.sa-accordion {
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
+    border-radius: var(--sa-radius-head);
+    overflow: hidden;
+}
+
+/* The open card names itself with the accent rather than with a tone: which
+ * row is open is a position, not a status, and a status colour here would
+ * compete with the chips the header carries. */
+.sa-accordion--open {
+    border-color: var(--sa-color-accent);
+}
+
+.sa-accordion__head {
+    display: flex;
+    align-items: stretch;
+}
+
+/* The trigger fills the head so the whole row is the target — the affordance
+ * the `<div @click>` versions had, without giving up the button. */
+.sa-accordion__trigger {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--sa-space-4);
+    padding: var(--sa-space-4) var(--sa-space-5);
+    background: none;
+    border: 0;
+    font: inherit;
+    color: inherit;
+    text-align: left;
+    cursor: pointer;
+}
+
+/* Hover feedback, which five of the six surfaces promised with `cursor` and
+ * only one delivered. */
+.sa-accordion__trigger:hover:not(:disabled) {
+    background: var(--sa-color-bg-sunken);
+}
+.sa-accordion__trigger:disabled {
+    cursor: not-allowed;
+}
+
+/* The badge that identifies the row.
+ *
+ * Three surfaces drew this three ways — a 34px accent-tinted square, a bare
+ * 22px glyph, and a bare 20px glyph coloured through a Quasar palette prop — so
+ * the same kind of row did not look like the same kind of row from one page to
+ * the next. The frame is the component's; only the glyph is the page's.
+ *
+ * Square-ish rather than round: a circle here would read as an avatar, and none
+ * of these rows is about a person. */
+.sa-accordion__mark {
+    flex: 0 0 auto;
+    width: 34px;
+    height: 34px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--sa-radius-field);
+    background: var(--sa-color-accent-surface-strong);
+    color: var(--sa-color-accent-strong);
+}
+
+/* Only for a row whose state the badge itself should report. The size, radius
+ * and position do not move with it — that is what keeps it the same badge. */
+.sa-accordion__mark--negative {
+    background: var(--sa-color-negative-surface-strong);
+    color: var(--sa-color-negative-fg);
+}
+
+.sa-accordion__label {
+    flex: 1;
+    min-width: 0;
+}
+
+/* Points right when closed, down when open. Not `transform: rotate(90deg)` on a
+ * `chevron_down`: the resting state is the one a reader sees most, and a glyph
+ * that means "there is more this way" is the honest one to rest on. */
+.sa-accordion__chev {
+    flex: 0 0 auto;
+    color: var(--sa-color-fg-subtle);
+    transition: transform 0.15s;
+}
+.sa-accordion--open .sa-accordion__chev {
+    transform: rotate(90deg);
+}
+
+/* Outside the trigger, so a control here does not toggle the row. Padded on
+ * its own rather than by the trigger, or the two would share a hover surface
+ * and the row would look pressed while the pointer is on a button that does
+ * something else. */
+.sa-accordion__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--sa-space-3);
+    padding-right: var(--sa-space-5);
+}
+
+.sa-accordion__body {
+    padding: var(--sa-space-5);
+    border-top: 1px solid var(--sa-color-border);
+    background: var(--sa-color-bg-sunken);
+}

package/src/ui/theme/index.css

@@ -40,3 +40,4 @@
 @import './components/card.css';
 @import './components/paginator.css';
 @import './components/table.css';
+@import './components/accordion.css';

package/src/ui/theme/tokens.semantic.dark.css

@@ -120,9 +120,11 @@ body.body--dark {
     --sa-color-feature-fg: var(--sa-violet-200);
     --sa-color-feature-surface: color-mix(in srgb, var(--sa-violet-500) 16%, transparent);
     --sa-color-quota: var(--sa-sky-500);
+    --sa-color-quota-fg: var(--sa-sky-200);
     --sa-color-quota-surface: color-mix(in srgb, var(--sa-sky-500) 16%, transparent);
     --sa-color-quota-border: color-mix(in srgb, var(--sa-sky-500) 36%, transparent);
     --sa-color-bundle: var(--sa-amber-500);
+    --sa-color-bundle-fg: var(--sa-amber-200);
     --sa-color-bundle-surface: color-mix(in srgb, var(--sa-amber-500) 16%, transparent);
 
     /* The identity ramp, one rung lighter throughout — see the light file for

package/src/ui/theme/tokens.semantic.light.css

@@ -141,16 +141,25 @@
     --sa-color-scheduled-surface-strong: var(--sa-indigo-100);
     --sa-color-scheduled-border: var(--sa-indigo-200);
 
-    /* ── Catalogue entities. Not statuses: these two say WHAT a row is, and
+    /* ── Catalogue entities. Not statuses: these three say WHAT a row is, and
      * the plan editor, the matrix, the review and the discovery page all need
-     * to agree, or the same dot means two things on two screens. ────────── */
+     * to agree, or the same dot means two things on two screens.
+     *
+     * Each one has the same three slots a status tone has: the colour itself,
+     * a tinted SURFACE, and an `-fg` that is readable on that surface. Only
+     * `feature` had the third, and the two that were missing are why a diff
+     * marker painted white on `--sa-sky-500` (2.77:1) and on `--sa-amber-500`
+     * (2.15:1): with no role to point at, the panel reached past the layer for
+     * the primitive and wrote it into the template. ───────────────────────── */
     --sa-color-feature: var(--sa-violet-500);
     --sa-color-feature-fg: var(--sa-violet-700);
     --sa-color-feature-surface: var(--sa-violet-50);
     --sa-color-quota: var(--sa-sky-500);
+    --sa-color-quota-fg: var(--sa-sky-700);
     --sa-color-quota-surface: var(--sa-sky-50);
     --sa-color-quota-border: var(--sa-sky-200);
     --sa-color-bundle: var(--sa-amber-500);
+    --sa-color-bundle-fg: var(--sa-amber-700);
     --sa-color-bundle-surface: var(--sa-amber-100);
 
     /* ── Identity. A CATEGORICAL ramp: the only job of these seven is to be