@7365admin1/layer-common 3.2.2-staging.90 → 3.2.2-staging.91

package/assets/css/primitives.css

@@ -0,0 +1,430 @@
+/**
+ * PLATFORM REDESIGN - THE PAGE PRIMITIVES.
+ *
+ * Phases 1-5 tokenised what Vuetify draws. This file is the other half: the
+ * pieces the design draws that Vuetify has no component for, taken as literal
+ * CSS out of the handoff prototype
+ * (`design_handoff_platform_redesign/iService365 Redesign.dc.html`) rather
+ * than re-derived by eye. Every declaration below has a line in that file.
+ *
+ * The rule for a screen adopting these: MARKUP, not a theme override. A
+ * `.v-btn` restyled into a pill is still a `.v-btn` with Vuetify's ripple,
+ * overlay, min-width and uppercase tracking fighting it at a higher
+ * specificity; a `<button class="app-btn">` simply is the button in the
+ * design. Where Vuetify owns the behaviour (the data table, the menu, the
+ * dialog) it stays - only the chrome around it is replaced.
+ *
+ * Numbers, for review against the handoff:
+ *   page title 22px/800/-0.01em   ·  card radius 14px, 1px border, --shadow
+ *   in-card toolbar 0 20px, tabs 14px 2px 12px, 2px accent underline
+ *   fields 40px (34px compact), 10px radius, 13.5px/500
+ *   primary button 40px, 10px radius, 13.5px/800  ·  ghost 38px, 13px/700
+ */
+
+/* ------------------------------------------------------------------ */
+/* The typeface.                                                       */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Phase 1 loaded Manrope and deliberately did not apply it, so that the
+ * product would not sit half-migrated between two typefaces. The page
+ * scaffold is the migration, so the font goes on now - on Vuetify's own
+ * application root, which is every rendered page in all eleven apps.
+ *
+ * `.v-application` and not `body`: Vuetify sets `font-family` on that class
+ * itself, so a rule on `body` loses to it and the product would keep Roboto
+ * everywhere while the new primitives alone changed - the exact
+ * half-migrated look this was avoiding.
+ */
+.v-application,
+.v-overlay-container {
+  font-family: var(--font-sans);
+}
+
+/* ------------------------------------------------------------------ */
+/* PageHeader - the row every screen opens with.                       */
+/* ------------------------------------------------------------------ */
+
+.app-page-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 18px;
+  flex-wrap: wrap;
+}
+
+.app-page-head__title {
+  margin: 0;
+  font-size: var(--fs-h1);
+  font-weight: var(--fw-h1);
+  letter-spacing: var(--ls-h1);
+  line-height: 1.25;
+  color: var(--text);
+}
+
+.app-page-head__sub {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 4px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--muted);
+}
+
+.app-page-head__actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+/* ------------------------------------------------------------------ */
+/* AppCard - the surface everything else sits on.                      */
+/* ------------------------------------------------------------------ */
+
+.app-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-card);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.app-card--flush {
+  overflow: visible;
+}
+
+/* ------------------------------------------------------------------ */
+/* CardToolbar - the in-card top row.                                  */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Two shapes in the handoff, one component. With tabs the row is `0 20px` and
+ * the tabs supply their own vertical padding, so the underline meets the
+ * card's rule; without tabs (a refresh button on the left) it is `10px 14px`.
+ */
+.app-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 22px;
+  padding: 0 var(--cellpad-x);
+  border-bottom: 1px solid var(--border);
+  min-height: 48px;
+}
+
+.app-toolbar--plain {
+  gap: 8px;
+  padding: 10px 14px;
+}
+
+.app-toolbar__spacer {
+  flex: 1;
+}
+
+.app-toolbar__right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.app-toolbar__count {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.app-tabs {
+  display: flex;
+  align-items: center;
+  gap: 22px;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.app-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.app-tab {
+  padding: 14px 2px 12px 2px;
+  border: none;
+  background: transparent;
+  border-bottom: 2px solid transparent;
+  font-family: inherit;
+  font-size: var(--fs-nav);
+  font-weight: 600;
+  color: var(--muted);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.app-tab:hover {
+  color: var(--text2);
+}
+
+.app-tab--active {
+  font-weight: 800;
+  color: var(--accent-text);
+  border-bottom-color: var(--accent);
+}
+
+/* ------------------------------------------------------------------ */
+/* The table, drawn as a grid.                                         */
+/* ------------------------------------------------------------------ */
+
+.app-thead {
+  display: grid;
+  gap: 12px;
+  padding: 12px var(--cellpad-x);
+  font-size: var(--fs-table-head);
+  font-weight: var(--fw-table-head);
+  letter-spacing: var(--ls-table-head);
+  text-transform: uppercase;
+  color: var(--muted);
+  background: var(--thead);
+}
+
+.app-trow {
+  display: grid;
+  gap: 12px;
+  align-items: center;
+  padding: var(--cellpad) var(--cellpad-x);
+  border-top: 1px solid var(--border);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.app-trow:hover {
+  background: var(--hover);
+}
+
+.app-cell--strong {
+  font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.app-cell--muted {
+  color: var(--text2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.app-cell--num {
+  color: var(--text2);
+  font-variant-numeric: tabular-nums;
+}
+
+.app-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 52px var(--cellpad-x);
+  border-top: 1px solid var(--border);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--muted);
+  text-align: center;
+}
+
+/* ------------------------------------------------------------------ */
+/* AppButton.                                                          */
+/* ------------------------------------------------------------------ */
+
+.app-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: var(--btn-h);
+  padding: 0 16px;
+  border: none;
+  border-radius: var(--r-inner);
+  /* `--accent` at 3.23:1 cannot carry a white label - see Phase 1. The fill,
+     and only the fill, uses the 18%-darker `--accent-strong`; the underline,
+     the links and every soft background stay on `--accent`. */
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
+  font-family: inherit;
+  font-size: var(--fs-btn);
+  font-weight: var(--fw-btn-strong);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.app-btn:hover {
+  filter: brightness(1.06);
+}
+
+.app-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+  filter: none;
+}
+
+.app-btn--ghost {
+  height: 38px;
+  padding: 0 14px;
+  border: 1px solid var(--border);
+  background: var(--card);
+  color: var(--text2);
+  font-size: var(--fs-nav);
+  font-weight: var(--fw-btn);
+}
+
+.app-btn--ghost:hover {
+  background: var(--hover);
+  filter: none;
+}
+
+.app-btn--icon {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text2);
+}
+
+.app-btn--icon:hover {
+  background: var(--hover);
+  filter: none;
+}
+
+/* The 30px bordered row action - the `more_vert` at the end of a member row. */
+.app-btn--row {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+}
+
+.app-btn--row:hover {
+  background: var(--hover);
+  filter: none;
+}
+
+/* ------------------------------------------------------------------ */
+/* AppField / AppSelect / AppDateField.                                */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Flat and compact, with the label OUTSIDE the box as a small muted word -
+ * not Vuetify's outlined field with a label that floats through the border.
+ * A native `<input>`/`<select>`, so the browser keeps the keyboard, the date
+ * picker and the accessibility for free.
+ */
+.app-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: var(--input-h);
+  padding: 0 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
+  font-size: var(--fs-nav);
+  font-weight: 600;
+  color: var(--text);
+  min-width: 0;
+}
+
+.app-field--compact {
+  height: var(--input-h-compact);
+}
+
+.app-field:focus-within {
+  border-color: var(--accent);
+}
+
+.app-field__label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+  white-space: nowrap;
+}
+
+.app-field__icon {
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.app-field__input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  color: var(--text);
+}
+
+.app-field__input::placeholder {
+  color: var(--muted);
+  opacity: 1;
+}
+
+/* A `<select>` keeps the native menu; only the chrome is ours. */
+select.app-field__input {
+  font-weight: 600;
+  font-size: var(--fs-nav);
+  appearance: none;
+  cursor: pointer;
+}
+
+.app-field--search {
+  flex: 1;
+  min-width: 220px;
+}
+
+.app-filter-row {
+  display: flex;
+  gap: var(--grid-gap);
+  margin-bottom: 14px;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 599.98px) {
+  .app-filter-row > * {
+    flex: 1 1 100%;
+    min-width: 0;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Responsive - the prototype has no reference, this follows Phase 1.  */
+/* ------------------------------------------------------------------ */
+
+@media (max-width: 767.98px) {
+  .app-page-head {
+    align-items: flex-start;
+  }
+
+  /* The grid table keeps its columns and scrolls sideways inside the card,
+     deliberately not restacked into key/value blocks: the columns carry
+     meaning by position. Same decision as Phase 1's tables. */
+  .app-table-scroll {
+    overflow-x: auto;
+  }
+
+  .app-table-scroll > * {
+    min-width: 720px;
+  }
+}

package/components/AppButton.vue

@@ -0,0 +1,52 @@
+<!--
+  THE BUTTON.
+
+  A `<button>`, not a restyled `v-btn`. Vuetify's button carries an overlay
+  layer, a ripple, a min-width, uppercase letter-spacing and its own height
+  scale, all at a specificity a class has to out-shout one declaration at a
+  time - which is why the product's primary buttons still read as Vuetify grey
+  under a correct token set.
+
+  Variants, straight from the handoff:
+    primary  40px pill-radius accent fill, 13.5px/800, white label
+    ghost    38px, 1px border, card fill, 13px/700 in `--text2`
+    icon     32px transparent square, 8px radius
+    row      30px bordered square - the `more_vert` at the end of a table row
+-->
+<template>
+  <component
+    :is="to ? resolveLink : 'button'"
+    :to="to || undefined"
+    :type="to ? undefined : type"
+    :disabled="disabled || undefined"
+    class="app-btn"
+    :class="variant === 'primary' ? '' : `app-btn--${variant}`"
+  >
+    <v-icon v-if="icon" :icon="icon" :size="iconSize" />
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { resolveComponent } from "vue";
+
+const props = defineProps({
+  variant: {
+    type: String as PropType<"primary" | "ghost" | "icon" | "row">,
+    default: "primary",
+  },
+  icon: { type: String, default: "" },
+  type: { type: String, default: "button" },
+  disabled: { type: Boolean, default: false },
+  /** Given, the button routes - same `to` a `v-btn` would have taken. */
+  to: { type: [String, Object] as PropType<any>, default: undefined },
+});
+
+const resolveLink = resolveComponent("NuxtLink");
+
+const iconSize = computed(() => {
+  if (props.variant === "primary") return 18;
+  if (props.variant === "row") return 17;
+  return 18;
+});
+</script>

package/components/AppCard.vue

@@ -0,0 +1,20 @@
+<!--
+  THE CARD.
+
+  14px radius, a 1px `--border` rule and the design's one-pixel shadow, on
+  `--card`. A plain element rather than a `v-card`, because `v-card` brings its
+  own elevation, radius and surface colour at a specificity that a class has to
+  fight - which is why the radius kept coming back as 4px in Phase 3.
+-->
+<template>
+  <div class="app-card" :class="{ 'app-card--flush': flush }">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  /** Let content (a menu, a dropdown) escape the card's rounded corners. */
+  flush: { type: Boolean, default: false },
+});
+</script>

package/components/AppDateField.vue

@@ -0,0 +1,35 @@
+<!--
+  THE DATE FIELD.
+
+  The same 40px box with a calendar glyph, as the handoff draws the two date
+  ends of a filter row. `<input type="date">` - the browser's own picker, which
+  is the one a phone user already knows and the one that is localised, keyboard
+  accessible and free.
+-->
+<template>
+  <label class="app-field" :class="{ 'app-field--compact': compact }">
+    <v-icon class="app-field__icon" icon="mdi-calendar-month-outline" size="17" />
+    <span v-if="label" class="app-field__label">{{ label }}</span>
+    <input
+      class="app-field__input"
+      type="date"
+      :value="model"
+      :min="min || undefined"
+      :max="max || undefined"
+      :disabled="disabled"
+      @input="model = ($event.target as HTMLInputElement).value"
+    />
+  </label>
+</template>
+
+<script setup lang="ts">
+const model = defineModel({ type: String, default: "" });
+
+defineProps({
+  label: { type: String, default: "" },
+  min: { type: String, default: "" },
+  max: { type: String, default: "" },
+  compact: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+});
+</script>

package/components/AppField.vue

@@ -0,0 +1,46 @@
+<!--
+  THE TEXT FIELD.
+
+  40px (34px compact), 10px radius, a 1px border, 13.5px/500 - and the label
+  OUTSIDE the box as a small muted word, not Vuetify's outlined field with a
+  label that floats up through the border. A native `<input>`, so the browser
+  keeps the keyboard, autofill and accessibility for free.
+-->
+<template>
+  <label
+    class="app-field"
+    :class="[{ 'app-field--compact': compact, 'app-field--search': search }, klass]"
+  >
+    <v-icon
+      v-if="icon || search"
+      class="app-field__icon"
+      :icon="icon || 'mdi-magnify'"
+      size="18"
+    />
+    <span v-if="label" class="app-field__label">{{ label }}</span>
+    <input
+      class="app-field__input"
+      :type="type"
+      :value="model"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      @input="model = ($event.target as HTMLInputElement).value"
+    />
+  </label>
+</template>
+
+<script setup lang="ts">
+const model = defineModel({ type: String, default: "" });
+
+defineProps({
+  label: { type: String, default: "" },
+  placeholder: { type: String, default: "" },
+  icon: { type: String, default: "" },
+  type: { type: String, default: "text" },
+  /** The design's search field: a magnifier and `flex:1` in a filter row. */
+  search: { type: Boolean, default: false },
+  compact: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  klass: { type: String, default: "" },
+});
+</script>

package/components/AppSelect.vue

@@ -0,0 +1,47 @@
+<!--
+  THE SELECT.
+
+  The handoff draws it as the text field with the filter's name in muted 12px
+  on the left, the chosen value next to it and a chevron on the right. A native
+  `<select>` under our chrome: the option list, the keyboard and the mobile
+  wheel are the browser's, so there is no menu to build and nothing to get
+  wrong on a phone.
+-->
+<template>
+  <label class="app-field" :class="{ 'app-field--compact': compact }">
+    <span v-if="label" class="app-field__label">{{ label }}</span>
+    <select
+      class="app-field__input"
+      :value="model"
+      :disabled="disabled"
+      @change="model = ($event.target as HTMLSelectElement).value"
+    >
+      <option v-for="opt in normalized" :key="opt.value" :value="opt.value">
+        {{ opt.title }}
+      </option>
+    </select>
+    <v-icon class="app-field__icon" icon="mdi-chevron-down" size="17" />
+  </label>
+</template>
+
+<script setup lang="ts">
+const model = defineModel({ type: String, default: "" });
+
+const props = defineProps({
+  label: { type: String, default: "" },
+  /** Strings, or the `{ title, value }` shape `v-select` already takes. */
+  items: { type: Array as PropType<any[]>, default: () => [] },
+  itemTitle: { type: String, default: "title" },
+  itemValue: { type: String, default: "value" },
+  compact: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+});
+
+const normalized = computed(() =>
+  props.items.map((item: any) =>
+    typeof item === "object" && item !== null
+      ? { title: item[props.itemTitle], value: item[props.itemValue] }
+      : { title: String(item), value: item }
+  )
+);
+</script>

package/components/CardToolbar.vue

@@ -0,0 +1,37 @@
+<!--
+  THE IN-CARD TOP ROW.
+
+  The design does NOT put a screen's tabs above its card - they are the card's
+  own first row, with the pagination on the opposite end of that same line, and
+  the tab underline meets the card's rule. Today those tabs sit in a
+  `v-toolbar`'s extension slot, which stacks them BELOW a separate bar and
+  costs a whole row of height.
+
+  Two shapes, both from the handoff: with tabs (`0 20px`, the tabs supply the
+  vertical padding) and without (`10px 14px`, a refresh button on the left).
+  This component only places things - the tabs, the count and the pager are
+  passed in and keep their own behaviour.
+-->
+<template>
+  <div class="app-toolbar" :class="{ 'app-toolbar--plain': !$slots.tabs }">
+    <div v-if="$slots.tabs" class="app-tabs" role="tablist">
+      <slot name="tabs" />
+    </div>
+
+    <slot name="left" />
+
+    <div class="app-toolbar__spacer" />
+
+    <div class="app-toolbar__right">
+      <span v-if="count" class="app-toolbar__count">{{ count }}</span>
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  /** The design's `1-1 of 1` range, printed as the screen already computes it. */
+  count: { type: String, default: "" },
+});
+</script>

package/components/MemberMain.vue

@@ -1,68 +1,65 @@
 <template>
-  <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
-        <v-btn
-          v-if="props.seatManagement !== 'index'"
-          class="text-none screen-btn-primary"
-          variant="flat"
+  <div>
+    <!--
+      THE DESIGN'S PAGE SCAFFOLD.
+
+      The handoff opens Members with a 22px title row and puts the tabs INSIDE
+      the card's first row, with the pagination on the far end of that same
+      line. Before this the screen had no title at all - the page name existed
+      only in the rail and the browser tab - and the tabs sat in a toolbar
+      extension, i.e. a second stacked bar below a mostly empty one.
+
+      Nothing here changes what the screen does: the same two tabs route the
+      same way, the same refresh and pager call the same `getAll()`, the same
+      `headers` prop drives the same columns, and the same menu carries the
+      same four actions behind the same permission conditions.
+    -->
+    <PageHeader :title="props.title">
+      <template v-if="props.seatManagement !== 'index'" #actions>
+        <AppButton
           :to="{
             name: props.seatManagement,
             params: { organization: props.orgId },
           }"
-          size="large"
         >
           Manage seats
-        </v-btn>
-      </v-row>
-    </v-col>
-
-    <v-col cols="12">
-      <v-card width="100%" variant="flat" class="table-card">
-        <v-toolbar
-          density="compact"
-          color="transparent"
-          class="table-card__toolbar"
-        >
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="getAll()">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-          </template>
-
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 table-card__range">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="getAll()"
-              />
-            </v-row>
-          </template>
-
-          <template #extension>
-            <v-tabs
-              v-model="selectedStatus"
-              color="primary"
-              :height="40"
-              @update:model-value="toRoute"
-              class="w-100"
-            >
-              <v-tab
-                v-for="(tab, i) in tabOptions"
-                :value="tab.status"
-                :key="i"
-                class="text-capitalize"
-              >
-                {{ tab.name }}
-              </v-tab>
-            </v-tabs>
-          </template>
-        </v-toolbar>
-
+        </AppButton>
+      </template>
+    </PageHeader>
+
+    <AppCard class="table-card">
+      <CardToolbar :count="pageRange">
+        <template #tabs>
+          <button
+            v-for="(tab, i) in tabOptions"
+            :key="i"
+            type="button"
+            role="tab"
+            class="app-tab"
+            :class="{ 'app-tab--active': selectedStatus === tab.status }"
+            :aria-selected="selectedStatus === tab.status"
+            @click="toRoute(tab.status)"
+          >
+            {{ tab.name }}
+          </button>
+        </template>
+
+        <template #right>
+          <AppButton
+            variant="icon"
+            icon="mdi-refresh"
+            aria-label="Refresh"
+            @click="getAll()"
+          />
+          <local-pagination
+            v-model="page"
+            :length="pages"
+            @update:value="getAll()"
+          />
+        </template>
+      </CardToolbar>
+
+      <div class="app-table-scroll">
         <v-data-table
           :headers="props.headers"
           :items="items"
@@ -76,6 +73,13 @@
           <template #item.nature="{ item }">
             {{ replaceMatch(item.nature, "_", " ") }}
           </template>
+          <!-- The role is a soft pill in the design, not a plain word. Same
+               text, same column, same source field. -->
+          <template #item.roleName="{ item }">
+            <StatusChip v-if="item.roleName" :dot="false" pill tone="info">
+              {{ item.roleName }}
+            </StatusChip>
+          </template>
           <template #item.dateInvited="{ item }">
             {{ formatDateInvited(item.dateInvited) }}
           </template>
@@ -92,8 +96,13 @@
               offset-y
               width="150"
             >
-              <template v-slot:activator="{ props }">
-                <v-icon v-bind="props">mdi-dots-vertical</v-icon>
+              <template v-slot:activator="{ props: menuProps }">
+                <AppButton
+                  v-bind="menuProps"
+                  variant="row"
+                  icon="mdi-dots-vertical"
+                  aria-label="Member actions"
+                />
               </template>
               <v-list>
                 <v-list-item
@@ -131,8 +140,9 @@
             </v-menu>
           </template>
         </v-data-table>
-      </v-card>
-    </v-col>
+      </div>
+    </AppCard>
+
     <ConfirmDialog
       v-model="confirmDialog"
       :loading="updateLoading"
@@ -235,11 +245,17 @@
         </v-card-text>
       </v-card>
     </v-dialog>
-  </v-row>
+  </div>
 </template>
 
 <script setup lang="ts">
 const props = defineProps({
+  /** The design's page title. Every app that mounts this screen calls it
+      Members; a caller that names it otherwise passes its own. */
+  title: {
+    type: String,
+    default: "Members",
+  },
   orgId: {
     type: String,
     default: "",

package/components/PageHeader.vue

@@ -0,0 +1,40 @@
+<!--
+  THE PAGE TITLE ROW.
+
+  The design opens EVERY screen with this row: the page's name at 22px/800,
+  and the screen's primary action on the right of the same line. The product
+  has never had it - the page name lived only in the browser tab and in the
+  navigation rail - which is the single most visible difference between the
+  staging site and the handoff.
+
+  It is a label and a slot. It fetches nothing, decides nothing and navigates
+  nowhere; the action passed into it is the screen's own button.
+-->
+<template>
+  <div class="app-page-head">
+    <div>
+      <h1 class="app-page-head__title">
+        <slot name="title">{{ title }}</slot>
+      </h1>
+
+      <!-- The design's second line: a location, a count, a date range. Only
+           drawn when a screen supplies one. -->
+      <div v-if="subtitle || $slots.subtitle" class="app-page-head__sub">
+        <v-icon v-if="subtitleIcon" :icon="subtitleIcon" size="15" />
+        <slot name="subtitle">{{ subtitle }}</slot>
+      </div>
+    </div>
+
+    <div v-if="$slots.actions" class="app-page-head__actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: { type: String, default: "" },
+  subtitle: { type: String, default: "" },
+  subtitleIcon: { type: String, default: "" },
+});
+</script>

package/components/StatusChip.vue

@@ -10,7 +10,10 @@
   translate or shorten a status.
 -->
 <template>
-  <span class="status-chip" :class="[toneClass, { 'status-chip--plain': !dot }]">
+  <span
+    class="status-chip"
+    :class="[toneClass, { 'status-chip--plain': !dot && !pill, 'status-chip--pill': pill }]"
+  >
     <span v-if="dot" class="status-chip__dot" />
     <!-- The slot is for the chips that already carried an icon next to their
          word - a padlock on "Closed - View Only" - so adopting the design's
@@ -27,8 +30,14 @@ const props = defineProps({
   status: { type: String, default: "" },
   /** What to PRINT, when that differs from the word being matched on. */
   label: { type: String, default: undefined },
-  /** The design's tag chips (pass IDs, role names) carry no leading dot. */
+  /** The design's tag chips (pass IDs, counts) carry no leading dot. */
   dot: { type: Boolean, default: true },
+  /**
+   * The handoff draws TWO dotless chips, and they are not the same shape: the
+   * 7px-radius 11px tag on a pass, and the 999px 11.5px pill a role name sits
+   * in on the Members screen. `pill` picks the second.
+   */
+  pill: { type: Boolean, default: false },
   /**
    * For the chips that are not a status WORD at all - a countdown, a rating, a
    * count - where the screen has already worked out the meaning and only needs
@@ -68,6 +77,12 @@ const toneClass = computed(() =>
   font-size: var(--fs-chip);
 }
 
+/* The role tag: `padding:3px 10px;border-radius:999px;font-size:11.5px`. */
+.status-chip--pill {
+  padding: 3px 10px;
+  font-size: var(--fs-chip);
+}
+
 .status-chip__dot {
   width: 6px;
   height: 6px;

package/package.json

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

package/plugins/vuetify.ts

@@ -54,6 +54,7 @@ import type { CookieOptions } from "#app";
 import "../assets/css/tokens.css";
 import "../assets/css/shell.css";
 import "../assets/css/screens.css";
+import "../assets/css/primitives.css";
 
 export default defineNuxtPlugin((app) => {
   /**