@7365admin1/layer-common 3.2.2-staging.121 → 3.2.2-staging.122

package/assets/css/primitives.css

@@ -386,6 +386,59 @@
   filter: none;
 }
 
+/* ------------------------------------------------------------------ */
+/* The check-in / check-out pair.                                      */
+/* ------------------------------------------------------------------ */
+
+/**
+ * NEW DESIGN, approved by the owner on 2026-08-14. The handoff draws no
+ * check-in and no check-out button, so there is nothing to match here; the
+ * gatehouse screens had been carrying Vuetify's `color="success"` and a
+ * hardcoded `color="red"` instead.
+ *
+ * Both are `.app-btn` first - the same 40px box, the same 10px radius, the
+ * same 13.5px/800 - so only the fill, the ink and the edge differ and the pair
+ * sits level with every other button in the product. The 16px icon at an 8px
+ * gap is the only metric either adds.
+ *
+ * CHECK IN is SOLID. It is the affirmative action a guard hits hundreds of
+ * times a shift and should be the heaviest thing on its row.
+ *
+ * CHECK OUT is TONAL, and that is measured rather than preferred: white on
+ * `--err` reads 2.99:1 in the dark theme, which is why batch C built a solid
+ * danger button, measured it and reverted it. `--err-bg` fill + `--err` ink +
+ * a 24%/28% `--err` edge is the construction the status chips already use, it
+ * passes in both themes, and it keeps a routine action from reading as a
+ * destructive one.
+ */
+.app-btn--ok,
+.app-btn--err {
+  gap: 8px;
+}
+
+/* The label is `--on-ok`, not a literal white - see tokens.css. White on the
+   DARK theme's `--ok` measures 2.14:1; `--on-ok` is the on-fill pair the theme
+   already carries, so the green stays exactly the green the design names. */
+.app-btn--ok {
+  border: 1px solid var(--ok);
+  background: var(--ok);
+  color: var(--on-ok);
+}
+
+.app-btn--err {
+  border: 1px solid var(--err-border);
+  background: var(--err-bg);
+  color: var(--err);
+}
+
+/* A tint cannot be hovered with `brightness()` - above 1 it fades in the light
+   theme, which is the wrong direction. Layering the theme's own `--hover` over
+   the fill darkens in light and lightens in dark, with no new token. */
+.app-btn--err:hover {
+  background: linear-gradient(var(--hover), var(--hover)), var(--err-bg);
+  filter: none;
+}
+
 /* ------------------------------------------------------------------ */
 /* AppField / AppSelect / AppDateField.                                */
 /* ------------------------------------------------------------------ */

package/assets/css/tokens.css

@@ -39,6 +39,15 @@
 
   /* Semantic status */
   --ok: rgb(var(--v-theme-success));
+  /*
+   * The label on a SOLID `--ok` fill. Not `#fff`: the dark theme's `--ok` is
+   * `#41c795`, a light mint, and white on it measures 2.14:1 - worse than the
+   * 2.99:1 that got batch C's solid danger button reverted. `on-success` is
+   * the pair Vuetify already computes per theme from `PALETTE.onFill`
+   * (`#ffffff` light, `#131418` dark), so the fill keeps the colour the design
+   * asks for and only the label follows the theme.
+   */
+  --on-ok: rgb(var(--v-theme-on-success));
   --warn: rgb(var(--v-theme-warning));
   --err: rgb(var(--v-theme-error));
   --info: rgb(var(--v-theme-info));
@@ -78,6 +87,11 @@
   --warn-bg: rgba(190, 140, 25, 0.13);
   --err-bg: rgba(207, 75, 75, 0.1);
   --info-bg: rgba(59, 111, 212, 0.1);
+
+  /* The edge of a TONAL error control - the check-out button. Alpha over the
+     live `--err` rather than a literal, exactly the way `--accent-soft` is
+     built, so it tracks the theme's error colour instead of restating it. */
+  --err-border: rgba(var(--v-theme-error), 0.24);
 }
 
 .v-theme--dark {
@@ -89,6 +103,8 @@
   --warn-bg: rgba(220, 175, 78, 0.13);
   --err-bg: rgba(229, 115, 115, 0.12);
   --info-bg: rgba(125, 166, 236, 0.12);
+
+  --err-border: rgba(var(--v-theme-error), 0.28);
 }
 
 /* ------------------------------------------------------------------ */

package/components/AppButton.vue

@@ -13,6 +13,12 @@
              box as primary; the handoff differs only in fill, border and weight
     icon     32px transparent square, 8px radius
     row      30px bordered square - the `more_vert` at the end of a table row
+
+  Two more the handoff does NOT draw, added as NEW design on the owner's
+  ruling of 2026-08-14 - see `assets/css/primitives.css` for why check-out is
+  tonal and not solid red:
+    ok       40px solid `--ok` fill, white label - CHECK IN
+    err      40px tonal `--err` fill, `--err` label, `--err` edge - CHECK OUT
 -->
 <template>
   <component
@@ -33,7 +39,7 @@ import { resolveComponent } from "vue";
 
 const props = defineProps({
   variant: {
-    type: String as PropType<"primary" | "ghost" | "icon" | "row">,
+    type: String as PropType<"primary" | "ghost" | "icon" | "row" | "ok" | "err">,
     default: "primary",
   },
   icon: { type: String, default: "" },
@@ -48,6 +54,9 @@ const resolveLink = resolveComponent("NuxtLink");
 const iconSize = computed(() => {
   if (props.variant === "primary") return 18;
   if (props.variant === "row") return 17;
+  /* The check-in tick and the check-out cross are drawn at 16px - a glyph, not
+     a second focal point beside a two-word label. */
+  if (props.variant === "ok" || props.variant === "err") return 16;
   return 18;
 });
 </script>

package/components/StatusChip.vue

@@ -19,6 +19,22 @@
          word - a padlock on "Closed - View Only" - so adopting the design's
          pill does not quietly drop it. -->
     <slot>{{ label ?? status }}</slot>
+    <!--
+      The remove control. NEW design, approved by the owner on 2026-08-14 - the
+      handoff draws no removable chip. It is an affordance ON the existing pill,
+      not a second shape, so a removable "KEY-309" and a read-only "Issued" stay
+      visibly the same family: same 999px pill, same 4px 10px, same 12px/700,
+      same 24px height. A chip that cannot be removed is byte-for-byte unchanged.
+    -->
+    <button
+      v-if="removable"
+      type="button"
+      class="status-chip__x"
+      :aria-label="removeLabel || `Remove ${label ?? status}`"
+      @click="emit('remove')"
+    >
+      <v-icon icon="mdi-close" :size="12" />
+    </button>
   </span>
 </template>
 
@@ -47,8 +63,19 @@ const props = defineProps({
     type: String as PropType<"ok" | "warn" | "err" | "info" | "neutral" | "">,
     default: "",
   },
+  /** Draws the × and emits `remove` when it is pressed. */
+  removable: { type: Boolean, default: false },
+  /**
+   * The × 's accessible name. Defaults to `Remove <the printed label>`, which
+   * is right for an identifier chip ("Remove KEY-309"); give it explicitly
+   * whenever the printed text alone would not tell a screen-reader user what
+   * is about to be taken away.
+   */
+  removeLabel: { type: String, default: "" },
 });
 
+const emit = defineEmits<{ (e: "remove"): void }>();
+
 const toneClass = computed(() =>
   props.tone ? `tone-${props.tone}` : statusToneClass(props.status)
 );
@@ -83,6 +110,42 @@ const toneClass = computed(() =>
   font-size: var(--fs-chip);
 }
 
+/*
+ * A 12px glyph needs a 24px target to stay pressable at 360px, but the chip is
+ * only 24px tall - so the hit area is INSET into the pill's own padding rather
+ * than added to it. The negative margin is what keeps the × from making a
+ * removable chip taller than the read-only one beside it.
+ */
+.status-chip__x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin: -6px -6px -6px 0;
+  padding: 0;
+  border: none;
+  border-radius: var(--r-pill);
+  background: transparent;
+  /* Chips read as labels first and controls second, so the × sits back from
+     the word until it is reached for. */
+  color: inherit;
+  opacity: 0.62;
+  cursor: pointer;
+  transition: opacity var(--motion) ease, background var(--motion) ease;
+}
+
+.status-chip__x:hover,
+.status-chip__x:focus-visible {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.v-theme--dark .status-chip__x:hover,
+.v-theme--dark .status-chip__x:focus-visible {
+  background: rgba(255, 255, 255, 0.08);
+}
+
 .status-chip__dot {
   width: 6px;
   height: 6px;

package/components/VisitorManagement.vue

@@ -613,15 +613,21 @@
                 class="d-flex align-center"
               >
                 <strong>{{ label }}:</strong>
-                <v-btn
-                  size="x-small"
-                  class="ml-3 text-capitalize"
-                  color="success"
-                  text="Checkin"
+                <!-- The design's check-in / check-out pair. Was Vuetify's
+                     `color="success"` beside a hardcoded `color="red"` - two
+                     different systems on one field list, and neither of them a
+                     token. `:loading` is dropped rather than re-invented: the
+                     same flag already drives `:disabled`, which is the
+                     precedent set when the scanned-visitor form converted. -->
+                <AppButton
+                  variant="ok"
+                  icon="mdi-check"
+                  class="ml-3"
                   :disabled="isVisitorDataFromScannedQRCodeCheckingInOut"
                   @click="handleCheckin(selectedVisitorDataObject)"
-                  :loading="isVisitorDataFromScannedQRCodeCheckingInOut"
-                />
+                >
+                  Check In
+                </AppButton>
               </span>
               <span
                 v-if="
@@ -633,14 +639,15 @@
                 class="d-flex align-center"
               >
                 <strong>{{ label }}:</strong>
-                <v-btn
-                  size="x-small"
-                  class="ml-3 text-capitalize"
-                  color="red"
-                  text="Checkout"
+                <AppButton
+                  variant="err"
+                  icon="mdi-close"
+                  class="ml-3"
                   :disabled="loading.checkingOut"
                   @click="handleCheckout(selectedVisitorId as string)"
-                />
+                >
+                  Check Out
+                </AppButton>
               </span>
 
               <span

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.121",
+  "version": "3.2.2-staging.122",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {