@7365admin1/layer-common 3.2.2-staging.133 → 3.2.2-staging.134

package/assets/css/screens.css

@@ -294,11 +294,29 @@
  *
  * Borderless and 32px square - NOT `.screen-icon-btn`, which is the bordered
  * 40px square the design draws in a toolbar. The glyph is 19px.
+ *
+ * MEASURED, 2026-08-15: the size never reached the glass. Vuetify's own
+ *
+ *   .v-btn--size-default.v-btn--icon { width: calc(var(--v-btn-height) + 12px);
+ *                                      height: same }
+ *
+ * is TWO classes against this one, so every `.screen-modal__close` in the
+ * package drew at 36 + 12 = **48px**, with Vuetify's `padding: 0 16px` on top -
+ * half again the design's square, on all thirteen components that use it
+ * (`AreaFormDialog`, `Carousel`, `ConfirmDialog`, `DocumentViewer`, `DrawImage`,
+ * `EntryPass/QrTemplatePreview`, `EquipmentItemMain`, `EquipmentManagementMain`,
+ * `FileInput`, `ManageChecklistMain`, `PhotoUpload`, `ServiceProviderMain`,
+ * `Signature`). The `border-radius: 8px` DID win, which is what hid it: the
+ * control looked right and simply sat in a box a third too big.
+ *
+ * Naming `.v-btn` alongside it makes this (0,2,0) and the later sheet wins -
+ * the same specificity fix `.v-btn.screen-btn-primary` needed, no `!important`.
  */
-.screen-modal__close {
+.v-btn.screen-modal__close {
   width: 32px;
   height: 32px;
   min-width: 32px;
+  padding: 0;
   border-radius: 8px;
   background: transparent;
   color: var(--muted);

package/components/ManageChecklistMain.vue

@@ -31,14 +31,23 @@
       >
         <!-- Status icon driven by local activeActions state -->
         <template #item-prepend="{ item, group }">
+          <!--
+            `success` and `error` ARE this theme's tokens (`utils/theme.ts` maps
+            them to `p.ok` / `p.err`), so they stay. `grey-lighten-2` was not -
+            it is Vuetify's raw grey, and it drew the idle circle at 1.32:1
+            against the card where a non-text indicator needs 3:1. The design's
+            de-emphasis token is `--muted`, applied by class because `color`
+            takes a theme name, not a custom property.
+          -->
           <v-icon
             size="20"
+            :class="{ 'checklist-icon--idle': !activeActions[getKey(item, group.set)] }"
             :color="
               activeActions[getKey(item, group.set)] === 'approve'
                 ? 'success'
                 : activeActions[getKey(item, group.set)] === 'reject'
                 ? 'error'
-                : 'grey-lighten-2'
+                : undefined
             "
           >
             {{
@@ -194,11 +203,13 @@
               v-if="group.attachments && group.attachments.length > 0"
               cols="auto"
             >
+              <!-- `variant="tonal"` was Vuetify's own tinted slab in the row -
+                   the same off-design control `EquipmentManagementMain` had.
+                   The design's ghost button. -->
               <v-btn
-                size="x-small"
-                variant="tonal"
-                color="primary"
-                class="text-none"
+                size="small"
+                variant="outlined"
+                class="screen-btn-ghost"
                 prepend-icon="mdi-paperclip"
                 @click.stop="openAttachmentDialog(group.set, group.attachments)"
               >
@@ -213,9 +224,16 @@
     </v-col>
   </v-row>
 
+  <!--
+    Was a bare `v-card` (Vuetify's own `surface`, a shade off the design's card)
+    with a `text-h5` title, and a `v-card-actions` footer whose Cancel sat on
+    `color="grey"` - not a token, so it drew the same grey on both themes and
+    the two buttons were right-aligned rather than the design's two equal
+    halves. It is the shared `.screen-modal` shape now.
+  -->
   <v-dialog v-model="showCompletionModal" max-width="600" persistent>
-    <v-card>
-      <v-card-title class="text-h5 pa-4">
+    <v-card class="screen-modal">
+      <v-card-title>
         {{
           modalData.currentSet !== undefined
             ? `Set ${modalData.currentSet} Completed`
@@ -225,15 +243,17 @@
 
       <v-divider />
 
-      <v-card-text class="pa-4">
+      <v-card-text class="screen-modal__body pa-4">
         <v-row>
           <v-col cols="12">
             <InputLabel title="Remarks" :required="false" class="mb-2" />
+            <!-- `.filter-field` is the design's field on a `v-textarea`: the
+                 10px corner and 13.5px type, without taking the binding away. -->
             <v-textarea
               v-model="modalData.remark"
+              class="filter-field"
               placeholder="Enter your remarks here"
               rows="4"
-              variant="outlined"
               density="comfortable"
               hide-details
             />
@@ -252,38 +272,47 @@
         </v-row>
       </v-card-text>
 
-      <v-divider />
-
-      <v-card-actions class="pa-4">
-        <v-spacer />
-        <v-btn color="grey" variant="text" @click="closeModal"> Cancel </v-btn>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          @click="closeModal"
+        >
+          Cancel
+        </v-btn>
         <v-btn
-          color="primary"
+          class="screen-btn-primary"
           variant="flat"
           @click="submitModal"
           :disabled="!isModalValid"
         >
           Submit
         </v-btn>
-      </v-card-actions>
+      </div>
     </v-card>
   </v-dialog>
 
+  <!--
+    Same shape, and this one carried BOTH of the defects that repeated across
+    this claim: a `v-toolbar` as the footer bar (Vuetify's `surface`, a grey
+    slab that stays grey on dark) and `color="black"` on the confirm button -
+    not a token, so a black slab painted on the dark theme too.
+  -->
   <v-dialog v-model="showRejectModal" max-width="600" persistent>
-    <v-card>
-      <v-card-title class="text-h5 pa-4">Reject Checklist Item</v-card-title>
+    <v-card class="screen-modal">
+      <v-card-title>Reject Checklist Item</v-card-title>
 
       <v-divider />
 
-      <v-card-text class="pa-4">
+      <v-card-text class="screen-modal__body pa-4">
         <v-row>
           <v-col cols="12">
             <InputLabel title="Remarks" :required="true" class="mb-2" />
             <v-textarea
               v-model="rejectModal.remarks"
+              class="filter-field"
               placeholder="Enter remarks"
               rows="4"
-              variant="outlined"
               density="comfortable"
               hide-details
             />
@@ -302,61 +331,50 @@
         </v-row>
       </v-card-text>
 
-      <v-divider />
-
-      <v-toolbar class="pa-0" density="compact">
-        <v-row no-gutters>
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              height="48"
-              :disabled="rejectModal.submitting"
-              @click="closeRejectDialog"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none font-weight-bold rounded-0"
-              height="48"
-              :loading="rejectModal.submitting"
-              :disabled="!isRejectModalValid || rejectModal.submitting"
-              @click="submitRejectDialog"
-            >
-              Confirm
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          :disabled="rejectModal.submitting"
+          @click="closeRejectDialog"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :loading="rejectModal.submitting"
+          :disabled="!isRejectModalValid || rejectModal.submitting"
+          @click="submitRejectDialog"
+        >
+          Confirm
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 
+  <!--
+    The design's modal close control is the borderless 32px square
+    `.screen-modal__close`, not the bordered toolbar icon button. The title was
+    a hand-set `text-h6 font-weight-bold`; `.screen-modal .v-card-title` is the
+    design's card-title size and weight, so the local pair goes.
+  -->
   <v-dialog v-model="showAttachmentDialog" max-width="700" scrollable>
-    <v-card>
-      <v-card-title class="d-flex align-center pa-4">
-        <span class="text-h6 font-weight-bold">
-          Set {{ attachmentDialogSetNum }} — Attachments
-        </span>
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
+        <span>Set {{ attachmentDialogSetNum }} — Attachments</span>
         <v-spacer />
         <v-btn
           icon="mdi-close"
           variant="text"
-          size="small"
+          class="screen-modal__close"
           @click="showAttachmentDialog = false"
         />
       </v-card-title>
 
       <v-divider />
 
-      <v-card-text class="pa-4">
+      <v-card-text class="screen-modal__body pa-4">
         <v-row>
           <v-col
             v-for="(id, index) in attachmentDialogIds"
@@ -404,11 +422,16 @@
   </v-dialog>
 
   <v-dialog v-model="showLightbox" max-width="900">
-    <v-card>
+    <v-card class="screen-modal">
       <v-card-actions class="pa-2 justify-end">
-        <v-btn icon="mdi-close" variant="text" @click="showLightbox = false" />
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          class="screen-modal__close"
+          @click="showLightbox = false"
+        />
       </v-card-actions>
-      <v-card-text class="pa-2 pt-0">
+      <v-card-text class="screen-modal__body pa-2 pt-0">
         <v-img :src="lightboxSrc" contain max-height="80vh" />
       </v-card-text>
     </v-card>
@@ -1006,3 +1029,12 @@ async function _updateUnitChecklist({
   }
 }
 </script>
+
+<style scoped>
+/* The idle checklist circle. `--muted` is the design's de-emphasis token and
+   clears the 3:1 bar a non-text indicator needs; Vuetify's `grey-lighten-2`
+   read 1.32:1. */
+.checklist-icon--idle {
+  color: var(--muted);
+}
+</style>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.133",
+  "version": "3.2.2-staging.134",
   "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.",