@cat-factory/app 0.308.0 → 0.310.0

package/app/components/environments/EnvSetupStepper.vue

@@ -37,10 +37,10 @@ function stepLabel(key: string | undefined): string {
 
 <template>
   <div class="space-y-2" data-testid="env-setup-stepper">
-    <p v-if="total" class="text-[11px] font-medium text-muted" data-testid="env-setup-progress">
+    <p v-if="total" class="text-2xs font-medium text-muted" data-testid="env-setup-progress">
       {{ t('environmentWizard.progress', { index: index + 1, total }) }}
     </p>
-    <ol class="flex items-center gap-2 text-[11px]">
+    <ol class="flex items-center gap-2 text-2xs">
       <li
         v-for="(step, i) in steps"
         :key="step.entry"
@@ -48,7 +48,7 @@ function stepLabel(key: string | undefined): string {
         :data-testid="`env-setup-crumb-${step.entry}`"
       >
         <span
-          class="flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-semibold"
+          class="flex h-5 w-5 items-center justify-center rounded-full text-3xs font-semibold"
           :class="{
             'bg-primary text-inverted': i === index,
             'bg-app-success-600/70 text-highlighted': i < index,

package/app/components/environments/EnvironmentStatusPanel.vue

@@ -9,6 +9,7 @@ import {
   readStatusNote,
   showsProviderFailure,
 } from '~/components/environments/EnvironmentStatusPanel.logic'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{
   environment: RunEnvironment | null
@@ -106,11 +107,11 @@ const envInTransition = computed(
 
 <template>
   <section class="rounded-lg border border-default bg-default/60 p-3">
-    <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+    <SectionLabel as="h3" class="mb-2">
       {{ t('environments.title') }}
-    </h3>
+    </SectionLabel>
     <div v-if="environment" class="space-y-2">
-      <div class="flex items-center gap-2 text-[13px]">
+      <div class="flex items-center gap-2 text-sm">
         <UIcon
           :name="ENV_STATUS_META[environment.status].icon"
           class="h-3.5 w-3.5"
@@ -123,27 +124,28 @@ const envInTransition = computed(
           ENV_STATUS_META[environment.status].label
         }}</span>
       </div>
-      <a
+      <ULink
+        raw
         v-if="environment.url"
-        :href="environment.url"
+        :to="environment.url"
         target="_blank"
         rel="noopener"
-        class="inline-flex items-center gap-1.5 break-all text-[13px] text-app-info-300 hover:underline"
+        class="inline-flex items-center gap-1.5 break-all text-sm text-app-info-300 hover:underline"
       >
         <UIcon name="i-lucide-external-link" class="h-3.5 w-3.5 shrink-0" />
         {{ environment.url }}
-      </a>
-      <p v-if="environment.expiresAt" class="text-[11px] text-dimmed">
+      </ULink>
+      <p v-if="environment.expiresAt" class="text-2xs text-dimmed">
         {{ t('environments.expires', { date: d(new Date(environment.expiresAt), 'long') }) }}
       </p>
       <!-- The resolved provision type + engine recorded at provision time, so a run states
            exactly what was provisioned and how (the what/where ÷ how split). -->
       <dl v-if="provisionTypeLabel || engineLabel" class="flex flex-wrap gap-x-4 gap-y-0.5">
-        <div v-if="provisionTypeLabel" class="flex items-center gap-1 text-[11px]">
+        <div v-if="provisionTypeLabel" class="flex items-center gap-1 text-2xs">
           <dt class="text-dimmed">{{ t('environments.provisionTypeLabel') }}</dt>
           <dd class="text-toned">{{ provisionTypeLabel }}</dd>
         </div>
-        <div v-if="engineLabel" class="flex items-center gap-1 text-[11px]">
+        <div v-if="engineLabel" class="flex items-center gap-1 text-2xs">
           <dt class="text-dimmed">{{ t('environments.engineLabel') }}</dt>
           <dd class="text-toned">{{ engineLabel }}</dd>
         </div>
@@ -151,7 +153,7 @@ const envInTransition = computed(
       <!-- The verbatim provider error when the environment failed/expired. -->
       <pre
         v-if="failureShown"
-        class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap rounded border border-app-error-900/60 bg-app-error-950/40 p-1.5 text-[11px] text-app-error-200/90"
+        class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap rounded-sm border border-app-error-900/60 bg-app-error-950/40 p-1.5 text-2xs text-app-error-200/90"
         >{{ environment.lastError }}</pre>
       <!-- What the provider says it is still waiting on. Muted rather than alarming: an
            environment mid-rollout is healthy, and styling this like the error above would report
@@ -159,12 +161,12 @@ const envInTransition = computed(
            prose. -->
       <p
         v-if="statusNote"
-        class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words text-[11px] text-muted"
+        class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words text-2xs text-muted"
       >
         {{ t('environments.statusNote', { note: statusNote }) }}
       </p>
     </div>
-    <p v-else class="text-[12px] text-dimmed">
+    <p v-else class="text-xs text-dimmed">
       {{ degradedReason ?? t('environments.empty') }}
     </p>
   </section>

package/app/components/environments/steps/EnvPreflightStep.vue

@@ -51,21 +51,21 @@ const PREFLIGHT_COLOR: Record<'pass' | 'warn' | 'fail', 'success' | 'warning' |
 
     <p
       v-if="!store.recipe.prerequisites?.length"
-      class="text-[12px] text-dimmed"
+      class="text-xs text-dimmed"
       data-testid="env-setup-preflight-none"
     >
       {{ t('environmentWizard.preflight.none') }}
     </p>
     <p
       v-else-if="preflightsUnavailable"
-      class="text-[12px] text-app-warning-300/80"
+      class="text-xs text-app-warning-300/80"
       data-testid="env-setup-preflight-unavailable"
     >
       {{ t('environmentWizard.preflight.unavailable') }}
     </p>
     <p
       v-if="store.preflightError"
-      class="text-[12px] text-app-error-300/80"
+      class="text-xs text-app-error-300/80"
       data-testid="env-setup-preflight-error"
     >
       {{ store.preflightError }}
@@ -79,21 +79,21 @@ const PREFLIGHT_COLOR: Record<'pass' | 'warn' | 'fail', 'success' | 'warning' |
       <li
         v-for="r in store.preflightResults"
         :key="r.title"
-        class="rounded border border-default bg-default/40 p-2"
+        class="rounded-sm border border-default bg-default/40 p-2"
       >
         <div class="flex items-center gap-2">
           <UBadge :color="PREFLIGHT_COLOR[r.status]" variant="subtle" size="sm">
             {{ r.status }}
           </UBadge>
-          <span class="text-[12px] text-default">{{ r.title }}</span>
-          <span v-if="!r.required" class="ms-auto text-[10px] text-dimmed">
+          <span class="text-xs text-default">{{ r.title }}</span>
+          <span v-if="!r.required" class="ms-auto text-3xs text-dimmed">
             {{ t('environmentWizard.preflight.optional') }}
           </span>
         </div>
-        <p v-if="r.detail" class="mt-1 text-[11px] text-muted">{{ r.detail }}</p>
+        <p v-if="r.detail" class="mt-1 text-2xs text-muted">{{ r.detail }}</p>
         <pre
           v-if="r.status !== 'pass' && r.remediation"
-          class="mt-1 max-h-40 overflow-auto whitespace-pre-wrap rounded border border-app-warning-900/40 bg-app-warning-950/20 p-1.5 text-[11px] text-app-warning-200/90"
+          class="mt-1 max-h-40 overflow-auto whitespace-pre-wrap rounded-sm border border-app-warning-900/40 bg-app-warning-950/20 p-1.5 text-2xs text-app-warning-200/90"
           >{{ r.remediation }}</pre>
       </li>
     </ul>

package/app/components/environments/steps/EnvReviewStep.vue

@@ -14,6 +14,7 @@ import type {
 } from '@cat-factory/contracts'
 import JourneyStepNav from '~/components/environments/steps/JourneyStepNav.vue'
 import { useEnvironmentWizardTarget } from '~/modular/journeys/environmentSetup.frame'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{
   input: { frameId: string | null }
@@ -114,7 +115,7 @@ const canLeaveReview = computed(
     <div class="flex items-center justify-between gap-2">
       <div class="min-w-0">
         <p class="text-sm font-medium text-default">{{ store.targetFrame?.title }}</p>
-        <p class="text-[11px] text-dimmed">{{ t('environmentWizard.review.detectHint') }}</p>
+        <p class="text-2xs text-dimmed">{{ t('environmentWizard.review.detectHint') }}</p>
       </div>
       <UButton
         size="xs"
@@ -130,12 +131,12 @@ const canLeaveReview = computed(
       </UButton>
     </div>
 
-    <p v-if="!store.hasRepo" class="text-[12px] text-app-warning-300/80">
+    <p v-if="!store.hasRepo" class="text-xs text-app-warning-300/80">
       {{ t('environmentWizard.review.noRepo') }}
     </p>
     <p
       v-else-if="store.detectError"
-      class="text-[12px] text-app-error-300/80"
+      class="text-xs text-app-error-300/80"
       data-testid="env-setup-detect-error"
     >
       {{ t('environmentWizard.review.detectError') }}
@@ -149,7 +150,7 @@ const canLeaveReview = computed(
       >
         <p
           v-if="repoCliHint"
-          class="mb-2 flex items-start gap-1.5 text-[11px] text-primary"
+          class="mb-2 flex items-start gap-1.5 text-2xs text-primary"
           data-testid="env-setup-cli-nudge"
         >
           <UIcon name="i-lucide-lightbulb" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
@@ -157,10 +158,10 @@ const canLeaveReview = computed(
         </p>
         <div class="flex items-center justify-between gap-2">
           <div class="min-w-0">
-            <p class="text-[12px] font-medium text-toned">
+            <p class="text-xs font-medium text-toned">
               {{ t('environmentWizard.analysis.title') }}
             </p>
-            <p class="text-[11px] text-dimmed">{{ t('environmentWizard.analysis.hint') }}</p>
+            <p class="text-2xs text-dimmed">{{ t('environmentWizard.analysis.hint') }}</p>
           </div>
           <UButton
             size="xs"
@@ -177,14 +178,14 @@ const canLeaveReview = computed(
         </div>
         <p
           v-if="!store.canAnalyze"
-          class="mt-2 text-[11px] text-dimmed"
+          class="mt-2 text-2xs text-dimmed"
           data-testid="env-setup-analysis-unavailable"
         >
           {{ t('environmentWizard.analysis.unavailable') }}
         </p>
         <p
           v-else-if="store.analysisStatus === 'failed'"
-          class="mt-2 text-[11px] text-app-error-300/80"
+          class="mt-2 text-2xs text-app-error-300/80"
         >
           {{ t('environmentWizard.analysis.failed') }}
         </p>
@@ -193,7 +194,7 @@ const canLeaveReview = computed(
           class="mt-2 space-y-2"
           data-testid="env-setup-analysis-ready"
         >
-          <p v-if="store.merged?.summary" class="text-[11px] leading-snug text-muted">
+          <p v-if="store.merged?.summary" class="text-2xs leading-snug text-muted">
             {{ store.merged.summary }}
           </p>
           <UButton
@@ -211,9 +212,9 @@ const canLeaveReview = computed(
 
       <!-- per-field provenance -->
       <div v-if="store.merged?.fields.length" class="space-y-1.5">
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="p">
           {{ t('environmentWizard.review.provenanceTitle') }}
-        </p>
+        </SectionLabel>
         <div class="flex flex-wrap gap-1.5">
           <UBadge
             v-for="f in store.merged.fields"
@@ -261,9 +262,9 @@ const canLeaveReview = computed(
 
       <!-- compose file layering -->
       <div v-if="composeFileCandidates.length" class="space-y-1.5">
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="p">
           {{ t('environmentWizard.review.composeFiles') }}
-        </p>
+        </SectionLabel>
         <div class="flex flex-wrap gap-1.5">
           <UButton
             v-for="c in composeFileCandidates"
@@ -275,16 +276,16 @@ const canLeaveReview = computed(
             :data-testid="`env-setup-file-${c.name}`"
             @click="store.toggleComposeFile(c.path)"
           >
-            {{ c.name }}<span v-if="c.os" class="ms-1 text-[9px] opacity-70">{{ c.os }}</span>
+            {{ c.name }}<span v-if="c.os" class="ms-1 text-3xs opacity-70">{{ c.os }}</span>
           </UButton>
         </div>
       </div>
 
       <!-- compose profiles -->
       <div v-if="profileCandidates.length" class="space-y-1.5">
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="p">
           {{ t('environmentWizard.review.profiles') }}
-        </p>
+        </SectionLabel>
         <div class="flex flex-wrap gap-1.5">
           <UButton
             v-for="c in profileCandidates"
@@ -303,16 +304,16 @@ const canLeaveReview = computed(
 
       <!-- seed dumps -->
       <div v-if="seedDumpCandidates.length" class="space-y-1.5">
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="p">
           {{ t('environmentWizard.review.seedDumps') }}
-        </p>
+        </SectionLabel>
         <div class="space-y-1">
           <div
             v-for="c in seedDumpCandidates"
             :key="c.path"
-            class="flex items-center justify-between gap-2 rounded border border-default bg-default/40 px-2 py-1"
+            class="flex items-center justify-between gap-2 rounded-sm border border-default bg-default/40 px-2 py-1"
           >
-            <span class="truncate text-[11px] text-toned">{{ c.path }}</span>
+            <span class="truncate text-2xs text-toned">{{ c.path }}</span>
             <UButton
               size="xs"
               :color="seedAdded(c.path) ? 'success' : 'neutral'"
@@ -348,12 +349,12 @@ const canLeaveReview = computed(
           <UTextarea
             v-model="rawText"
             :rows="10"
-            class="w-full font-mono text-[11px]"
+            class="w-full font-mono text-2xs"
             data-testid="env-setup-raw-text"
           />
           <p
             v-if="rawError"
-            class="text-[11px] text-app-error-300/80"
+            class="text-2xs text-app-error-300/80"
             data-testid="env-setup-raw-error"
           >
             {{ rawError }}

package/app/components/environments/steps/EnvSaveStep.vue

@@ -31,7 +31,7 @@ useEnvironmentWizardTarget(() => props.input.frameId)
       <UInput v-model="store.handlerLabel" class="w-full" data-testid="env-setup-handler-label" />
     </UFormField>
 
-    <div class="rounded-md border border-default bg-default/40 p-3 text-[12px] text-toned">
+    <div class="rounded-md border border-default bg-default/40 p-3 text-xs text-toned">
       <p>
         {{
           t('environmentWizard.save.summary', {
@@ -44,7 +44,7 @@ useEnvironmentWizardTarget(() => props.input.frameId)
 
     <p
       v-if="store.saveError"
-      class="text-[12px] text-app-error-300/80"
+      class="text-xs text-app-error-300/80"
       data-testid="env-setup-save-error"
     >
       {{ store.saveError }}
@@ -66,7 +66,7 @@ useEnvironmentWizardTarget(() => props.input.frameId)
     <!-- saved: confirmation + optional trial provision -->
     <template v-else>
       <div
-        class="flex items-center gap-2 rounded-md border border-app-success-800/50 bg-app-success-950/30 p-2 text-[12px] text-app-success-200"
+        class="flex items-center gap-2 rounded-md border border-app-success-800/50 bg-app-success-950/30 p-2 text-xs text-app-success-200"
         data-testid="env-setup-saved"
       >
         <UIcon name="i-lucide-check-circle" class="h-4 w-4" />
@@ -74,7 +74,7 @@ useEnvironmentWizardTarget(() => props.input.frameId)
       </div>
 
       <div class="flex items-center justify-between gap-2">
-        <p class="text-[11px] text-dimmed">{{ t('environmentWizard.trial.hint') }}</p>
+        <p class="text-2xs text-dimmed">{{ t('environmentWizard.trial.hint') }}</p>
         <UButton
           size="xs"
           variant="soft"
@@ -88,7 +88,7 @@ useEnvironmentWizardTarget(() => props.input.frameId)
           {{ t('environmentWizard.trial.run') }}
         </UButton>
       </div>
-      <p v-if="store.trialError" class="text-[11px] text-app-error-300/80">
+      <p v-if="store.trialError" class="text-2xs text-app-error-300/80">
         {{ store.trialError }}
       </p>
       <ProvisioningLogsDrawer v-if="store.trialStarted" subsystem="environment" />

package/app/components/focus/BlockFocusView.vue

@@ -6,6 +6,7 @@ import { pipelineAllowedForManualStart } from '~/utils/pipeline'
 import PipelineProgress from '~/components/pipeline/PipelineProgress.vue'
 import IconButton from '~/components/common/IconButton.vue'
 import { useInitiativePlanning } from '~/composables/useInitiativePlanning'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const pipelines = usePipelinesStore()
@@ -203,9 +204,9 @@ function openApprovalFor(approvalId: string) {
       >
         <div class="mb-4 flex items-center gap-2">
           <UIcon name="i-lucide-workflow" class="h-4 w-4 text-dimmed" />
-          <h2 class="text-sm font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h2">
             {{ instance ? instance.pipelineName : t('focus.noPipelineRunning') }}
-          </h2>
+          </SectionLabel>
         </div>
 
         <PipelineProgress
@@ -226,30 +227,30 @@ function openApprovalFor(approvalId: string) {
       <!-- side: details -->
       <aside class="space-y-4 overflow-auto rounded-2xl border border-default bg-default/60 p-5">
         <div>
-          <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel class="mb-1">
             {{ t('focus.description') }}
-          </div>
+          </SectionLabel>
           <p class="text-sm text-toned">{{ block.description }}</p>
         </div>
         <div v-if="instance">
-          <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel class="mb-1">
             {{ t('focus.overallProgress') }}
-          </div>
+          </SectionLabel>
           <UProgress :model-value="Math.round(block.progress * 100)" />
-          <div class="mt-1 text-[11px] text-muted">
+          <div class="mt-1 text-2xs text-muted">
             {{ n(block.progress, 'percent') }}
           </div>
         </div>
         <div>
-          <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel class="mb-1">
             {{ t('focus.dependencies') }}
-          </div>
+          </SectionLabel>
           <div v-if="deps.length" class="flex flex-wrap gap-1">
             <UBadge v-for="d in deps" :key="d.id" color="neutral" variant="subtle" size="sm">
               {{ d.title }}
             </UBadge>
           </div>
-          <div v-else class="text-[11px] text-dimmed">{{ t('focus.noDependencies') }}</div>
+          <div v-else class="text-2xs text-dimmed">{{ t('focus.noDependencies') }}</div>
         </div>
       </aside>
     </div>

package/app/components/followUp/FollowUpWindow.vue

@@ -162,7 +162,7 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
       >
         <UIcon :name="FOLLOW_UP_COMPANION_META.icon" class="h-8 w-8 opacity-40" />
         <p class="text-sm">{{ t('followUp.empty.title') }}</p>
-        <p class="max-w-sm text-[11px] text-dimmed">
+        <p class="max-w-sm text-2xs text-dimmed">
           {{ t('followUp.empty.hint') }}
         </p>
       </div>
@@ -170,7 +170,7 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
       <div v-else class="space-y-3">
         <p
           v-if="followUps.error"
-          class="rounded-md bg-app-error-500/10 px-3 py-2 text-[12px] text-app-error-300"
+          class="rounded-md bg-app-error-500/10 px-3 py-2 text-xs text-app-error-300"
         >
           {{ followUps.error }}
         </p>
@@ -189,31 +189,32 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
             />
             <div class="min-w-0 flex-1">
               <div class="flex items-center gap-2">
-                <h3 class="min-w-0 flex-1 truncate text-[13px] font-medium text-app-100">
+                <h3 class="min-w-0 flex-1 truncate text-sm font-medium text-app-100">
                   {{ item.title }}
                 </h3>
                 <UBadge :color="STATUS_META[item.status].badge" variant="subtle" size="sm">
                   {{ t(STATUS_LABEL_KEYS[item.status]) }}
                 </UBadge>
               </div>
-              <p v-if="item.detail" class="mt-1 whitespace-pre-wrap text-[12px] text-toned">
+              <p v-if="item.detail" class="mt-1 whitespace-pre-wrap text-xs text-toned">
                 {{ item.detail }}
               </p>
-              <p v-if="item.suggestedAction" class="mt-1 text-[11px] text-muted">
+              <p v-if="item.suggestedAction" class="mt-1 text-2xs text-muted">
                 <span class="text-dimmed">{{ t('followUp.suggested') }}</span>
                 {{ item.suggestedAction }}
               </p>
-              <p v-if="item.status === 'filed' && item.ticketUrl" class="mt-1 text-[11px]">
-                <a
-                  :href="item.ticketUrl"
+              <p v-if="item.status === 'filed' && item.ticketUrl" class="mt-1 text-2xs">
+                <ULink
+                  raw
+                  :to="item.ticketUrl"
                   target="_blank"
                   rel="noopener"
                   class="text-app-success-300 hover:underline"
                 >
                   {{ item.ticketExternalId ?? t('followUp.viewIssue') }}
-                </a>
+                </ULink>
               </p>
-              <p v-if="hasRecordedAnswer(item)" class="mt-1 text-[11px] text-toned">
+              <p v-if="hasRecordedAnswer(item)" class="mt-1 text-2xs text-toned">
                 <span class="text-dimmed">
                   {{
                     item.status === 'closed' ? t('followUp.yourRuling') : t('followUp.yourAnswer')
@@ -223,7 +224,7 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
               </p>
               <!-- A decision that was made and then thrown away when the budget ran out. It must
                    not read like one the Coder acted on. -->
-              <p v-if="item.sendBackDropped" class="mt-1 text-[11px] text-app-warning-300">
+              <p v-if="item.sendBackDropped" class="mt-1 text-2xs text-app-warning-300">
                 {{ t('followUp.sendBackDropped') }}
               </p>
 
@@ -231,11 +232,13 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
               <div v-if="item.status === 'pending'" class="mt-2.5">
                 <!-- A question: answer it -->
                 <div v-if="item.kind === 'question'" class="space-y-2">
-                  <textarea
+                  <UTextarea
                     v-model="drafts[item.id]"
-                    rows="2"
+                    :rows="2"
                     :placeholder="t('followUp.answerPlaceholder')"
-                    class="w-full resize-y rounded-md border border-muted bg-app-950/60 px-2.5 py-1.5 text-[12px] text-app-100 placeholder:text-app-600 focus:border-app-info-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-info-500/60"
+                    size="xs"
+                    class="w-full"
+                    :ui="{ base: 'resize-y' }"
                   />
                   <!-- Wraps, like the follow-up row below: three buttons whose labels are two
                        words each in English are one long line in most of the other locales, and
@@ -323,7 +326,7 @@ function hasRecordedAnswer(item: FollowUpItem): boolean {
     </div>
 
     <footer
-      class="flex items-center justify-between border-t border-default px-5 py-2.5 text-[11px] text-muted"
+      class="flex items-center justify-between border-t border-default px-5 py-2.5 text-2xs text-muted"
     >
       <span>
         {{