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

package/assets/css/primitives.css

@@ -92,6 +92,45 @@
   font-family: var(--font-sans, Roboto, sans-serif);
 }
 
+/* ------------------------------------------------------------------ */
+/* The icon face.                                                      */
+/* ------------------------------------------------------------------ */
+
+/**
+ * The handoff draws every icon with Google's `Material Symbols Outlined`
+ * variable font, requested in `nuxt.config.ts` alongside Manrope. The icon
+ * set in `plugins/vuetify.ts` turns each `mdi-*` name into that font's
+ * ligature and puts this class on the element; this rule is what makes the
+ * ligature resolve.
+ *
+ * One class, no `!important`. `.v-icon` already gives us `font-feature-
+ * settings: "liga"`, `letter-spacing: normal`, `line-height: 1` and the 1em
+ * box, and Vuetify never sets `font-family` on it - the old family arrived
+ * through `.mdi:before`, which we no longer emit. Only `text-transform` has
+ * to be stated: `.v-btn` uppercases its contents, and an uppercased "close"
+ * matches no ligature, so the icon would render as the word.
+ */
+.material-symbols-outlined {
+  font-family: "Material Symbols Outlined";
+  font-style: normal;
+  font-variation-settings:
+    "FILL" 0,
+    "GRAD" 0,
+    "opsz" 24;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* mdi's spin modifier, kept working now the glyph is not a `:before`.
+   `@keyframes mdi-spin` still comes from `@mdi/font`, which stays loaded so
+   that any icon name without a mapping keeps drawing its old glyph. */
+.material-symbols-outlined.mdi-spin {
+  animation: mdi-spin 2s infinite linear;
+}
+
 /* ------------------------------------------------------------------ */
 /* PageHeader - the row every screen opens with.                       */
 /* ------------------------------------------------------------------ */
@@ -386,6 +425,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/nuxt.config.ts

@@ -20,6 +20,11 @@ export default defineNuxtConfig({
    * leave the whole product looking half-migrated; each phase adopts the token
    * as it rebuilds its own surfaces. Browsers do not download a webfont no
    * element uses, so until then this costs one small CSS request.
+   *
+   * The second family is the redesign's icon set. Its axis ranges are the
+   * handoff's, character for character (`opsz,wght,FILL,GRAD@20..48,300..700,
+   * 0..1,0`) - do not widen or narrow them without a design change to point
+   * at. `plugins/vuetify.ts` and `assets/css/primitives.css` do the applying.
    */
   app: {
     head: {
@@ -32,7 +37,7 @@ export default defineNuxtConfig({
         },
         {
           rel: "stylesheet",
-          href: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap",
+          href: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,300..700,0..1,0&display=swap",
         },
       ],
     },

package/package.json

@@ -2,9 +2,30 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.121",
+  "version": "3.2.2-staging.123",
   "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.",
+  "files": [
+    "CHANGELOG.md",
+    "app.vue",
+    "error.vue",
+    "nuxt.config.ts",
+    "tsconfig.json",
+    ".nuxtrc",
+    "assets",
+    "components",
+    "composables",
+    "constants",
+    "layouts",
+    "middleware",
+    "pages",
+    "plugins",
+    "public",
+    "services",
+    "types",
+    "utils"
+  ],
   "publishConfig": {
     "access": "public"
   },

package/plugins/vuetify.ts

@@ -43,6 +43,7 @@ import {
 import "vuetify-pro-tiptap/style.css";
 
 import { LIGHT_THEME, DARK_THEME } from "../utils/theme";
+import { MDI_TO_SYMBOL } from "../utils/materialSymbols";
 import { THEME_COOKIE } from "../composables/useThemePreference";
 import type { CookieOptions } from "#app";
 
@@ -56,6 +57,41 @@ import "../assets/css/shell.css";
 import "../assets/css/screens.css";
 import "../assets/css/primitives.css";
 
+/**
+ * THE ICON SET.
+ *
+ * The design handoff draws icons with Google's `Material Symbols Outlined`
+ * variable font - the stylesheet for it is already requested in
+ * `nuxt.config.ts` - while the product asks for Material Design Icons names
+ * (`mdi-close`, `mdi-magnify`, ...) in roughly 680 places here and again in
+ * every application. Translating at the icon set means none of those call sites
+ * change: a component still writes `mdi-close`, and this renders the Material
+ * Symbols glyph for it.
+ *
+ * A name with no entry in the table falls through to the previous Iconify
+ * rendering, so an unrecognised icon draws its old glyph instead of a blank
+ * box. `mdi-blank` maps to an empty string on purpose - it is mdi's deliberate
+ * spacer, and `.v-icon` keeps the 1em box.
+ *
+ * `icon` and `tag` are declared props so Vue does not also emit them as
+ * literal attributes; everything else Vuetify passes (the `v-icon` classes,
+ * size, colour, click handling) falls through to the root element untouched.
+ */
+const MaterialSymbol = (props: any) => {
+  // "mdi-loading mdi-spin" - the name first, any mdi modifier classes after it.
+  const [name, ...modifiers] = String(props.icon ?? "").split(/\s+/);
+  const symbol = MDI_TO_SYMBOL[name];
+
+  return symbol === undefined
+    ? h(Icon, { icon: props.icon })
+    : h(
+        props.tag ?? "span",
+        { class: ["material-symbols-outlined", ...modifiers] },
+        symbol,
+      );
+};
+MaterialSymbol.props = ["icon", "tag"];
+
 export default defineNuxtPlugin((app) => {
   /**
    * BOOT ON THE REMEMBERED THEME, DON'T CORRECT IT AFTERWARDS.
@@ -145,7 +181,7 @@ export default defineNuxtPlugin((app) => {
       defaultSet: "iconify",
       sets: {
         iconify: {
-          component: (props: any) => h(Icon, { icon: props.icon }),
+          component: MaterialSymbol,
         },
       },
     },