@genesislcap/foundation-zero 15.16.1-alpha-c7adcde.0 → 15.17.1

package/dist/custom-elements.json

@@ -41112,8 +41112,9 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information.",
-              "fieldName": "disabled",
+              "description": "Draws sustained attention to the tab while background work is pending, for example\nwhile a grid behind an inactive tab still holds rows awaiting action.\n\nThe design system supplies the visuals, retintable per app with `--tab-alert-color`. The flash\nsamples a shared document-level clock, so every alerting surface — including grid rows — stays\nin phase; retime them all together with `--alert-flash-duration` on `:root`. Motion is\nsuppressed under `prefers-reduced-motion`, which shows a static alert colour instead.",
+              "fieldName": "alert",
+              "default": "false",
               "inheritedFrom": {
                 "name": "Tab",
                 "module": "src/tab/tab.ts"
@@ -41121,6 +41122,34 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "alert",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws sustained attention to the tab while background work is pending, for example\nwhile a grid behind an inactive tab still holds rows awaiting action.\n\nThe design system supplies the visuals, retintable per app with `--tab-alert-color`. The flash\nsamples a shared document-level clock, so every alerting surface — including grid rows — stays\nin phase; retime them all together with `--alert-flash-duration` on `:root`. Motion is\nsuppressed under `prefers-reduced-motion`, which shows a static alert colour instead.",
+              "privacy": "public",
+              "inheritedFrom": {
+                "name": "Tab",
+                "module": "src/tab/tab.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "alertChanged",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "Tab",
+                "module": "src/tab/tab.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "disabled",

package/dist/dts/tab/tab.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.styles.d.ts","sourceRoot":"","sources":["../../../src/tab/tab.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;AAGpC,eAAO,MAAM,aAAa,GACxB,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,aAuBF,CAAC"}
+{"version":3,"file":"tab.styles.d.ts","sourceRoot":"","sources":["../../../src/tab/tab.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;AAGpC,eAAO,MAAM,aAAa,GACxB,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,aAwDF,CAAC"}

package/dist/esm/tab/tab.styles.js

@@ -1,4 +1,4 @@
-import { foundationTabStyles } from '@genesislcap/foundation-ui';
+import { alertFlashPhaseProperty, foundationTabStyles } from '@genesislcap/foundation-ui';
 import { neutralLayer2, neutralLayer4 } from '@microsoft/fast-components';
 import { css } from '@microsoft/fast-element';
 import { ColorHEX } from '../_common';
@@ -25,4 +25,37 @@ export const zeroTabStyles = (context, definition) => css `
     margin-right: 0;
     background-color: var(--zero-card-fill-color);
   }
+
+  /*
+   * Sustained alert, sampling the flash phase the platform animates on the document. Every
+   * alerting surface reads that one value, so tabs and grid rows brighten and fade together
+   * however long ago each of them started alerting.
+   *
+   * Mixing towards transparent and currentColor lets the tab fade back to its own resting
+   * colours, so selected and unselected tabs each return to the right background.
+   *
+   * !important because a :host rule loses to any app stylesheet that colours tabs from the light
+   * DOM, and an alert nobody can see is worse than no alert.
+   */
+  :host([alert]) {
+    background-color: color-mix(
+      in srgb,
+      var(--tab-alert-color, ${ColorHEX.error}) calc(var(${alertFlashPhaseProperty}, 0) * 100%),
+      transparent
+    ) !important;
+    color: color-mix(
+      in srgb,
+      contrast-color(var(--tab-alert-color, ${ColorHEX.error}))
+        calc(var(${alertFlashPhaseProperty}, 0) * 100%),
+      currentColor
+    ) !important;
+  }
+
+  /* Reduced motion stops the clock, leaving the phase at 0, so paint a steady alert instead. */
+  @media (prefers-reduced-motion: reduce) {
+    :host([alert]) {
+      background-color: var(--tab-alert-color, ${ColorHEX.error}) !important;
+      color: contrast-color(var(--tab-alert-color, ${ColorHEX.error})) !important;
+    }
+  }
 `;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-zero",
   "description": "Genesis Foundation Zero Design System",
-  "version": "15.16.1-alpha-c7adcde.0",
+  "version": "15.17.1",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -73,18 +73,18 @@
   },
   "devDependencies": {
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
-    "@genesislcap/genx": "15.16.1-alpha-c7adcde.0",
-    "@genesislcap/rollup-builder": "15.16.1-alpha-c7adcde.0",
-    "@genesislcap/ts-builder": "15.16.1-alpha-c7adcde.0",
-    "@genesislcap/uvu-playwright-builder": "15.16.1-alpha-c7adcde.0",
-    "@genesislcap/vite-builder": "15.16.1-alpha-c7adcde.0",
-    "@genesislcap/webpack-builder": "15.16.1-alpha-c7adcde.0"
+    "@genesislcap/genx": "15.17.1",
+    "@genesislcap/rollup-builder": "15.17.1",
+    "@genesislcap/ts-builder": "15.17.1",
+    "@genesislcap/uvu-playwright-builder": "15.17.1",
+    "@genesislcap/vite-builder": "15.17.1",
+    "@genesislcap/webpack-builder": "15.17.1"
   },
   "dependencies": {
-    "@genesislcap/foundation-comms": "15.16.1-alpha-c7adcde.0",
-    "@genesislcap/foundation-logger": "15.16.1-alpha-c7adcde.0",
-    "@genesislcap/foundation-ui": "15.16.1-alpha-c7adcde.0",
-    "@genesislcap/foundation-utils": "15.16.1-alpha-c7adcde.0",
+    "@genesislcap/foundation-comms": "15.17.1",
+    "@genesislcap/foundation-logger": "15.17.1",
+    "@genesislcap/foundation-ui": "15.17.1",
+    "@genesislcap/foundation-utils": "15.17.1",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
@@ -111,5 +111,5 @@
       "require": "./dist/react.cjs"
     }
   },
-  "gitHead": "b1ba27c22d12ecef45fd221039b016fd3ea62ba7"
+  "gitHead": "59a30fc5ff0900ae557f20018e796f82322394e2"
 }