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

package/assets/css/screens.css

@@ -774,3 +774,36 @@
   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);
+}

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/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/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.141",
   "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.",