@ni/nimble-components 29.1.5 → 29.1.6
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/all-components-bundle.js +80 -98
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +3575 -3602
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/banner/styles.js +5 -33
- package/dist/esm/banner/styles.js.map +1 -1
- package/dist/esm/banner/template.js +53 -48
- package/dist/esm/banner/template.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { BannerFail100DarkUi, Black75, Fail100LightUi, Information100DarkUi, Information100LightUi, Warning100DarkUi, Warning100LightUi, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
|
|
3
3
|
import { display } from '../utilities/style/display';
|
|
4
|
-
import {
|
|
4
|
+
import { applicationBackgroundColor, bodyFont, bodyFontColor, controlHeight, controlSlimHeight, smallPadding, standardPadding } from '../theme-provider/design-tokens';
|
|
5
5
|
import { Theme } from '../theme-provider/types';
|
|
6
6
|
import { hexToRgbaCssColor } from '../utilities/style/colors';
|
|
7
7
|
import { themeBehavior } from '../utilities/style/theme';
|
|
@@ -14,8 +14,6 @@ export const styles = css `
|
|
|
14
14
|
font-size: 12.8px;
|
|
15
15
|
align-items: top;
|
|
16
16
|
overflow: hidden;
|
|
17
|
-
color: ${White};
|
|
18
|
-
${iconColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.6)};
|
|
19
17
|
}
|
|
20
18
|
|
|
21
19
|
:host(:not([open])) {
|
|
@@ -23,6 +21,7 @@ export const styles = css `
|
|
|
23
21
|
}
|
|
24
22
|
|
|
25
23
|
.container {
|
|
24
|
+
color: ${bodyFontColor};
|
|
26
25
|
display: flex;
|
|
27
26
|
width: 100%;
|
|
28
27
|
}
|
|
@@ -33,6 +32,7 @@ export const styles = css `
|
|
|
33
32
|
justify-content: center;
|
|
34
33
|
margin-top: 8px;
|
|
35
34
|
flex: 0 0 auto;
|
|
35
|
+
opacity: 0.6;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
.text {
|
|
@@ -59,6 +59,8 @@ export const styles = css `
|
|
|
59
59
|
align-items: center;
|
|
60
60
|
justify-content: center;
|
|
61
61
|
align-self: flex-start;
|
|
62
|
+
margin-top: ${smallPadding};
|
|
63
|
+
${controlHeight.cssCustomProperty}: ${controlSlimHeight};
|
|
62
64
|
}
|
|
63
65
|
|
|
64
66
|
slot[name='action'] {
|
|
@@ -69,44 +71,14 @@ export const styles = css `
|
|
|
69
71
|
}
|
|
70
72
|
|
|
71
73
|
slot[name='action']::slotted(nimble-anchor) {
|
|
72
|
-
${linkFontColor.cssCustomProperty}: ${White};
|
|
73
|
-
${linkDisabledFontColor.cssCustomProperty}: ${White};
|
|
74
|
-
${linkActiveFontColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.6)};
|
|
75
74
|
font-size: 12.8px;
|
|
76
75
|
}
|
|
77
76
|
|
|
78
|
-
slot[name='action']::slotted(nimble-button) {
|
|
79
|
-
${controlHeight.cssCustomProperty}: ${controlSlimHeight};
|
|
80
|
-
${buttonLabelFontColor.cssCustomProperty}: ${White};
|
|
81
|
-
${fillSelectedColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.2)};
|
|
82
|
-
${borderHoverColor.cssCustomProperty}: ${White};
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
slot[name='action']::slotted(nimble-button[appearance='outline']) {
|
|
86
|
-
${actionRgbPartialColor.cssCustomProperty}: ${White}
|
|
87
|
-
}
|
|
88
|
-
|
|
89
77
|
.dismiss {
|
|
90
78
|
width: 48px;
|
|
91
79
|
display: flex;
|
|
92
80
|
justify-content: center;
|
|
93
81
|
}
|
|
94
|
-
|
|
95
|
-
.dismiss nimble-button {
|
|
96
|
-
${controlHeight.cssCustomProperty}: 16px;
|
|
97
|
-
${iconSize.cssCustomProperty}: 14px;
|
|
98
|
-
${buttonLabelFontColor.cssCustomProperty}: ${White};
|
|
99
|
-
${borderHoverColor.cssCustomProperty}: transparent;
|
|
100
|
-
${fillSelectedColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.2)};
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.dismiss nimble-button:focus-within {
|
|
104
|
-
outline: 2px solid ${White};
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.dismiss nimble-button:hover {
|
|
108
|
-
background: ${hexToRgbaCssColor(White, 0.2)};
|
|
109
|
-
}
|
|
110
82
|
`.withBehaviors(themeBehavior(Theme.light, css `
|
|
111
83
|
:host {
|
|
112
84
|
background: ${Black75};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/banner/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,mBAAmB,EACnB,OAAO,EACP,cAAc,EACd,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,EAChB,iBAAiB,EACjB,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/banner/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,mBAAmB,EACnB,OAAO,EACP,cAAc,EACd,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,EAChB,iBAAiB,EACjB,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;;;;;;;;;;iBAWP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA4BpB,gBAAgB;;;;kBAIR,aAAa;;;;;;sBAMT,YAAY;UACxB,aAAa,CAAC,iBAAiB,KAAK,iBAAiB;;;;;;uBAMxC,eAAe;;;;;;;;;;;;;CAarC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,OAAO;;;;8BAIP,cAAc;;;;8BAId,iBAAiB;;;;8BAIjB,qBAAqB;;SAE1C,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;8BAEmB,OAAO;;;;8BAIP,mBAAmB;;;;8BAInB,gBAAgB;;;;8BAIhB,oBAAoB;;SAEzC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,0BAA0B;;;;8BAI1B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAElD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n BannerFail100DarkUi,\n Black75,\n Fail100LightUi,\n Information100DarkUi,\n Information100LightUi,\n Warning100DarkUi,\n Warning100LightUi,\n White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\n\nimport {\n applicationBackgroundColor,\n bodyFont,\n bodyFontColor,\n controlHeight,\n controlSlimHeight,\n smallPadding,\n standardPadding\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { accessiblyHidden } from '../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n ${display('flex')}\n\n :host {\n font: ${bodyFont};\n font-size: 12.8px;\n align-items: top;\n overflow: hidden;\n }\n\n :host(:not([open])) {\n display: none;\n }\n\n .container {\n color: ${bodyFontColor};\n display: flex;\n width: 100%;\n }\n\n .icon {\n width: 48px;\n display: flex;\n justify-content: center;\n margin-top: 8px;\n flex: 0 0 auto;\n opacity: 0.6;\n }\n\n .text {\n display: inline;\n margin-top: 7px;\n margin-bottom: 7px;\n }\n\n slot[name='title'] {\n display: inline;\n font-weight: bold;\n padding-right: 8px;\n white-space: nowrap;\n }\n\n :host([title-hidden]) slot[name='title'] {\n ${accessiblyHidden}\n }\n\n .controls {\n height: ${controlHeight};\n margin-left: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n align-self: flex-start;\n margin-top: ${smallPadding};\n ${controlHeight.cssCustomProperty}: ${controlSlimHeight};\n }\n\n slot[name='action'] {\n display: flex;\n align-content: center;\n margin-left: ${standardPadding};\n white-space: nowrap;\n }\n\n slot[name='action']::slotted(nimble-anchor) {\n font-size: 12.8px;\n }\n\n .dismiss {\n width: 48px;\n display: flex;\n justify-content: center;\n }\n`.withBehaviors(\n themeBehavior(\n Theme.light,\n css`\n :host {\n background: ${Black75};\n }\n\n :host([severity='error']) {\n background: ${Fail100LightUi};\n }\n\n :host([severity='warning']) {\n background: ${Warning100LightUi};\n }\n\n :host([severity='information']) {\n background: ${Information100LightUi};\n }\n `\n ),\n themeBehavior(\n Theme.dark,\n css`\n :host {\n background: ${Black75};\n }\n\n :host([severity='error']) {\n background: ${BannerFail100DarkUi};\n }\n\n :host([severity='warning']) {\n background: ${Warning100DarkUi};\n }\n\n :host([severity='information']) {\n background: ${Information100DarkUi};\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n :host {\n background: ${applicationBackgroundColor};\n }\n\n .container {\n background: ${hexToRgbaCssColor(White, 0.3)};\n }\n `\n )\n);\n"]}
|
|
@@ -3,60 +3,65 @@ import { buttonTag } from '../button';
|
|
|
3
3
|
import { iconExclamationMarkTag } from '../icons/exclamation-mark';
|
|
4
4
|
import { iconInfoTag } from '../icons/info';
|
|
5
5
|
import { iconTriangleFilledTag } from '../icons/triangle-filled';
|
|
6
|
-
import {
|
|
6
|
+
import { iconTimesTag } from '../icons/times';
|
|
7
7
|
import { BannerSeverity } from './types';
|
|
8
8
|
import { popupIconErrorLabel, popupIconInformationLabel, popupDismissLabel, popupIconWarningLabel } from '../label-provider/core/label-tokens';
|
|
9
|
+
import { themeProviderTag } from '../theme-provider';
|
|
10
|
+
import { Theme } from '../theme-provider/types';
|
|
11
|
+
import { ButtonAppearance, ButtonAppearanceVariant } from '../button/types';
|
|
9
12
|
// prettier-ignore
|
|
10
13
|
export const template = html `
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
${when(x => x.severity === BannerSeverity.information, html `
|
|
42
|
-
<${iconInfoTag} role="img" aria-label="${x => popupIconInformationLabel.getValueFor(x)}"></${iconInfoTag}>
|
|
43
|
-
`)}
|
|
44
|
-
</div>
|
|
45
|
-
<div class="text">
|
|
46
|
-
<slot name="title" id="titleSlot"></slot>
|
|
47
|
-
<slot></slot>
|
|
48
|
-
</div>
|
|
49
|
-
<div class="controls">
|
|
50
|
-
<slot name="action"></slot>
|
|
51
|
-
<div class="dismiss">
|
|
52
|
-
${when(x => !x.preventDismiss, html `
|
|
53
|
-
<${buttonTag} appearance="ghost" content-hidden @click="${x => x.dismissBanner()}">
|
|
54
|
-
<${iconXmarkTag} slot="start"></${iconXmarkTag}>
|
|
55
|
-
${x => popupDismissLabel.getValueFor(x)}
|
|
56
|
-
</${buttonTag}>
|
|
14
|
+
<${themeProviderTag} theme="${Theme.color}">
|
|
15
|
+
<div class="container"
|
|
16
|
+
role="status"
|
|
17
|
+
aria-atomic="${x => x.ariaAtomic}"
|
|
18
|
+
aria-busy="${x => x.ariaBusy}"
|
|
19
|
+
aria-controls="${x => x.ariaControls}"
|
|
20
|
+
aria-current="${x => x.ariaCurrent}"
|
|
21
|
+
aria-describedby="${x => x.ariaDescribedby}"
|
|
22
|
+
aria-details="${x => x.ariaDetails}"
|
|
23
|
+
aria-disabled="${x => x.ariaDisabled}"
|
|
24
|
+
aria-errormessage="${x => x.ariaErrormessage}"
|
|
25
|
+
aria-expanded="${x => x.ariaExpanded}"
|
|
26
|
+
aria-flowto="${x => x.ariaFlowto}"
|
|
27
|
+
aria-haspopup="${x => x.ariaHaspopup}"
|
|
28
|
+
aria-hidden="${x => x.ariaHidden}"
|
|
29
|
+
aria-invalid="${x => x.ariaInvalid}"
|
|
30
|
+
aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
|
|
31
|
+
aria-label="${x => x.ariaLabel}"
|
|
32
|
+
aria-labelledby="titleSlot"
|
|
33
|
+
aria-live="${x => x.ariaLive}"
|
|
34
|
+
aria-owns="${x => x.ariaOwns}"
|
|
35
|
+
aria-relevant="${x => x.ariaRelevant}"
|
|
36
|
+
aria-roledescription="${x => x.ariaRoledescription}"
|
|
37
|
+
>
|
|
38
|
+
<div class="icon">
|
|
39
|
+
${when(x => x.severity === BannerSeverity.error, html `
|
|
40
|
+
<${iconExclamationMarkTag} role="img" aria-label="${x => popupIconErrorLabel.getValueFor(x)}"></${iconExclamationMarkTag}>
|
|
41
|
+
`)}
|
|
42
|
+
${when(x => x.severity === BannerSeverity.warning, html `
|
|
43
|
+
<${iconTriangleFilledTag} role="img" aria-label="${x => popupIconWarningLabel.getValueFor(x)}"></${iconTriangleFilledTag}>
|
|
57
44
|
`)}
|
|
45
|
+
${when(x => x.severity === BannerSeverity.information, html `
|
|
46
|
+
<${iconInfoTag} role="img" aria-label="${x => popupIconInformationLabel.getValueFor(x)}"></${iconInfoTag}>
|
|
47
|
+
`)}
|
|
48
|
+
</div>
|
|
49
|
+
<div class="text">
|
|
50
|
+
<slot name="title" id="titleSlot"></slot>
|
|
51
|
+
<slot></slot>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="controls">
|
|
54
|
+
<slot name="action"></slot>
|
|
55
|
+
<div class="dismiss">
|
|
56
|
+
${when(x => !x.preventDismiss, html `
|
|
57
|
+
<${buttonTag} appearance="${ButtonAppearance.ghost}" appearance-variant="${ButtonAppearanceVariant.primary}" content-hidden @click="${x => x.dismissBanner()}">
|
|
58
|
+
<${iconTimesTag} slot="start"></${iconTimesTag}>
|
|
59
|
+
${x => popupDismissLabel.getValueFor(x)}
|
|
60
|
+
</${buttonTag}>
|
|
61
|
+
`)}
|
|
62
|
+
</div>
|
|
58
63
|
</div>
|
|
59
64
|
</div>
|
|
60
|
-
|
|
65
|
+
</${themeProviderTag}>
|
|
61
66
|
`;
|
|
62
67
|
//# sourceMappingURL=template.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/banner/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EACH,mBAAmB,EACnB,yBAAyB,EACzB,iBAAiB,EACjB,qBAAqB,EACxB,MAAM,qCAAqC,CAAC;
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/banner/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, when } from '@microsoft/fast-element';\nimport type { Banner } from '.';\nimport { buttonTag } from '../button';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\nimport { iconInfoTag } from '../icons/info';\nimport { iconTriangleFilledTag } from '../icons/triangle-filled';\nimport { iconTimesTag } from '../icons/times';\nimport { BannerSeverity } from './types';\nimport {\n popupIconErrorLabel,\n popupIconInformationLabel,\n popupDismissLabel,\n popupIconWarningLabel\n} from '../label-provider/core/label-tokens';\nimport { themeProviderTag } from '../theme-provider';\nimport { Theme } from '../theme-provider/types';\nimport { ButtonAppearance, ButtonAppearanceVariant } from '../button/types';\n\n// prettier-ignore\nexport const template = html<Banner>`\n <${themeProviderTag} theme=\"${Theme.color}\">\n <div class=\"container\"\n role=\"status\"\n aria-atomic=\"${x => x.ariaAtomic}\"\n aria-busy=\"${x => x.ariaBusy}\"\n aria-controls=\"${x => x.ariaControls}\"\n aria-current=\"${x => x.ariaCurrent}\"\n aria-describedby=\"${x => x.ariaDescribedby}\"\n aria-details=\"${x => x.ariaDetails}\"\n aria-disabled=\"${x => x.ariaDisabled}\"\n aria-errormessage=\"${x => x.ariaErrormessage}\"\n aria-expanded=\"${x => x.ariaExpanded}\"\n aria-flowto=\"${x => x.ariaFlowto}\"\n aria-haspopup=\"${x => x.ariaHaspopup}\"\n aria-hidden=\"${x => x.ariaHidden}\"\n aria-invalid=\"${x => x.ariaInvalid}\"\n aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n aria-label=\"${x => x.ariaLabel}\"\n aria-labelledby=\"titleSlot\"\n aria-live=\"${x => x.ariaLive}\"\n aria-owns=\"${x => x.ariaOwns}\"\n aria-relevant=\"${x => x.ariaRelevant}\"\n aria-roledescription=\"${x => x.ariaRoledescription}\"\n >\n <div class=\"icon\">\n ${when(x => x.severity === BannerSeverity.error, html<Banner>`\n <${iconExclamationMarkTag} role=\"img\" aria-label=\"${x => popupIconErrorLabel.getValueFor(x)}\"></${iconExclamationMarkTag}>\n `)}\n ${when(x => x.severity === BannerSeverity.warning, html<Banner>`\n <${iconTriangleFilledTag} role=\"img\" aria-label=\"${x => popupIconWarningLabel.getValueFor(x)}\"></${iconTriangleFilledTag}>\n `)}\n ${when(x => x.severity === BannerSeverity.information, html<Banner>`\n <${iconInfoTag} role=\"img\" aria-label=\"${x => popupIconInformationLabel.getValueFor(x)}\"></${iconInfoTag}>\n `)}\n </div>\n <div class=\"text\">\n <slot name=\"title\" id=\"titleSlot\"></slot>\n <slot></slot>\n </div>\n <div class=\"controls\">\n <slot name=\"action\"></slot>\n <div class=\"dismiss\">\n ${when(x => !x.preventDismiss, html<Banner>`\n <${buttonTag} appearance=\"${ButtonAppearance.ghost}\" appearance-variant=\"${ButtonAppearanceVariant.primary}\" content-hidden @click=\"${x => x.dismissBanner()}\">\n <${iconTimesTag} slot=\"start\"></${iconTimesTag}>\n ${x => popupDismissLabel.getValueFor(x)}\n </${buttonTag}>\n `)}\n </div>\n </div>\n </div>\n </${themeProviderTag}>\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "29.1.
|
|
3
|
+
"version": "29.1.6",
|
|
4
4
|
"description": "Styled web components for the NI Nimble Design System",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss",
|