@genesislcap/foundation-ui 15.16.1-alpha-c7adcde.0 → 15.17.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +108 -16
- package/dist/dts/_common/alert-flash-clock.d.ts +31 -0
- package/dist/dts/_common/alert-flash-clock.d.ts.map +1 -0
- package/dist/dts/_common/index.d.ts +1 -0
- package/dist/dts/_common/index.d.ts.map +1 -1
- package/dist/dts/tab/tab.d.ts +13 -0
- package/dist/dts/tab/tab.d.ts.map +1 -1
- package/dist/esm/_common/alert-flash-clock.js +72 -0
- package/dist/esm/_common/index.js +1 -0
- package/dist/esm/tab/tab.js +26 -0
- package/dist/foundation-ui.api.json +145 -1
- package/dist/foundation-ui.d.ts +46 -0
- package/package.json +19 -19
|
@@ -1012,6 +1012,69 @@
|
|
|
1012
1012
|
}
|
|
1013
1013
|
]
|
|
1014
1014
|
},
|
|
1015
|
+
{
|
|
1016
|
+
"kind": "javascript-module",
|
|
1017
|
+
"path": "src/_common/alert-flash-clock.ts",
|
|
1018
|
+
"declarations": [
|
|
1019
|
+
{
|
|
1020
|
+
"kind": "variable",
|
|
1021
|
+
"name": "alertFlashPhaseProperty",
|
|
1022
|
+
"type": {
|
|
1023
|
+
"text": "string"
|
|
1024
|
+
},
|
|
1025
|
+
"default": "'--alert-flash-t'",
|
|
1026
|
+
"description": "Custom property carrying the shared alert flash phase, ramping 0 → 1 → 0.\n\nAlerting surfaces sample this rather than running animations of their own, because independent\nCSS animations start whenever their element started and drift apart. Registered as an\ninheritable `<number>` on the document, so it reaches into shadow trees — a grid row deep inside\na component's shadow DOM stays in step with a tab header in the light DOM.",
|
|
1027
|
+
"privacy": "public"
|
|
1028
|
+
},
|
|
1029
|
+
{
|
|
1030
|
+
"kind": "variable",
|
|
1031
|
+
"name": "alertFlashDurationProperty",
|
|
1032
|
+
"type": {
|
|
1033
|
+
"text": "string"
|
|
1034
|
+
},
|
|
1035
|
+
"default": "'--alert-flash-duration'",
|
|
1036
|
+
"description": "Custom property setting how long one flash cycle takes. Set it on `:root` to retime every\nalerting surface at once.",
|
|
1037
|
+
"privacy": "public"
|
|
1038
|
+
},
|
|
1039
|
+
{
|
|
1040
|
+
"kind": "function",
|
|
1041
|
+
"name": "installAlertFlashClock",
|
|
1042
|
+
"return": {
|
|
1043
|
+
"type": {
|
|
1044
|
+
"text": "void"
|
|
1045
|
+
}
|
|
1046
|
+
},
|
|
1047
|
+
"description": "Starts the document-level clock that alert flashes sample.\n\nSafe to call repeatedly and from any number of components — the first call does the work. Called\nautomatically by the components that flash, so apps only need this to start the clock earlier.\n\nDoes nothing where `CSS.registerProperty` or constructable stylesheets are unavailable, which\nleaves alerting surfaces on their static fallback colour rather than breaking them.",
|
|
1048
|
+
"privacy": "public"
|
|
1049
|
+
}
|
|
1050
|
+
],
|
|
1051
|
+
"exports": [
|
|
1052
|
+
{
|
|
1053
|
+
"kind": "js",
|
|
1054
|
+
"name": "alertFlashPhaseProperty",
|
|
1055
|
+
"declaration": {
|
|
1056
|
+
"name": "alertFlashPhaseProperty",
|
|
1057
|
+
"module": "src/_common/alert-flash-clock.ts"
|
|
1058
|
+
}
|
|
1059
|
+
},
|
|
1060
|
+
{
|
|
1061
|
+
"kind": "js",
|
|
1062
|
+
"name": "alertFlashDurationProperty",
|
|
1063
|
+
"declaration": {
|
|
1064
|
+
"name": "alertFlashDurationProperty",
|
|
1065
|
+
"module": "src/_common/alert-flash-clock.ts"
|
|
1066
|
+
}
|
|
1067
|
+
},
|
|
1068
|
+
{
|
|
1069
|
+
"kind": "js",
|
|
1070
|
+
"name": "installAlertFlashClock",
|
|
1071
|
+
"declaration": {
|
|
1072
|
+
"name": "installAlertFlashClock",
|
|
1073
|
+
"module": "src/_common/alert-flash-clock.ts"
|
|
1074
|
+
}
|
|
1075
|
+
}
|
|
1076
|
+
]
|
|
1077
|
+
},
|
|
1015
1078
|
{
|
|
1016
1079
|
"kind": "javascript-module",
|
|
1017
1080
|
"path": "src/_common/base-file-component.ts",
|
|
@@ -1396,6 +1459,14 @@
|
|
|
1396
1459
|
"package": "./affix-mixin"
|
|
1397
1460
|
}
|
|
1398
1461
|
},
|
|
1462
|
+
{
|
|
1463
|
+
"kind": "js",
|
|
1464
|
+
"name": "*",
|
|
1465
|
+
"declaration": {
|
|
1466
|
+
"name": "*",
|
|
1467
|
+
"package": "./alert-flash-clock"
|
|
1468
|
+
}
|
|
1469
|
+
},
|
|
1399
1470
|
{
|
|
1400
1471
|
"kind": "js",
|
|
1401
1472
|
"name": "*",
|
|
@@ -52138,26 +52209,27 @@
|
|
|
52138
52209
|
"kind": "class",
|
|
52139
52210
|
"description": "",
|
|
52140
52211
|
"name": "Tab",
|
|
52141
|
-
"
|
|
52142
|
-
"name": "FASTTab",
|
|
52143
|
-
"package": "@microsoft/fast-components"
|
|
52144
|
-
},
|
|
52145
|
-
"tagName": "%%prefix%%-tab",
|
|
52146
|
-
"customElement": true,
|
|
52147
|
-
"attributes": [
|
|
52212
|
+
"members": [
|
|
52148
52213
|
{
|
|
52214
|
+
"kind": "field",
|
|
52215
|
+
"name": "alert",
|
|
52149
52216
|
"type": {
|
|
52150
52217
|
"text": "boolean"
|
|
52151
52218
|
},
|
|
52152
|
-
"
|
|
52153
|
-
"
|
|
52154
|
-
"
|
|
52155
|
-
|
|
52156
|
-
|
|
52219
|
+
"default": "false",
|
|
52220
|
+
"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.",
|
|
52221
|
+
"privacy": "public"
|
|
52222
|
+
},
|
|
52223
|
+
{
|
|
52224
|
+
"kind": "method",
|
|
52225
|
+
"name": "alertChanged",
|
|
52226
|
+
"privacy": "protected",
|
|
52227
|
+
"return": {
|
|
52228
|
+
"type": {
|
|
52229
|
+
"text": "void"
|
|
52230
|
+
}
|
|
52157
52231
|
}
|
|
52158
|
-
}
|
|
52159
|
-
],
|
|
52160
|
-
"members": [
|
|
52232
|
+
},
|
|
52161
52233
|
{
|
|
52162
52234
|
"kind": "field",
|
|
52163
52235
|
"name": "disabled",
|
|
@@ -52282,7 +52354,27 @@
|
|
|
52282
52354
|
"module": "src/foundation-element/foundation-element.ts"
|
|
52283
52355
|
}
|
|
52284
52356
|
}
|
|
52285
|
-
]
|
|
52357
|
+
],
|
|
52358
|
+
"attributes": [
|
|
52359
|
+
{
|
|
52360
|
+
"type": {
|
|
52361
|
+
"text": "boolean"
|
|
52362
|
+
},
|
|
52363
|
+
"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.",
|
|
52364
|
+
"fieldName": "alert",
|
|
52365
|
+
"default": "false",
|
|
52366
|
+
"inheritedFrom": {
|
|
52367
|
+
"name": "Tab",
|
|
52368
|
+
"module": "src/tab/tab.ts"
|
|
52369
|
+
}
|
|
52370
|
+
}
|
|
52371
|
+
],
|
|
52372
|
+
"superclass": {
|
|
52373
|
+
"name": "FASTTab",
|
|
52374
|
+
"package": "@microsoft/fast-components"
|
|
52375
|
+
},
|
|
52376
|
+
"tagName": "%%prefix%%-tab",
|
|
52377
|
+
"customElement": true
|
|
52286
52378
|
},
|
|
52287
52379
|
{
|
|
52288
52380
|
"kind": "variable",
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Custom property carrying the shared alert flash phase, ramping 0 → 1 → 0.
|
|
3
|
+
*
|
|
4
|
+
* Alerting surfaces sample this rather than running animations of their own, because independent
|
|
5
|
+
* CSS animations start whenever their element started and drift apart. Registered as an
|
|
6
|
+
* inheritable `<number>` on the document, so it reaches into shadow trees — a grid row deep inside
|
|
7
|
+
* a component's shadow DOM stays in step with a tab header in the light DOM.
|
|
8
|
+
*
|
|
9
|
+
* @public
|
|
10
|
+
*/
|
|
11
|
+
export declare const alertFlashPhaseProperty = "--alert-flash-t";
|
|
12
|
+
/**
|
|
13
|
+
* Custom property setting how long one flash cycle takes. Set it on `:root` to retime every
|
|
14
|
+
* alerting surface at once.
|
|
15
|
+
*
|
|
16
|
+
* @public
|
|
17
|
+
*/
|
|
18
|
+
export declare const alertFlashDurationProperty = "--alert-flash-duration";
|
|
19
|
+
/**
|
|
20
|
+
* Starts the document-level clock that alert flashes sample.
|
|
21
|
+
*
|
|
22
|
+
* Safe to call repeatedly and from any number of components — the first call does the work. Called
|
|
23
|
+
* automatically by the components that flash, so apps only need this to start the clock earlier.
|
|
24
|
+
*
|
|
25
|
+
* Does nothing where `CSS.registerProperty` or constructable stylesheets are unavailable, which
|
|
26
|
+
* leaves alerting surfaces on their static fallback colour rather than breaking them.
|
|
27
|
+
*
|
|
28
|
+
* @public
|
|
29
|
+
*/
|
|
30
|
+
export declare function installAlertFlashClock(): void;
|
|
31
|
+
//# sourceMappingURL=alert-flash-clock.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert-flash-clock.d.ts","sourceRoot":"","sources":["../../../src/_common/alert-flash-clock.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,eAAO,MAAM,uBAAuB,oBAAoB,CAAC;AAEzD;;;;;GAKG;AACH,eAAO,MAAM,0BAA0B,2BAA2B,CAAC;AAMnE;;;;;;;;;;GAUG;AACH,wBAAgB,sBAAsB,IAAI,IAAI,CAwC7C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/_common/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/_common/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC"}
|
package/dist/dts/tab/tab.d.ts
CHANGED
|
@@ -3,6 +3,19 @@ import { Tab as FASTTab } from '@microsoft/fast-components';
|
|
|
3
3
|
* @tagname %%prefix%%-tab
|
|
4
4
|
*/
|
|
5
5
|
export declare class Tab extends FASTTab {
|
|
6
|
+
/**
|
|
7
|
+
* Draws sustained attention to the tab while background work is pending, for example
|
|
8
|
+
* while a grid behind an inactive tab still holds rows awaiting action.
|
|
9
|
+
*
|
|
10
|
+
* The design system supplies the visuals, retintable per app with `--tab-alert-color`. The flash
|
|
11
|
+
* samples a shared document-level clock, so every alerting surface — including grid rows — stays
|
|
12
|
+
* in phase; retime them all together with `--alert-flash-duration` on `:root`. Motion is
|
|
13
|
+
* suppressed under `prefers-reduced-motion`, which shows a static alert colour instead.
|
|
14
|
+
*
|
|
15
|
+
* @public
|
|
16
|
+
*/
|
|
17
|
+
alert: boolean;
|
|
18
|
+
protected alertChanged(): void;
|
|
6
19
|
}
|
|
7
20
|
export declare const foundationTabShadowOptions: ShadowRootInit;
|
|
8
21
|
export declare const defaultTabConfig: {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/tab/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/tab/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAM5D;;GAEG;AACH,qBAAa,GAAI,SAAQ,OAAO;IAC9B;;;;;;;;;;OAUG;IACwB,KAAK,EAAE,OAAO,CAAS;IAElD,SAAS,CAAC,YAAY,IAAI,IAAI;CAK/B;AAGD,eAAO,MAAM,0BAA0B,EAAE,cAA0B,CAAC;AAEpE,eAAO,MAAM,gBAAgB,IAAK,CAAC;AAEnC;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,mTAMxB,CAAC"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Custom property carrying the shared alert flash phase, ramping 0 → 1 → 0.
|
|
3
|
+
*
|
|
4
|
+
* Alerting surfaces sample this rather than running animations of their own, because independent
|
|
5
|
+
* CSS animations start whenever their element started and drift apart. Registered as an
|
|
6
|
+
* inheritable `<number>` on the document, so it reaches into shadow trees — a grid row deep inside
|
|
7
|
+
* a component's shadow DOM stays in step with a tab header in the light DOM.
|
|
8
|
+
*
|
|
9
|
+
* @public
|
|
10
|
+
*/
|
|
11
|
+
export const alertFlashPhaseProperty = '--alert-flash-t';
|
|
12
|
+
/**
|
|
13
|
+
* Custom property setting how long one flash cycle takes. Set it on `:root` to retime every
|
|
14
|
+
* alerting surface at once.
|
|
15
|
+
*
|
|
16
|
+
* @public
|
|
17
|
+
*/
|
|
18
|
+
export const alertFlashDurationProperty = '--alert-flash-duration';
|
|
19
|
+
const CLOCK_ANIMATION_NAME = 'alert-flash-clock';
|
|
20
|
+
let installed = false;
|
|
21
|
+
/**
|
|
22
|
+
* Starts the document-level clock that alert flashes sample.
|
|
23
|
+
*
|
|
24
|
+
* Safe to call repeatedly and from any number of components — the first call does the work. Called
|
|
25
|
+
* automatically by the components that flash, so apps only need this to start the clock earlier.
|
|
26
|
+
*
|
|
27
|
+
* Does nothing where `CSS.registerProperty` or constructable stylesheets are unavailable, which
|
|
28
|
+
* leaves alerting surfaces on their static fallback colour rather than breaking them.
|
|
29
|
+
*
|
|
30
|
+
* @public
|
|
31
|
+
*/
|
|
32
|
+
export function installAlertFlashClock() {
|
|
33
|
+
var _a;
|
|
34
|
+
if (installed || typeof document === 'undefined') {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
installed = true;
|
|
38
|
+
try {
|
|
39
|
+
// Registration must happen at document level; an @property rule inside a shadow tree is
|
|
40
|
+
// ignored, and an unregistered property cannot be animated because it has no type to
|
|
41
|
+
// interpolate.
|
|
42
|
+
CSS.registerProperty({
|
|
43
|
+
name: alertFlashPhaseProperty,
|
|
44
|
+
syntax: '<number>',
|
|
45
|
+
inherits: true,
|
|
46
|
+
initialValue: '0',
|
|
47
|
+
});
|
|
48
|
+
const sheet = new CSSStyleSheet();
|
|
49
|
+
sheet.replaceSync(`
|
|
50
|
+
@keyframes ${CLOCK_ANIMATION_NAME} {
|
|
51
|
+
0%, 100% { ${alertFlashPhaseProperty}: 0; }
|
|
52
|
+
50% { ${alertFlashPhaseProperty}: 1; }
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
:root {
|
|
56
|
+
animation: ${CLOCK_ANIMATION_NAME} var(${alertFlashDurationProperty}, 1s) ease-in-out
|
|
57
|
+
infinite;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@media (prefers-reduced-motion: reduce) {
|
|
61
|
+
:root {
|
|
62
|
+
animation: none;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
`);
|
|
66
|
+
document.adoptedStyleSheets = [...((_a = document.adoptedStyleSheets) !== null && _a !== void 0 ? _a : []), sheet];
|
|
67
|
+
}
|
|
68
|
+
catch (_b) {
|
|
69
|
+
// Older engines, or a property another bundle already registered. Either way the flash falls
|
|
70
|
+
// back to its static colour, which is a degraded alert rather than a missing one.
|
|
71
|
+
}
|
|
72
|
+
}
|
package/dist/esm/tab/tab.js
CHANGED
|
@@ -1,11 +1,37 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
1
2
|
import { Tab as FASTTab } from '@microsoft/fast-components';
|
|
3
|
+
import { attr } from '@microsoft/fast-element';
|
|
4
|
+
import { installAlertFlashClock } from '../_common/alert-flash-clock';
|
|
2
5
|
import { foundationTabStyles as styles } from './tab.styles';
|
|
3
6
|
import { foundationTabTemplate as template } from './tab.template';
|
|
4
7
|
/**
|
|
5
8
|
* @tagname %%prefix%%-tab
|
|
6
9
|
*/
|
|
7
10
|
export class Tab extends FASTTab {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments);
|
|
13
|
+
/**
|
|
14
|
+
* Draws sustained attention to the tab while background work is pending, for example
|
|
15
|
+
* while a grid behind an inactive tab still holds rows awaiting action.
|
|
16
|
+
*
|
|
17
|
+
* The design system supplies the visuals, retintable per app with `--tab-alert-color`. The flash
|
|
18
|
+
* samples a shared document-level clock, so every alerting surface — including grid rows — stays
|
|
19
|
+
* in phase; retime them all together with `--alert-flash-duration` on `:root`. Motion is
|
|
20
|
+
* suppressed under `prefers-reduced-motion`, which shows a static alert colour instead.
|
|
21
|
+
*
|
|
22
|
+
* @public
|
|
23
|
+
*/
|
|
24
|
+
this.alert = false;
|
|
25
|
+
}
|
|
26
|
+
alertChanged() {
|
|
27
|
+
if (this.alert) {
|
|
28
|
+
installAlertFlashClock();
|
|
29
|
+
}
|
|
30
|
+
}
|
|
8
31
|
}
|
|
32
|
+
__decorate([
|
|
33
|
+
attr({ mode: 'boolean' })
|
|
34
|
+
], Tab.prototype, "alert", void 0);
|
|
9
35
|
// explicitly declaring for extensibility
|
|
10
36
|
export const foundationTabShadowOptions = undefined;
|
|
11
37
|
export const defaultTabConfig = {};
|
|
@@ -2478,6 +2478,60 @@
|
|
|
2478
2478
|
"endIndex": 2
|
|
2479
2479
|
}
|
|
2480
2480
|
},
|
|
2481
|
+
{
|
|
2482
|
+
"kind": "Variable",
|
|
2483
|
+
"canonicalReference": "@genesislcap/foundation-ui!alertFlashDurationProperty:var",
|
|
2484
|
+
"docComment": "/**\n * Custom property setting how long one flash cycle takes. Set it on `:root` to retime every alerting surface at once.\n *\n * @public\n */\n",
|
|
2485
|
+
"excerptTokens": [
|
|
2486
|
+
{
|
|
2487
|
+
"kind": "Content",
|
|
2488
|
+
"text": "alertFlashDurationProperty = "
|
|
2489
|
+
},
|
|
2490
|
+
{
|
|
2491
|
+
"kind": "Content",
|
|
2492
|
+
"text": "\"--alert-flash-duration\""
|
|
2493
|
+
}
|
|
2494
|
+
],
|
|
2495
|
+
"fileUrlPath": "src/_common/alert-flash-clock.ts",
|
|
2496
|
+
"initializerTokenRange": {
|
|
2497
|
+
"startIndex": 1,
|
|
2498
|
+
"endIndex": 2
|
|
2499
|
+
},
|
|
2500
|
+
"isReadonly": true,
|
|
2501
|
+
"releaseTag": "Public",
|
|
2502
|
+
"name": "alertFlashDurationProperty",
|
|
2503
|
+
"variableTypeTokenRange": {
|
|
2504
|
+
"startIndex": 0,
|
|
2505
|
+
"endIndex": 0
|
|
2506
|
+
}
|
|
2507
|
+
},
|
|
2508
|
+
{
|
|
2509
|
+
"kind": "Variable",
|
|
2510
|
+
"canonicalReference": "@genesislcap/foundation-ui!alertFlashPhaseProperty:var",
|
|
2511
|
+
"docComment": "/**\n * Custom property carrying the shared alert flash phase, ramping 0 → 1 → 0.\n *\n * Alerting surfaces sample this rather than running animations of their own, because independent CSS animations start whenever their element started and drift apart. Registered as an inheritable `<number>` on the document, so it reaches into shadow trees — a grid row deep inside a component's shadow DOM stays in step with a tab header in the light DOM.\n *\n * @public\n */\n",
|
|
2512
|
+
"excerptTokens": [
|
|
2513
|
+
{
|
|
2514
|
+
"kind": "Content",
|
|
2515
|
+
"text": "alertFlashPhaseProperty = "
|
|
2516
|
+
},
|
|
2517
|
+
{
|
|
2518
|
+
"kind": "Content",
|
|
2519
|
+
"text": "\"--alert-flash-t\""
|
|
2520
|
+
}
|
|
2521
|
+
],
|
|
2522
|
+
"fileUrlPath": "src/_common/alert-flash-clock.ts",
|
|
2523
|
+
"initializerTokenRange": {
|
|
2524
|
+
"startIndex": 1,
|
|
2525
|
+
"endIndex": 2
|
|
2526
|
+
},
|
|
2527
|
+
"isReadonly": true,
|
|
2528
|
+
"releaseTag": "Public",
|
|
2529
|
+
"name": "alertFlashPhaseProperty",
|
|
2530
|
+
"variableTypeTokenRange": {
|
|
2531
|
+
"startIndex": 0,
|
|
2532
|
+
"endIndex": 0
|
|
2533
|
+
}
|
|
2534
|
+
},
|
|
2481
2535
|
{
|
|
2482
2536
|
"kind": "Class",
|
|
2483
2537
|
"canonicalReference": "@genesislcap/foundation-ui!Anchor:class",
|
|
@@ -53849,6 +53903,34 @@
|
|
|
53849
53903
|
"endIndex": 2
|
|
53850
53904
|
}
|
|
53851
53905
|
},
|
|
53906
|
+
{
|
|
53907
|
+
"kind": "Function",
|
|
53908
|
+
"canonicalReference": "@genesislcap/foundation-ui!installAlertFlashClock:function(1)",
|
|
53909
|
+
"docComment": "/**\n * Starts the document-level clock that alert flashes sample.\n *\n * Safe to call repeatedly and from any number of components — the first call does the work. Called automatically by the components that flash, so apps only need this to start the clock earlier.\n *\n * Does nothing where `CSS.registerProperty` or constructable stylesheets are unavailable, which leaves alerting surfaces on their static fallback colour rather than breaking them.\n *\n * @public\n */\n",
|
|
53910
|
+
"excerptTokens": [
|
|
53911
|
+
{
|
|
53912
|
+
"kind": "Content",
|
|
53913
|
+
"text": "export declare function installAlertFlashClock(): "
|
|
53914
|
+
},
|
|
53915
|
+
{
|
|
53916
|
+
"kind": "Content",
|
|
53917
|
+
"text": "void"
|
|
53918
|
+
},
|
|
53919
|
+
{
|
|
53920
|
+
"kind": "Content",
|
|
53921
|
+
"text": ";"
|
|
53922
|
+
}
|
|
53923
|
+
],
|
|
53924
|
+
"fileUrlPath": "src/_common/alert-flash-clock.ts",
|
|
53925
|
+
"returnTypeTokenRange": {
|
|
53926
|
+
"startIndex": 1,
|
|
53927
|
+
"endIndex": 2
|
|
53928
|
+
},
|
|
53929
|
+
"releaseTag": "Public",
|
|
53930
|
+
"overloadIndex": 1,
|
|
53931
|
+
"parameters": [],
|
|
53932
|
+
"name": "installAlertFlashClock"
|
|
53933
|
+
},
|
|
53852
53934
|
{
|
|
53853
53935
|
"kind": "Function",
|
|
53854
53936
|
"canonicalReference": "@genesislcap/foundation-ui!isAbsoluteUrl:function(1)",
|
|
@@ -71112,7 +71194,69 @@
|
|
|
71112
71194
|
"isAbstract": false,
|
|
71113
71195
|
"name": "Tab",
|
|
71114
71196
|
"preserveMemberOrder": false,
|
|
71115
|
-
"members": [
|
|
71197
|
+
"members": [
|
|
71198
|
+
{
|
|
71199
|
+
"kind": "Property",
|
|
71200
|
+
"canonicalReference": "@genesislcap/foundation-ui!Tab#alert:member",
|
|
71201
|
+
"docComment": "/**\n * Draws sustained attention to the tab while background work is pending, for example while a grid behind an inactive tab still holds rows awaiting action.\n *\n * The design system supplies the visuals, retintable per app with `--tab-alert-color`. The flash samples a shared document-level clock, so every alerting surface — including grid rows — stays in phase; retime them all together with `--alert-flash-duration` on `:root`. Motion is suppressed under `prefers-reduced-motion`, which shows a static alert colour instead.\n *\n * @public\n */\n",
|
|
71202
|
+
"excerptTokens": [
|
|
71203
|
+
{
|
|
71204
|
+
"kind": "Content",
|
|
71205
|
+
"text": "alert: "
|
|
71206
|
+
},
|
|
71207
|
+
{
|
|
71208
|
+
"kind": "Content",
|
|
71209
|
+
"text": "boolean"
|
|
71210
|
+
},
|
|
71211
|
+
{
|
|
71212
|
+
"kind": "Content",
|
|
71213
|
+
"text": ";"
|
|
71214
|
+
}
|
|
71215
|
+
],
|
|
71216
|
+
"isReadonly": false,
|
|
71217
|
+
"isOptional": false,
|
|
71218
|
+
"releaseTag": "Public",
|
|
71219
|
+
"name": "alert",
|
|
71220
|
+
"propertyTypeTokenRange": {
|
|
71221
|
+
"startIndex": 1,
|
|
71222
|
+
"endIndex": 2
|
|
71223
|
+
},
|
|
71224
|
+
"isStatic": false,
|
|
71225
|
+
"isProtected": false,
|
|
71226
|
+
"isAbstract": false
|
|
71227
|
+
},
|
|
71228
|
+
{
|
|
71229
|
+
"kind": "Method",
|
|
71230
|
+
"canonicalReference": "@genesislcap/foundation-ui!Tab#alertChanged:member(1)",
|
|
71231
|
+
"docComment": "",
|
|
71232
|
+
"excerptTokens": [
|
|
71233
|
+
{
|
|
71234
|
+
"kind": "Content",
|
|
71235
|
+
"text": "protected alertChanged(): "
|
|
71236
|
+
},
|
|
71237
|
+
{
|
|
71238
|
+
"kind": "Content",
|
|
71239
|
+
"text": "void"
|
|
71240
|
+
},
|
|
71241
|
+
{
|
|
71242
|
+
"kind": "Content",
|
|
71243
|
+
"text": ";"
|
|
71244
|
+
}
|
|
71245
|
+
],
|
|
71246
|
+
"isStatic": false,
|
|
71247
|
+
"returnTypeTokenRange": {
|
|
71248
|
+
"startIndex": 1,
|
|
71249
|
+
"endIndex": 2
|
|
71250
|
+
},
|
|
71251
|
+
"releaseTag": "Public",
|
|
71252
|
+
"isProtected": true,
|
|
71253
|
+
"overloadIndex": 1,
|
|
71254
|
+
"parameters": [],
|
|
71255
|
+
"isOptional": false,
|
|
71256
|
+
"isAbstract": false,
|
|
71257
|
+
"name": "alertChanged"
|
|
71258
|
+
}
|
|
71259
|
+
],
|
|
71116
71260
|
"extendsTokenRange": {
|
|
71117
71261
|
"startIndex": 1,
|
|
71118
71262
|
"endIndex": 2
|
package/dist/foundation-ui.d.ts
CHANGED
|
@@ -461,6 +461,26 @@ export declare class AiIndicator extends FoundationElement {
|
|
|
461
461
|
|
|
462
462
|
export declare type AIIndicatorState = 'available' | 'downloading' | 'downloadable' | 'unavailable' | 'server' | 'none';
|
|
463
463
|
|
|
464
|
+
/**
|
|
465
|
+
* Custom property setting how long one flash cycle takes. Set it on `:root` to retime every
|
|
466
|
+
* alerting surface at once.
|
|
467
|
+
*
|
|
468
|
+
* @public
|
|
469
|
+
*/
|
|
470
|
+
export declare const alertFlashDurationProperty = "--alert-flash-duration";
|
|
471
|
+
|
|
472
|
+
/**
|
|
473
|
+
* Custom property carrying the shared alert flash phase, ramping 0 → 1 → 0.
|
|
474
|
+
*
|
|
475
|
+
* Alerting surfaces sample this rather than running animations of their own, because independent
|
|
476
|
+
* CSS animations start whenever their element started and drift apart. Registered as an
|
|
477
|
+
* inheritable `<number>` on the document, so it reaches into shadow trees — a grid row deep inside
|
|
478
|
+
* a component's shadow DOM stays in step with a tab header in the light DOM.
|
|
479
|
+
*
|
|
480
|
+
* @public
|
|
481
|
+
*/
|
|
482
|
+
export declare const alertFlashPhaseProperty = "--alert-flash-t";
|
|
483
|
+
|
|
464
484
|
/**
|
|
465
485
|
* @tagname %%prefix%%-anchor
|
|
466
486
|
*/
|
|
@@ -5392,6 +5412,19 @@ export declare const INPUT_MIN_LENGTH = 3;
|
|
|
5392
5412
|
|
|
5393
5413
|
export declare const inputControls: ElementStyles;
|
|
5394
5414
|
|
|
5415
|
+
/**
|
|
5416
|
+
* Starts the document-level clock that alert flashes sample.
|
|
5417
|
+
*
|
|
5418
|
+
* Safe to call repeatedly and from any number of components — the first call does the work. Called
|
|
5419
|
+
* automatically by the components that flash, so apps only need this to start the clock earlier.
|
|
5420
|
+
*
|
|
5421
|
+
* Does nothing where `CSS.registerProperty` or constructable stylesheets are unavailable, which
|
|
5422
|
+
* leaves alerting surfaces on their static fallback colour rather than breaking them.
|
|
5423
|
+
*
|
|
5424
|
+
* @public
|
|
5425
|
+
*/
|
|
5426
|
+
export declare function installAlertFlashClock(): void;
|
|
5427
|
+
|
|
5395
5428
|
/**
|
|
5396
5429
|
* @beta
|
|
5397
5430
|
*/
|
|
@@ -7352,6 +7385,19 @@ declare type SystemHealthOverlayMode = (typeof SystemHealthOverlayMode)[keyof ty
|
|
|
7352
7385
|
* @tagname %%prefix%%-tab
|
|
7353
7386
|
*/
|
|
7354
7387
|
export declare class Tab extends Tab_2 {
|
|
7388
|
+
/**
|
|
7389
|
+
* Draws sustained attention to the tab while background work is pending, for example
|
|
7390
|
+
* while a grid behind an inactive tab still holds rows awaiting action.
|
|
7391
|
+
*
|
|
7392
|
+
* The design system supplies the visuals, retintable per app with `--tab-alert-color`. The flash
|
|
7393
|
+
* samples a shared document-level clock, so every alerting surface — including grid rows — stays
|
|
7394
|
+
* in phase; retime them all together with `--alert-flash-duration` on `:root`. Motion is
|
|
7395
|
+
* suppressed under `prefers-reduced-motion`, which shows a static alert colour instead.
|
|
7396
|
+
*
|
|
7397
|
+
* @public
|
|
7398
|
+
*/
|
|
7399
|
+
alert: boolean;
|
|
7400
|
+
protected alertChanged(): void;
|
|
7355
7401
|
}
|
|
7356
7402
|
|
|
7357
7403
|
/**
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@genesislcap/foundation-ui",
|
|
3
3
|
"description": "Genesis Foundation UI",
|
|
4
|
-
"version": "15.
|
|
4
|
+
"version": "15.17.1",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "SEE LICENSE IN license.txt",
|
|
7
7
|
"main": "dist/esm/index.js",
|
|
@@ -85,13 +85,13 @@
|
|
|
85
85
|
}
|
|
86
86
|
},
|
|
87
87
|
"devDependencies": {
|
|
88
|
-
"@genesislcap/foundation-testing": "15.
|
|
89
|
-
"@genesislcap/genx": "15.
|
|
90
|
-
"@genesislcap/rollup-builder": "15.
|
|
91
|
-
"@genesislcap/ts-builder": "15.
|
|
92
|
-
"@genesislcap/uvu-playwright-builder": "15.
|
|
93
|
-
"@genesislcap/vite-builder": "15.
|
|
94
|
-
"@genesislcap/webpack-builder": "15.
|
|
88
|
+
"@genesislcap/foundation-testing": "15.17.1",
|
|
89
|
+
"@genesislcap/genx": "15.17.1",
|
|
90
|
+
"@genesislcap/rollup-builder": "15.17.1",
|
|
91
|
+
"@genesislcap/ts-builder": "15.17.1",
|
|
92
|
+
"@genesislcap/uvu-playwright-builder": "15.17.1",
|
|
93
|
+
"@genesislcap/vite-builder": "15.17.1",
|
|
94
|
+
"@genesislcap/webpack-builder": "15.17.1",
|
|
95
95
|
"copyfiles": "^2.4.1"
|
|
96
96
|
},
|
|
97
97
|
"dependencies": {
|
|
@@ -100,16 +100,16 @@
|
|
|
100
100
|
"@fortawesome/free-regular-svg-icons": "^6.2.1",
|
|
101
101
|
"@fortawesome/free-solid-svg-icons": "^6.2.1",
|
|
102
102
|
"@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
|
|
103
|
-
"@genesislcap/expression-builder": "15.
|
|
104
|
-
"@genesislcap/foundation-ai": "15.
|
|
105
|
-
"@genesislcap/foundation-comms": "15.
|
|
106
|
-
"@genesislcap/foundation-criteria": "15.
|
|
107
|
-
"@genesislcap/foundation-errors": "15.
|
|
108
|
-
"@genesislcap/foundation-events": "15.
|
|
109
|
-
"@genesislcap/foundation-logger": "15.
|
|
110
|
-
"@genesislcap/foundation-notifications": "15.
|
|
111
|
-
"@genesislcap/foundation-user": "15.
|
|
112
|
-
"@genesislcap/foundation-utils": "15.
|
|
103
|
+
"@genesislcap/expression-builder": "15.17.1",
|
|
104
|
+
"@genesislcap/foundation-ai": "15.17.1",
|
|
105
|
+
"@genesislcap/foundation-comms": "15.17.1",
|
|
106
|
+
"@genesislcap/foundation-criteria": "15.17.1",
|
|
107
|
+
"@genesislcap/foundation-errors": "15.17.1",
|
|
108
|
+
"@genesislcap/foundation-events": "15.17.1",
|
|
109
|
+
"@genesislcap/foundation-logger": "15.17.1",
|
|
110
|
+
"@genesislcap/foundation-notifications": "15.17.1",
|
|
111
|
+
"@genesislcap/foundation-user": "15.17.1",
|
|
112
|
+
"@genesislcap/foundation-utils": "15.17.1",
|
|
113
113
|
"@microsoft/fast-colors": "5.3.1",
|
|
114
114
|
"@microsoft/fast-components": "2.30.6",
|
|
115
115
|
"@microsoft/fast-element": "1.14.0",
|
|
@@ -142,5 +142,5 @@
|
|
|
142
142
|
"require": "./dist/react.cjs"
|
|
143
143
|
}
|
|
144
144
|
},
|
|
145
|
-
"gitHead": "
|
|
145
|
+
"gitHead": "59a30fc5ff0900ae557f20018e796f82322394e2"
|
|
146
146
|
}
|