@7365admin1/layer-common 3.2.2-staging.140 → 3.2.2-staging.142

package/assets/css/screens.css

@@ -774,3 +774,144 @@
   letter-spacing: 0;
   text-transform: none;
 }
+
+/* ------------------------------------------------------------------ */
+/* The "Back" link that sits above a page title.                       */
+/* `SpecificAttr.vue` (17 caller files) and `Container/Standard.vue`.   */
+/*                                                                     */
+/* DESIGN GAP, STATED: the handoff draws no back control anywhere, so  */
+/* its SIZE is not a value the design gives. What the design DOES give */
+/* is the rule for a link - `iService365 Redesign.dc.html:26`,         */
+/* `a{color:var(--accent-text);text-decoration:underline}` - so the    */
+/* colour and the underline are literal, and the underline is kept for */
+/* that reason rather than dropped for looking dated. The size is      */
+/* taken from the only standalone inline link the handoff draws, the   */
+/* panel's "View All" at line 166: 12.5px / 700.                       */
+/*                                                                     */
+/* It replaces `text-subtitle-1 font-weight-medium` - Vuetify's        */
+/* 16px/400 Roboto scale, which is neither the product font nor a size */
+/* that appears anywhere in the design.                                */
+/* ------------------------------------------------------------------ */
+.screen-back {
+  display: inline-block;
+  font-family: var(--font-sans);
+  font-size: var(--fs-breadcrumb);
+  font-weight: var(--fw-btn);
+  letter-spacing: 0;
+  line-height: 1.4;
+  color: var(--accent-text);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.screen-back:hover {
+  color: var(--accent);
+}
+
+/* ------------------------------------------------------------------ */
+/* 9. The row kebab and the dropdown it opens.                         */
+/*                                                                     */
+/* Both halves are LITERAL, and both were previously left as Vuetify   */
+/* draws them - `Dialog/UpdateMoreAction.vue` says so in a comment,    */
+/* because a menu teleports out of the measured container and could    */
+/* not be render-verified at the time. It can now (force-shot).        */
+/*                                                                     */
+/* The kebab: `iService365 Redesign.dc.html:494`, drawn identically at */
+/* 494, 547, 625 and 660 - a 30px bordered square, 8px radius,         */
+/* transparent fill, `--muted` ink, 17px glyph, `--hover` on hover.    */
+/* 8px is not one of the radius tokens (the set is 7/9/10/12/14/16),   */
+/* so it is written literally rather than snapped to a near token.     */
+/*                                                                     */
+/* The panel: `iService365 Redesign.dc.html:79-90`, the profile        */
+/* dropdown - the only dropdown the handoff draws. 240px, `--card` on  */
+/* a 1px `--border`, 14px radius, `--shadow-menu`, 8px padding; rows   */
+/* are 13px/700 `--text2` at 10px 12px with a 10px radius, and a       */
+/* destructive row is `--err` ink with an `--err-bg` hover (line 89),  */
+/* which is ink and not a filled button.                               */
+/* ------------------------------------------------------------------ */
+.v-btn.screen-kebab {
+  --v-btn-height: 30px;
+  height: 30px;
+  width: 30px;
+  min-width: 30px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+}
+
+.screen-kebab .v-btn__overlay {
+  opacity: 0;
+}
+
+.screen-kebab:hover {
+  background: var(--hover);
+}
+
+.screen-kebab .v-icon {
+  font-size: 17px;
+}
+
+.v-overlay__content > .v-list.screen-menu {
+  width: 240px;
+  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-menu);
+  background: var(--card);
+  box-shadow: var(--shadow-menu);
+}
+
+/* Four classes, to beat Vuetify's own `.v-list .v-list-item--density-*`      */
+/* block on specificity rather than on load order - a three-class rule ties   */
+/* with it and loses, which is how the drawer's 10px gap never applied.       */
+.v-overlay__content > .v-list.screen-menu > .screen-menu__item.v-list-item {
+  min-height: 0;
+  padding: 10px 12px;
+  /* MEASURED, not assumed: without `!important` this read back 0px. Vuetify
+     puts the `rounded-0` UTILITY on every `v-list-item` inside a list with no
+     `rounded` prop, and utilities carry `!important`, so a four-class rule
+     still loses to it. Same trap `NavigationItem.vue` hit in batch Q. */
+  border-radius: var(--r-inner) !important;
+  color: var(--text2);
+}
+
+.screen-menu__item .v-list-item-title {
+  font-family: var(--font-sans);
+  font-size: var(--fs-nav);
+  font-weight: var(--fw-btn);
+  letter-spacing: 0;
+  line-height: 1.3;
+}
+
+.screen-menu__item .v-list-item__prepend > .v-icon {
+  font-size: 18px;
+  color: var(--muted);
+  opacity: 1;
+}
+
+/* The design's row gap is 10px; Vuetify's spacer is wider, and the selector  */
+/* below matches its own four-class shape for the same reason as above.       */
+.screen-menu__item .v-list-item__prepend > .v-icon ~ .v-list-item__spacer {
+  width: 10px;
+}
+
+.screen-menu__item:hover > .v-list-item__overlay {
+  opacity: 0;
+}
+
+.screen-menu__item:hover {
+  background: var(--hover);
+}
+
+.v-overlay__content > .v-list.screen-menu > .screen-menu__item--danger.v-list-item {
+  color: var(--err);
+}
+
+.screen-menu__item--danger .v-list-item__prepend > .v-icon {
+  color: var(--err);
+}
+
+.screen-menu__item--danger:hover {
+  background: var(--err-bg);
+}

package/components/Container/Standard.vue

@@ -1,15 +1,17 @@
 <template>
   <v-row no-gutters>
+    <!--
+      The same Back link and the same page title as `SpecificAttr.vue`, which
+      is the other half of this pair - it was already on `PageHeader` and this
+      one was still on `text-h5 font-weight-medium`, Vuetify's 24px/500 Roboto
+      rather than the design's 22px/800. `.screen-back` is stated once in
+      `screens.css` with the design gap written out next to it.
+    -->
     <v-col cols="12">
-      <span
-        class="font-weight-medium text-subtitle-1 text-decoration-underline cursor-pointer"
-        @click="emit('back')"
-      >
-        Back
-      </span>
+      <span class="screen-back" @click="emit('back')"> Back </span>
     </v-col>
     <v-col cols="12">
-      <span class="text-h5 font-weight-medium">{{ props.title }}</span>
+      <PageHeader :title="props.title" />
     </v-col>
 
     <v-col cols="12" class="mt-4">

package/components/Layout/NavigationDrawer.vue

@@ -370,12 +370,13 @@ const handleClick = (item: any) => {
   opacity: 1;
 }
 
-/* Vuetify's own 16px gap between the icon and the label, brought to the 10px
-   the design draws. The spacer element is what holds that distance - a margin
-   on the icon leaves it where it was. */
-.brand-drawer :deep(.v-list-item__spacer) {
-  width: 10px;
-}
+/* The icon-to-label gap USED to be stated here and it never applied: Vuetify's
+   own rule is `.v-list-item__prepend > .v-icon ~ .v-list-item__spacer`, three
+   classes, and `.brand-drawer :deep(.v-list-item__spacer)` is also three once
+   the scope attribute is counted - a tie, decided by load order, and Vuetify
+   loaded last. Measured, the gap was still Vuetify's 32px. The rule now lives
+   in `NavigationItem.vue` in Vuetify's own selector shape, so it wins on
+   specificity; every item in this list is a `NavigationItem`. */
 
 .brand-drawer :deep(.v-list-item--active) {
   font-weight: var(--fw-section-label);

package/components/ListItem.vue

@@ -1,18 +1,30 @@
+<!--
+  A label/value row. Both columns were `text-subtitle-2` - Vuetify's 14px/500
+  Roboto - so the label that names a value and the value itself were drawn
+  identically, and the trailing chevron was 30px, larger than any icon the
+  design draws anywhere.
+
+  DESIGN GAP, STATED: the handoff has no list row of this shape. The values
+  below are the design's own, taken from the nearest things it does draw: the
+  table cell type (`--fs-cell` / `--fw-cell`) for both columns, `--muted` for
+  the label exactly as the handoff labels a value at line 659, and 18px for the
+  trailing icon, the size its own row icons use (lines 87 and 90).
+-->
 <template>
   <v-list-item :class="props.divider ? border : defaultBorder">
     <v-row>
-      <v-col cols="4" class="text-subtitle-2">
+      <v-col cols="4" class="app-list-row__label">
         <slot name="title"> List Title </slot>
       </v-col>
 
-      <v-col cols="8" class="text-subtitle-2">
+      <v-col cols="8" class="app-list-row__value">
         <slot name="value"> value </slot>
       </v-col>
     </v-row>
 
     <template #append>
       <slot name="append">
-        <v-icon size="30">{{ props.icon }}</v-icon>
+        <v-icon size="18">{{ props.icon }}</v-icon>
       </slot>
     </template>
   </v-list-item>
@@ -33,3 +45,21 @@ const props = defineProps({
 const defaultBorder = "pa-0 pl-8 pr-6 py-4";
 const border = "border-b-sm" + " " + defaultBorder;
 </script>
+
+<style scoped>
+.app-list-row__label,
+.app-list-row__value {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+  letter-spacing: 0;
+}
+
+.app-list-row__label {
+  color: var(--muted);
+}
+
+.app-list-row__value {
+  color: var(--text);
+}
+</style>

package/components/NavigationItem.vue

@@ -11,7 +11,7 @@
         v-bind="groupProps"
         :prepend-icon="icon"
         color="primary"
-        class="text-subtitle-2"
+        class="nav-item"
         @click.stop="onParentClick"
       >
         {{ title }}
@@ -33,7 +33,7 @@
     :prepend-icon="icon"
     :to="routeTo"
     color="primary"
-    class="text-subtitle-2"
+    class="nav-item"
   >
     {{ title }}
   </v-list-item>
@@ -43,7 +43,7 @@
     :prepend-icon="icon"
     :href="props.link"
     color="primary"
-    class="text-subtitle-2"
+    class="nav-item"
   >
     {{ title }}
   </v-list-item>
@@ -97,3 +97,83 @@ const routeTo = computed(() => {
   return null;
 });
 </script>
+
+<style scoped>
+/**
+ * The sidebar menu row, taken literally from the handoff's `<aside>` — line 56
+ * of `iService365 Redesign.dc.html` for the row and line 57 for its icon:
+ *
+ *   padding:8px 12px; border-radius:10px; font-size:13px;
+ *   font-weight: 800 when active else 600;
+ *   color: var(--accent-text) when active else var(--text2);
+ *   icon: font-size:19px; width:20px; color: var(--accent-text)/var(--muted);
+ *
+ * What this replaced was `text-subtitle-2` — Vuetify's own type scale, 14px/500
+ * with 0.1px tracking — and no inactive colour at all, so an unselected item
+ * was full-strength body ink and read exactly as loud as the page you are on.
+ *
+ * STATED HERE RATHER THAN ONLY IN THE DRAWER because five of this component's
+ * six call sites are `layouts/*` in the ORG app, outside `.brand-drawer`.
+ * `LayoutNavigationDrawer` already states the same shape for the rows it
+ * contains; the values below are deliberately IDENTICAL to that block, so the
+ * specificity tie between them cannot change what is drawn.
+ *
+ * `margin: 1px 10px` from the handoff is NOT set here: the drawer insets its
+ * own list (`.v-list { padding: 0 8px 12px }`), and a margin as well would
+ * double the inset in the ten apps that do use the drawer.
+ */
+.nav-item {
+  min-height: 38px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-inline: 12px;
+  /* `!important` is not carelessness: Vuetify puts the `rounded-0` UTILITY on
+     the item, and utilities are themselves `!important`. Measured without it,
+     this row drew `border-radius: 0px`. */
+  border-radius: var(--r-inner) !important;
+  font-family: var(--font-sans);
+  font-size: var(--fs-nav);
+  font-weight: var(--fw-cell);
+  letter-spacing: 0;
+  color: var(--text2);
+}
+
+.nav-item.v-list-item--active {
+  font-weight: var(--fw-section-label);
+}
+
+/**
+ * The active row's INK is not set here on purpose. `color="primary"` puts
+ * Vuetify's `text-primary` on the item, that utility is `!important`, and
+ * `primary` is mapped to `--accent-text` — which is the colour the handoff
+ * names for an active row. So the rule above wins for an inactive row and
+ * loses, correctly, for an active one.
+ */
+.nav-item :deep(.v-list-item__prepend > .v-icon) {
+  font-size: 19px;
+  width: 20px;
+  text-align: center;
+  opacity: 1;
+}
+
+/* Muted only while inactive — an explicit colour on the icon would also
+   out-rank the inherited `--accent-text` on the row you are actually on. */
+.nav-item:not(.v-list-item--active) :deep(.v-list-item__prepend > .v-icon) {
+  color: var(--muted);
+}
+
+/**
+ * The handoff's 10px between icon and label. Vuetify holds that distance in a
+ * spacer element, so a margin on the icon leaves it where it was.
+ *
+ * The selector is Vuetify's own shape ON PURPOSE. Vuetify sets the gap with
+ * `.v-list-item__prepend > .v-icon ~ .v-list-item__spacer { width: 32px }` —
+ * three classes. A scoped `.nav-item :deep(.v-list-item__spacer)` is also
+ * three (the scope attribute counts), so it TIES and loses on source order.
+ * Measured: the gap stayed at Vuetify's 32px. Matching the shape makes it four
+ * and it wins on specificity rather than on load order.
+ */
+.nav-item :deep(.v-list-item__prepend > .v-icon ~ .v-list-item__spacer) {
+  width: 10px;
+}
+</style>

package/components/PlaceholderComponent.vue

@@ -1,34 +1,50 @@
+<!--
+  The "page under maintenance" screen — 38 routes across 10 applications.
+
+  What it was: `font-family: Arial` on `color: #333`. Not a token, not the
+  product font, and the same dark grey on the dark page. It was the one screen
+  in the estate that ignored both the theme switch and Manrope.
+
+  DESIGN GAP, STATED: the handoff draws no maintenance / under-construction
+  page at all. So this is assembled from the established primitive rather than
+  invented — `.screen-empty` (`assets/css/screens.css:149`) is the design's
+  centred, muted, 52px-padded empty block, and the heading takes the
+  `--fs-card-title` / `--fw-card-title` type the design uses for every other
+  panel heading (handoff line 133, `font-size:15.5px;font-weight:800`).
+
+  The 🚧 emoji is replaced by the central icon: emoji renders in the OS font,
+  which is neither Manrope nor a colour the theme controls. `mdi-wrench-clock`
+  is translated centrally to Material Symbols `build` — no hand-mapping here.
+-->
 <template>
-  <div class="maintenance-container">
-    <h1>🚧 Page Under Maintenance</h1>
-    <p>
+  <div class="screen-empty placeholder-screen">
+    <v-icon icon="mdi-wrench-clock" size="32" />
+    <h1 class="placeholder-screen__title">Page Under Maintenance</h1>
+    <p class="placeholder-screen__body">
       We're currently working on improving this page to serve you better. Please
       check back soon!
     </p>
-    <p>Thank you for your patience.</p>
+    <p class="placeholder-screen__body">Thank you for your patience.</p>
   </div>
 </template>
 
 <style scoped>
-.maintenance-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
+/* The only value kept from the old stylesheet: it is a whole route, so it
+   holds the viewport rather than collapsing to the height of three lines. */
+.placeholder-screen {
   min-height: 50vh;
-  margin: 0;
-  font-family: Arial, sans-serif;
-  color: #333;
 }
 
-h1 {
-  font-size: 2rem;
-  margin-bottom: 1rem;
+.placeholder-screen__title {
+  margin: 0;
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
 }
 
-p {
-  font-size: 1.1rem;
-  line-height: 1.5;
+.placeholder-screen__body {
+  max-width: 42ch;
+  margin: 0;
+  font-weight: var(--fw-cell);
 }
 </style>

package/components/PlanActionsMenu.vue

@@ -1,22 +1,32 @@
 <template>
+  <!-- The per-row kebab and its dropdown. Both were Vuetify defaults: a text
+       icon button with no border, and a plain `v-list` panel at Vuetify's 4px
+       radius with no border at all. The design draws both - the kebab at
+       `iService365 Redesign.dc.html:494`, the dropdown at lines 79-90 - and
+       `.screen-kebab` / `.screen-menu` in `screens.css` carry those values. -->
   <v-menu location="bottom end">
     <template #activator="{ props }">
       <v-btn
         v-bind="props"
         icon="mdi-dots-vertical"
         variant="text"
-        density="comfortable"
+        class="screen-kebab"
       />
     </template>
 
-    <v-list density="compact">
+    <v-list class="screen-menu" density="compact">
       <v-list-item
+        class="screen-menu__item"
         prepend-icon="mdi-pencil-outline"
         title="Edit plan"
         @click="$emit('edit')"
       />
 
+      <!-- Deactivating a plan is the destructive action, so it takes the
+           handoff's destructive row treatment (line 89): `--err` ink over an
+           `--err-bg` hover, not a filled red button. -->
       <v-list-item
+        class="screen-menu__item screen-menu__item--danger"
         prepend-icon="mdi-close-circle-outline"
         title="Deactivate"
         @click="$emit('deactivate')"

package/components/SlideCardGroup.vue

@@ -1,22 +1,35 @@
+<!--
+  The attachment thumbnail strip (14 caller files).
+
+  THREE THINGS WERE WRONG AND ONE OF THEM NEVER DREW AT ALL:
+
+  1. The strip painted `backgroundColor: '#FFFF'` inline. That is opaque white
+     in BOTH themes - a white band behind the thumbnails on the dark page. It
+     is deleted rather than re-coloured: the strip has no surface of its own in
+     the design, it sits on whatever panel holds it.
+  2. `.selected` was `border: 2px solid var(--v-theme-primary)`. `--v-theme-*`
+     holds a BARE TRIPLET, `74, 110, 182`, not a colour - so the declaration was
+     invalid and dropped silently, and a selected thumbnail has never had a
+     border. It is now `var(--accent)`, which is a colour.
+  3. The remove button's `color="red"` is a fixed Vuetify red, the same red on
+     both themes; `error` is the theme's own. Its `x-large` glyph (40px) was
+     larger than any icon the design draws - 18px is the size the handoff gives
+     a control icon.
+-->
 <template>
-  <v-sheet class="mx-auto">
-    <v-slide-group
-      class="pa-1"
-      show-arrows
-      :style="{ backgroundColor: '#FFFF' }"
-    >
+  <v-sheet class="mx-auto bg-transparent">
+    <v-slide-group class="pa-1" show-arrows>
       <v-slide-group-item
         v-for="(data, idx) in localDataFiles"
         :key="idx"
         v-slot="{ isSelected }"
       >
         <v-card
-          :class="['ma-1', isSelected && 'selected']"
+          :class="['ma-1', 'slide-card', isSelected && 'selected']"
           width="150"
           height="100"
+          elevation="0"
           @click="clickable && emit('onClickCarousel', data)"
-          class="rounded-lg border-thin"
-          border=" opacity-50 thin "
         >
           <v-btn
             icon
@@ -25,7 +38,7 @@
             class="remove-btn pa-0 ma-0"
             @click.stop="removeFile(data)"
           >
-            <v-icon color="red" class="pa-0 ma-0" size="x-large"
+            <v-icon color="error" class="pa-0 ma-0" size="18"
               >mdi-close-circle</v-icon
             >
           </v-btn>
@@ -181,8 +194,19 @@ const removeFile = (file) => {
   right: 8px;
 }
 
+/* The thumbnail tile: the design's inner radius and its own border token,
+   in place of Vuetify's `rounded-lg` + `border-thin` + a `border` prop that
+   set an opacity as well. */
+.slide-card {
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+}
+
+/* See the note at the top: this used to name `var(--v-theme-primary)`, a bare
+   triplet, so the rule was invalid and the selected tile drew no border at
+   all. */
 .selected {
-  border: 2px solid var(--v-theme-primary);
+  border: 2px solid var(--accent);
 }
 
 .remove-btn {

package/components/SpecificAttr.vue

@@ -3,12 +3,14 @@
     <v-col cols="12" :lg="props.lg" :md="props.md" :sm="props.sm">
       <v-row no-gutters>
         <v-col cols="12">
-          <span
-            class="font-weight-medium text-subtitle-1 text-decoration-underline cursor-pointer"
-            @click="emit('back')"
-          >
-            Back
-          </span>
+          <!--
+            The Back link. `.screen-back` is stated once in `screens.css`; the
+            underline and the accent colour are the handoff's own rule for a
+            link (line 26), the 12.5px/700 is its "View All" (line 166), and
+            the design draws no back control of its own - the gap is written
+            out next to the class.
+          -->
+          <span class="screen-back" @click="emit('back')"> Back </span>
         </v-col>
         <!--
           THE PAGE TITLE ROW. This wrapper is the whole scaffold for every

package/components/Tooltip/Info.vue

@@ -1,33 +1,78 @@
+<!--
+  The little "i" that explains a field.
+
+  TWO FIXES, one of them the same defect batch P found in the toast:
+
+  1. `size` is declared `default: ""`. An EMPTY STRING IS NOT `undefined`, so
+     Vue's default machinery never runs and the empty string reaches Vuetify,
+     which builds the class `v-btn--size-` - a class that matches nothing. The
+     button then had no size class at all and fell back to the bare `.v-btn`
+     box. `props.size || undefined` lets Vuetify's own default apply when a
+     caller says nothing, which is what the prop was written to mean.
+  2. `p-0 m-0` are not Vuetify classes and never were - nothing in this project
+     defines them. Dead attributes, removed.
+
+  DESIGN GAP, STATED: the handoff draws no tooltip anywhere (`grep -i tooltip`
+  returns nothing). So the surface below is not invented - it is the same
+  assembly the toast uses for the same reason: the design's inner radius, its
+  menu shadow, its font and its button type scale, applied to Vuetify's
+  tooltip in place of a 4px Roboto pill.
+-->
 <template>
-    <v-tooltip v-bind="$attrs" :text="text" @click.stop>
-        <template v-slot:activator="{ props: activatorProps }">
-            <v-btn icon="mdi-information-symbol" v-bind="activatorProps" class="p-0 m-0 d-flex align-center"
-                :density="density" :size="size" color="primary-button" />
-        </template>
-    </v-tooltip>
+  <v-tooltip v-bind="$attrs" :text="text" content-class="app-tooltip" @click.stop>
+    <template #activator="{ props: activatorProps }">
+      <v-btn
+        icon="mdi-information-symbol"
+        v-bind="activatorProps"
+        class="d-flex align-center"
+        :density="density"
+        :size="props.size || undefined"
+        color="primary-button"
+      />
+    </template>
+  </v-tooltip>
 </template>
 
 <script setup lang="ts">
+import type { VTooltip } from "vuetify/components";
 
-import type { VTooltip} from "vuetify/components"
-
-type TTooltipDensity = VTooltip["$props"]["density"]
+type TTooltipDensity = VTooltip["$props"]["density"];
 
 const props = defineProps({
-    text: {
-        type: String,
-        default: ""
-    },
-     size: {
-        type: String,
-        default: ""
-    },
-    density: {
-        type: String as PropType<TTooltipDensity>,
-        default: "default"
-    }
-})
-
+  text: {
+    type: String,
+    default: "",
+  },
+  size: {
+    type: String,
+    default: "",
+  },
+  density: {
+    type: String as PropType<TTooltipDensity>,
+    default: "default",
+  },
+});
 </script>
 
-<style scoped></style>
+<style>
+/* NOT scoped: a tooltip teleports to the overlay container, outside this
+   component's DOM, so a scoped rule cannot reach it. The class is namespaced
+   for the same reason. */
+.v-tooltip > .v-overlay__content.app-tooltip {
+  /* MEASURED FIRST, then fixed. Left to Vuetify the panel came out
+     `rgb(251,251,248)` on the light page - `--sidebar`, the navigation-rail
+     colour, 1.03:1 against `--bg` with no border. The identical fall-through
+     batch P found behind the invisible toast. `--card` + `--border` is what
+     every other floating panel in this product uses (see `.app-profile-menu`
+     in `Layout/Header.vue`), so the edge is what carries the boundary. */
+  background: var(--card);
+  border: 1px solid var(--border);
+  color: var(--text2);
+  border-radius: var(--r-inner);
+  box-shadow: var(--shadow-menu);
+  font-family: var(--font-sans);
+  font-size: var(--fs-btn);
+  font-weight: 600;
+  letter-spacing: 0;
+}
+</style>

package/components/VisitorSearchResultSummary.vue

@@ -1,27 +1,48 @@
+<!--
+  The summary a visitor search draws under its result. Every one of the four
+  cells was `text-subtitle-1` - Vuetify's 16px/400 Roboto - so the LABEL that
+  names a value ("Name:", "NRIC:") was drawn at exactly the same size, weight
+  and ink as the value itself, and neither was the product font.
+
+  DESIGN GAP, STATED: the handoff draws no visitor-search panel. What it does
+  draw is a label sitting next to the value it names, at
+  `iService365 Redesign.dc.html:659` - `color:var(--muted);font-size:12.5px` -
+  inside a row whose own type is 13.5px/600 with the name at 700 (line 658).
+  Those are the values below: a muted 12.5px label over a 13.5px/700 value, the
+  same label-quieter-than-value relationship `ListItem.vue` already uses.
+
+  The trailing colons are dropped: the design separates a label from its value
+  by weight and ink, not by punctuation.
+-->
 <template>
   <div class="w-100 py-2">
-    <div class="d-flex align-center mb-3 justify-space-between ga-4 w-100">
-      <span class="text-subtitle-1" style="min-width: 50%">
-        <div>Name:</div>
-        <div>{{ displayName }}</div>
-      </span>
-      <span class="text-subtitle-1" style="min-width: 50%">
-        <div>NRIC:</div>
-        <div>{{ item?.nric || "N/A" }}</div>
-      </span>
+    <div class="d-flex flex-wrap align-center mb-3 justify-space-between ga-4 w-100">
+      <!-- These were `<span>` wrappers with `<div>` children - a block inside
+           an inline element, which the parser closes early. Now both are
+           blocks, which is also what makes the 50% min-width behave. -->
+      <div class="visitor-summary__cell">
+        <div class="visitor-summary__label">Name</div>
+        <div class="visitor-summary__value">{{ displayName }}</div>
+      </div>
+      <div class="visitor-summary__cell">
+        <div class="visitor-summary__label">NRIC</div>
+        <div class="visitor-summary__value">{{ item?.nric || "N/A" }}</div>
+      </div>
     </div>
 
     <div
       v-if="contacts.length < 2 && plateNumbers.length < 2"
-      class="d-flex align-center justify-space-between ga-4 w-100"
+      class="d-flex flex-wrap align-center justify-space-between ga-4 w-100"
     >
-      <div class="text-subtitle-1" style="min-width: 50%">
-        <div>Contact:</div>
-        <div>{{ contacts[0] || "N/A" }}</div>
+      <div class="visitor-summary__cell">
+        <div class="visitor-summary__label">Contact</div>
+        <div class="visitor-summary__value">{{ contacts[0] || "N/A" }}</div>
       </div>
-      <div class="text-subtitle-1" style="min-width: 50%">
-        <div>Plate:</div>
-        <div class="text-uppercase">{{ plateNumbers[0] || "N/A" }}</div>
+      <div class="visitor-summary__cell">
+        <div class="visitor-summary__label">Plate</div>
+        <div class="visitor-summary__value text-uppercase">
+          {{ plateNumbers[0] || "N/A" }}
+        </div>
       </div>
     </div>
   </div>
@@ -84,3 +105,26 @@ const plateNumbers = computed(() => {
   );
 });
 </script>
+
+<style scoped>
+.visitor-summary__cell {
+  min-width: 50%;
+}
+
+.visitor-summary__label {
+  font-family: var(--font-sans);
+  font-size: 12.5px;
+  font-weight: var(--fw-cell);
+  letter-spacing: 0;
+  color: var(--muted);
+  margin-bottom: 2px;
+}
+
+.visitor-summary__value {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-btn);
+  letter-spacing: 0;
+  color: var(--text);
+}
+</style>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.140",
+  "version": "3.2.2-staging.142",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",