@7365admin1/layer-common 3.2.2-staging.182 → 3.2.2-staging.188

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 3.2.7
+
+### Patch Changes
+
+- 9c1803d: 08172026 Release latest version
+
 ## 3.2.6
 
 ### Patch Changes

package/assets/css/primitives.css

@@ -614,6 +614,28 @@ button.app-btn--err {
   opacity: 1;
 }
 
+/*
+ * A native `<select>`'s option list is painted by the BROWSER, not by the page.
+ * The control above sets `color`, and an `<option>` inherits it - but it gets
+ * no background of its own, so the browser paints its own popup behind the
+ * theme's ink. In dark mode that popup is white on Windows/Chrome, and the
+ * theme's near-white ink on it measures 1.14:1: the list reads as blank, with
+ * only the highlighted row legible. QA reported exactly that on two apps.
+ *
+ * Giving the option the card's own fill and ink is what makes the open list
+ * belong to the theme. `--card`/`--text` and not a literal, so it follows the
+ * `v-theme--*` subtree the select is actually in - a dialog that forces a
+ * theme included. Declared once here rather than per component, so every
+ * native select this layer renders is covered, in every consuming app.
+ *
+ * The FRAME around the list is browser chrome and is not ours to paint; a
+ * light strip may remain around the options in some browsers.
+ */
+select option {
+  background-color: var(--card);
+  color: var(--text);
+}
+
 /* The `trailing` slot's control - same muted weight as the leading icon, so a
    reveal toggle reads as field chrome rather than as a second action. */
 .app-field__trailing {

package/assets/css/screens.css

@@ -646,7 +646,16 @@
  */
 .table-card thead th {
   background: var(--thead) !important;
-  color: var(--muted) !important;
+  /*
+   * `--text2`, not the prototype's `--muted`. `--muted` on the header band
+   * measures 3.10:1 in light (3.24:1 where the band sits on a plain card) -
+   * below AA, and reported independently by two apps' QA runs. `--text2` is
+   * the design's SECONDARY text token: 9.22:1 light / 9.57:1 dark on the same
+   * band, while still sitting clearly below the primary ink the data rows use
+   * (16.52:1 / 13.77:1), so the header keeps reading as secondary to the data.
+   * The uppercase/800/11px treatment below is unchanged.
+   */
+  color: var(--text2) !important;
   font-size: var(--fs-table-head) !important;
   font-weight: var(--fw-table-head) !important;
   letter-spacing: var(--ls-table-head);

package/components/DashboardEmptyState.vue

@@ -1,10 +1,28 @@
+<!--
+  "No data to display" and "we could not fetch it" are not the same sentence.
+
+  This component drew the first one for both, because every dashboard request
+  defaulted a rejection to an empty list. `error` splits them: a genuine zero
+  keeps the neutral wording, a failed request says so in the error tone and
+  tells the reader the figure is missing rather than nil.
+-->
 <template>
   <div
     class="d-flex flex-column align-center justify-center text-center dashboard-empty"
+    :class="{ 'dashboard-empty--error': error }"
     :style="{ minHeight: compact ? '72px' : '140px', gap: '8px' }"
+    role="status"
   >
-    <v-icon icon="mdi-database-search-outline" size="28" />
-    <span class="text-caption font-weight-bold">No data to display</span>
+    <v-icon
+      :icon="error ? 'mdi-cloud-alert-outline' : 'mdi-database-search-outline'"
+      size="28"
+    />
+    <span class="text-caption font-weight-bold">
+      {{ error ? "Couldn't load this data" : "No data to display" }}
+    </span>
+    <span v-if="error" class="text-caption dashboard-empty__hint">
+      The request failed — this is not a zero. Refresh to try again.
+    </span>
   </div>
 </template>
 
@@ -14,6 +32,11 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  /** The request behind this panel failed - say so instead of showing "none". */
+  error: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
 
@@ -25,4 +48,16 @@ defineProps({
   font-family: var(--font-sans);
   color: var(--muted);
 }
+
+/* `--err` is the design's own error tone and is AA in both themes; the hint
+   line stays on `--text2` so the explanation is never the palest thing here
+   (a dimmed explanation is the one line that must stay readable). */
+.dashboard-empty--error {
+  color: var(--err);
+}
+
+.dashboard-empty__hint {
+  color: var(--text2);
+  max-width: 34ch;
+}
 </style>