@saasicat/ui-vue 0.24.2 → 0.26.0

package/src/pages-standard/SuperAdminSetupWizard.vue

@@ -3,11 +3,12 @@
         <div class="sa-setup-card">
             <div class="sa-setup-head">
                 <div class="sa-setup-badge">{{ iconText }}</div>
-                <div>
+                <div class="sa-setup-headings">
                     <h1 class="sa-setup-title">{{ msg.setup.title }}</h1>
                     <div class="sa-setup-sub">{{ subtitleText }}</div>
                 </div>
                 <LocaleSwitcher class="sa-setup-locale" />
+                <ThemeSwitcher class="sa-setup-theme" />
             </div>
 
             <q-banner v-if="errorMessage" class="sa-setup-error" rounded>
@@ -162,6 +163,7 @@ import { HttpJsonError, postJson as httpPostJson } from '../client/http-json.js'
 import { formatMessage } from '../client/i18n/format.js';
 import { useSaMessages } from '../vue/use-super-admin-i18n.js';
 import LocaleSwitcher from '../components/LocaleSwitcher.vue';
+import ThemeSwitcher from '../components/ThemeSwitcher.vue';
 
 interface Props {
     /** Display name + badge abbreviation (override the app branding, e.g. from PublicBoot). */
@@ -174,6 +176,23 @@ const props = defineProps<Props>();
 // shown again — the freshly created SuperAdmin then signs in.
 const emit = defineEmits<{ done: [] }>();
 
+// sa-disclosure-exempt(uses `<details>`):
+// the platform's own disclosure, on the one screen that owns its own frame
+//
+// The `otpauth://` URI hides behind a `<details>`/`<summary>` above, and it
+// stays there. `AdminAccordion` exists because four of the eight surfaces it
+// replaced were a `<div>` with a click handler — no keyboard, nothing to
+// announce. `<details>` has none of that problem: it is the platform's own
+// disclosure, operable by keyboard, announced as one, and it needs no state
+// from the page at all.
+//
+// What is left is a consistency argument, and it points the other way here.
+// This wizard renders OUTSIDE `AdminLayout` — it is one of the screens the page
+// shell exempts, a centred card on a first run when no admin exists yet — and
+// the surface in question is a one-line "show me the URI" for someone whose
+// authenticator app could not read the QR code. An accordion card with a badge
+// frame, an accent open border and a sunken body would make it the loudest
+// element on the screen, to reveal one line of text.
 const msg = useSaMessages('shell');
 const brand = useSuperAdminBrand();
 const endpoints = useSuperAdminEndpoints();
@@ -297,14 +316,24 @@ async function submitConfirm(): Promise<void> {
     gap: 12px;
     margin-bottom: 20px;
 }
-.sa-setup-locale {
-    margin-left: auto;
+.sa-setup-locale,
+.sa-setup-theme {
     align-self: flex-start;
     color: var(--sa-color-fg-secondary);
 }
+/* One `auto` on the first of the pair moves both. */
+.sa-setup-locale {
+    margin-left: auto;
+}
 .sa-setup-badge {
     width: 44px;
     height: 44px;
+    /* Same reasoning as `.sa-login-logo` on the login card: the mark is a fixed
+       square, so it is the wrong flex item to take the row's shortfall from.
+       Here it was squeezed at every width, 1440 included — 35.61px in the
+       platform's own fixture, 33.56px in the example app — because the two
+       switchers made the row's content wider than the card outright. */
+    flex: none;
     border-radius: 10px;
     display: flex;
     align-items: center;
@@ -322,6 +351,11 @@ async function submitConfirm(): Promise<void> {
     font-size: var(--sa-text-xl);
     text-transform: uppercase;
 }
+/* The block that absorbs what the pinned badge no longer gives up — see
+   `.sa-login-brand__text`, which carries the same rule for the same reason. */
+.sa-setup-headings {
+    min-width: 0;
+}
 .sa-setup-title {
     margin: 0;
     font-weight: 800;

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;
@@ -340,9 +339,13 @@ function coverage(locale: string): number {
     color: var(--sa-color-fg-muted);
     margin-top: 1px;
 }
+/* `-subtle`, not `-disabled`. Nothing here is disabled: this is the quietest
+ * rung of readable text, and the disabled rung is not on that ladder — it read
+ * 1.48:1 on the card's own surface, which the contrast check only saw once a
+ * fixture rendered a feature row for the first time. */
 .sa-fc__dot {
     margin: 0 4px;
-    color: var(--sa-color-fg-disabled);
+    color: var(--sa-color-fg-subtle);
 }
 .sa-fc__tier {
     font-weight: 700;
@@ -355,18 +358,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;
@@ -403,11 +394,12 @@ function coverage(locale: string): number {
     color: var(--sa-color-fg-subtle);
     margin-bottom: 8px;
 }
+/* Same swap, same reason: "2 · read-only" sat at 1.42:1 on the sunken column. */
 .sa-fc__split-count {
     font-weight: 600;
     text-transform: none;
     letter-spacing: 0;
-    color: var(--sa-color-fg-disabled);
+    color: var(--sa-color-fg-subtle);
     margin-left: 6px;
 }
 .sa-fc__fields {

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;