@fluentui/web-components 3.0.0-beta.67 → 3.0.0-beta.68
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/CHANGELOG.md +11 -2
- package/dist/dts/menu/menu.d.ts +12 -0
- package/dist/esm/button/button.styles.js +4 -0
- package/dist/esm/button/button.styles.js.map +1 -1
- package/dist/esm/menu/menu.js +11 -1
- package/dist/esm/menu/menu.js.map +1 -1
- package/dist/esm/menu/menu.styles.js +26 -0
- package/dist/esm/menu/menu.styles.js.map +1 -1
- package/dist/esm/menu/menu.template.js +2 -1
- package/dist/esm/menu/menu.template.js.map +1 -1
- package/dist/web-components.d.ts +12 -0
- package/dist/web-components.js +8 -4
- package/dist/web-components.min.js +96 -96
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/web-components
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 07 Oct 2024 04:08:22 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [3.0.0-beta.68](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.68)
|
|
8
|
+
|
|
9
|
+
Mon, 07 Oct 2024 04:08:22 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.67..@fluentui/web-components_v3.0.0-beta.68)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- feat: adds split-button ([PR #32948](https://github.com/microsoft/fluentui/pull/32948) by jes@microsoft.com)
|
|
15
|
+
|
|
7
16
|
## [3.0.0-beta.67](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.67)
|
|
8
17
|
|
|
9
|
-
Fri, 04 Oct 2024 04:
|
|
18
|
+
Fri, 04 Oct 2024 04:09:02 GMT
|
|
10
19
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.66..@fluentui/web-components_v3.0.0-beta.67)
|
|
11
20
|
|
|
12
21
|
### Changes
|
package/dist/dts/menu/menu.d.ts
CHANGED
|
@@ -9,9 +9,11 @@ import { MenuList } from '../menu-list/menu-list.js';
|
|
|
9
9
|
* @attr open-on-context - Determines if the menu should open on right click.
|
|
10
10
|
* @attr close-on-scroll - Determines if the menu should close on scroll.
|
|
11
11
|
* @attr persist-on-item-click - Determines if the menu open state should persist on click of menu item.
|
|
12
|
+
* @attr split - Determines if the menu is in split state.
|
|
12
13
|
*
|
|
13
14
|
* @cssproperty --menu-max-height - The max-height of the menu.
|
|
14
15
|
*
|
|
16
|
+
* @slot primary-action - Slot for the primary action elements. Used when in `split` state.
|
|
15
17
|
* @slot trigger - Slot for the trigger elements.
|
|
16
18
|
* @slot - Default slot for the menu list.
|
|
17
19
|
*
|
|
@@ -60,6 +62,11 @@ export declare class Menu extends FASTElement {
|
|
|
60
62
|
* @public
|
|
61
63
|
*/
|
|
62
64
|
persistOnItemClick?: boolean;
|
|
65
|
+
/**
|
|
66
|
+
* Determines if the menu is in split state.
|
|
67
|
+
* @public
|
|
68
|
+
*/
|
|
69
|
+
split?: boolean;
|
|
63
70
|
/**
|
|
64
71
|
* Holds the slotted menu list.
|
|
65
72
|
* @public
|
|
@@ -70,6 +77,11 @@ export declare class Menu extends FASTElement {
|
|
|
70
77
|
* @public
|
|
71
78
|
*/
|
|
72
79
|
slottedTriggers: HTMLElement[];
|
|
80
|
+
/**
|
|
81
|
+
* Holds the primary slot element.
|
|
82
|
+
* @public
|
|
83
|
+
*/
|
|
84
|
+
primaryAction: HTMLSlotElement;
|
|
73
85
|
/**
|
|
74
86
|
* Defines whether the menu is open or not.
|
|
75
87
|
* @internal
|
|
@@ -77,6 +77,10 @@ export const baseButtonStyles = css `
|
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
:is([slot='end'], ::slotted([slot='end'])) {
|
|
80
|
+
flex-shrink: 0;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
:host(:not(${iconOnlyState})) :is([slot='end'], :host(:not(${iconOnlyState}))::slotted([slot='end'])) {
|
|
80
84
|
margin-inline-start: var(--icon-spacing);
|
|
81
85
|
}
|
|
82
86
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../src/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,yBAAyB,EACzB,2BAA2B,EAC3B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,0BAA0B,EAC1B,iBAAiB,EACjB,qBAAqB,EACrB,0BAA0B,EAC1B,4BAA4B,EAC5B,0BAA0B,EAC1B,+BAA+B,EAC/B,iCAAiC,EACjC,sBAAsB,EACtB,aAAa,EACb,cAAc,EACd,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,OAAO,EACP,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,aAAa,EACb,aAAa,EACb,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,EACX,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;IAC/B,OAAO,CAAC,aAAa,CAAC;;;sBAGJ,uBAAuB;;;;;;;;;;;;wBAYrB,uBAAuB;aAClC,uBAAuB;cACtB,eAAe,UAAU,mBAAmB;iBACzC,kBAAkB;;qBAEd,kBAAkB;iBACtB,eAAe;mBACb,cAAc;mBACd,kBAAkB;mBAClB,iBAAiB;2BACT,cAAc;;kCAEP,aAAa;;;;;;;;;;wBAUvB,4BAA4B;aACvC,4BAA4B;oBACrB,wBAAwB;;;;wBAIpB,8BAA8B;oBAClC,0BAA0B;aACjC,8BAA8B;;;;;oBAKvB,sBAAsB;eAC3B,gBAAgB,UAAU,sBAAsB;kBAC7C,OAAO,eAAe,iBAAiB;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../src/button/button.styles.ts"],"names":[],"mappings":"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"}
|
package/dist/esm/menu/menu.js
CHANGED
|
@@ -12,9 +12,11 @@ import { MenuItemRole } from '../menu-item/menu-item.options.js';
|
|
|
12
12
|
* @attr open-on-context - Determines if the menu should open on right click.
|
|
13
13
|
* @attr close-on-scroll - Determines if the menu should close on scroll.
|
|
14
14
|
* @attr persist-on-item-click - Determines if the menu open state should persist on click of menu item.
|
|
15
|
+
* @attr split - Determines if the menu is in split state.
|
|
15
16
|
*
|
|
16
17
|
* @cssproperty --menu-max-height - The max-height of the menu.
|
|
17
18
|
*
|
|
19
|
+
* @slot primary-action - Slot for the primary action elements. Used when in `split` state.
|
|
18
20
|
* @slot trigger - Slot for the trigger elements.
|
|
19
21
|
* @slot - Default slot for the menu list.
|
|
20
22
|
*
|
|
@@ -342,7 +344,9 @@ export class Menu extends FASTElement {
|
|
|
342
344
|
case keyTab:
|
|
343
345
|
if (this._open)
|
|
344
346
|
this.closeMenu();
|
|
345
|
-
if (e.shiftKey &&
|
|
347
|
+
if (e.shiftKey &&
|
|
348
|
+
e.composedPath()[0] !== this._trigger &&
|
|
349
|
+
e.composedPath()[0].assignedSlot !== this.primaryAction) {
|
|
346
350
|
this.focusTrigger();
|
|
347
351
|
}
|
|
348
352
|
else if (e.shiftKey) {
|
|
@@ -365,10 +369,16 @@ __decorate([
|
|
|
365
369
|
__decorate([
|
|
366
370
|
attr({ attribute: 'persist-on-item-click', mode: 'boolean' })
|
|
367
371
|
], Menu.prototype, "persistOnItemClick", void 0);
|
|
372
|
+
__decorate([
|
|
373
|
+
attr({ mode: 'boolean' })
|
|
374
|
+
], Menu.prototype, "split", void 0);
|
|
368
375
|
__decorate([
|
|
369
376
|
observable
|
|
370
377
|
], Menu.prototype, "slottedMenuList", void 0);
|
|
371
378
|
__decorate([
|
|
372
379
|
observable
|
|
373
380
|
], Menu.prototype, "slottedTriggers", void 0);
|
|
381
|
+
__decorate([
|
|
382
|
+
observable
|
|
383
|
+
], Menu.prototype, "primaryAction", void 0);
|
|
374
384
|
//# sourceMappingURL=menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/menu/menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEtF,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE
|
|
1
|
+
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/menu/menu.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '../utils/index.js';
|
|
3
|
+
import { colorNeutralStroke1, strokeWidthThin } from '../theme/design-tokens.js';
|
|
3
4
|
/** Menu styles
|
|
4
5
|
* @public
|
|
5
6
|
*/
|
|
@@ -27,5 +28,30 @@ export const styles = css `
|
|
|
27
28
|
::slotted([popover]:not(:popover-open)) {
|
|
28
29
|
display: none;
|
|
29
30
|
}
|
|
31
|
+
|
|
32
|
+
:host([split]) {
|
|
33
|
+
display: inline-flex;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
:host([split]) ::slotted([slot='primary-action']) {
|
|
37
|
+
border-inline-end: ${strokeWidthThin} solid ${colorNeutralStroke1};
|
|
38
|
+
border-start-end-radius: 0;
|
|
39
|
+
border-end-end-radius: 0;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* Keeps focus visible visuals above trigger slot*/
|
|
43
|
+
:host([split]) ::slotted([slot='primary-action']:focus-visible) {
|
|
44
|
+
z-index: 1;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
:host([split]) ::slotted([slot='primary-action'][appearance='primary']) {
|
|
48
|
+
border-inline-end: ${strokeWidthThin} solid white;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
:host([split]) ::slotted([slot='trigger']) {
|
|
52
|
+
border-inline-start: 0;
|
|
53
|
+
border-start-start-radius: 0;
|
|
54
|
+
border-end-start-radius: 0;
|
|
55
|
+
}
|
|
30
56
|
`;
|
|
31
57
|
//# sourceMappingURL=menu.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.styles.js","sourceRoot":"","sources":["../../../src/menu/menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"menu.styles.js","sourceRoot":"","sources":["../../../src/menu/menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA6BF,eAAe,UAAU,mBAAmB;;;;;;;;;;;yBAW5C,eAAe;;;;;;;;CAQvC,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { elements, html, slotted } from '@microsoft/fast-element';
|
|
1
|
+
import { elements, html, ref, slotted } from '@microsoft/fast-element';
|
|
2
2
|
export function menuTemplate() {
|
|
3
3
|
return html `
|
|
4
4
|
<template
|
|
@@ -8,6 +8,7 @@ export function menuTemplate() {
|
|
|
8
8
|
?persist-on-item-click="${x => x.persistOnItemClick}"
|
|
9
9
|
@keydown="${(x, c) => x.menuKeydownHandler(c.event)}"
|
|
10
10
|
>
|
|
11
|
+
<slot name="primary-action" ${ref('primaryAction')}></slot>
|
|
11
12
|
<slot name="trigger" ${slotted({ property: 'slottedTriggers', filter: elements() })}></slot>
|
|
12
13
|
<slot ${slotted({ property: 'slottedMenuList', filter: elements() })}></slot>
|
|
13
14
|
</template>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.template.js","sourceRoot":"","sources":["../../../src/menu/menu.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAuB,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"menu.template.js","sourceRoot":"","sources":["../../../src/menu/menu.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAuB,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAG5F,MAAM,UAAU,YAAY;IAC1B,OAAO,IAAI,CAAG;;wBAEQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;0BAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;0BACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;gCACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB;kBACvC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAsB,CAAC;;oCAEtC,GAAG,CAAC,eAAe,CAAC;6BAC3B,OAAO,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;cAC3E,OAAO,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;;GAEvE,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAA8B,YAAY,EAAE,CAAC"}
|
package/dist/web-components.d.ts
CHANGED
|
@@ -6836,9 +6836,11 @@ export declare type MediaQueryListListener = (this: MediaQueryList, ev?: MediaQu
|
|
|
6836
6836
|
* @attr open-on-context - Determines if the menu should open on right click.
|
|
6837
6837
|
* @attr close-on-scroll - Determines if the menu should close on scroll.
|
|
6838
6838
|
* @attr persist-on-item-click - Determines if the menu open state should persist on click of menu item.
|
|
6839
|
+
* @attr split - Determines if the menu is in split state.
|
|
6839
6840
|
*
|
|
6840
6841
|
* @cssproperty --menu-max-height - The max-height of the menu.
|
|
6841
6842
|
*
|
|
6843
|
+
* @slot primary-action - Slot for the primary action elements. Used when in `split` state.
|
|
6842
6844
|
* @slot trigger - Slot for the trigger elements.
|
|
6843
6845
|
* @slot - Default slot for the menu list.
|
|
6844
6846
|
*
|
|
@@ -6887,6 +6889,11 @@ export declare class Menu extends FASTElement {
|
|
|
6887
6889
|
* @public
|
|
6888
6890
|
*/
|
|
6889
6891
|
persistOnItemClick?: boolean;
|
|
6892
|
+
/**
|
|
6893
|
+
* Determines if the menu is in split state.
|
|
6894
|
+
* @public
|
|
6895
|
+
*/
|
|
6896
|
+
split?: boolean;
|
|
6890
6897
|
/**
|
|
6891
6898
|
* Holds the slotted menu list.
|
|
6892
6899
|
* @public
|
|
@@ -6897,6 +6904,11 @@ export declare class Menu extends FASTElement {
|
|
|
6897
6904
|
* @public
|
|
6898
6905
|
*/
|
|
6899
6906
|
slottedTriggers: HTMLElement[];
|
|
6907
|
+
/**
|
|
6908
|
+
* Holds the primary slot element.
|
|
6909
|
+
* @public
|
|
6910
|
+
*/
|
|
6911
|
+
primaryAction: HTMLSlotElement;
|
|
6900
6912
|
/**
|
|
6901
6913
|
* Defines whether the menu is open or not.
|
|
6902
6914
|
* @internal
|
package/dist/web-components.js
CHANGED
|
@@ -5168,7 +5168,7 @@ applyMixins(AnchorButton, StartEnd);
|
|
|
5168
5168
|
const baseButtonStyles = css`
|
|
5169
5169
|
${display("inline-flex")}
|
|
5170
5170
|
|
|
5171
|
-
:host{--icon-spacing:${spacingHorizontalSNudge};position:relative;contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}:is([slot='start'],::slotted([slot='start'])){margin-inline-end:var(--icon-spacing)}:is([slot='end'],::slotted([slot='end'])){margin-inline-start:var(--icon-spacing)}:host(${iconOnlyState}){min-width:32px;max-width:32px}:host(${smallState}){--icon-spacing:${spacingHorizontalXS};min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host(${smallState}${iconOnlyState}){min-width:24px;max-width:24px}:host(${largeState}){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${largeState}${iconOnlyState}){min-width:40px;max-width:40px}:host(${largeState}) ::slotted(svg){font-size:24px;height:24px;width:24px}:host(:is(${circularState},${circularState}:focus-visible)){border-radius:${borderRadiusCircular}}:host(:is(${squareState},${squareState}:focus-visible)){border-radius:${borderRadiusNone}}:host(${primaryState}){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host(${primaryState}:hover){background-color:${colorBrandBackgroundHover}}:host(${primaryState}:is(:hover,:hover:active)){border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host(${primaryState}:hover:active){background-color:${colorBrandBackgroundPressed}}:host(${primaryState}:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(${outlineState}){background-color:${colorTransparentBackground}}:host(${outlineState}:hover){background-color:${colorTransparentBackgroundHover}}:host(${outlineState}:hover:active){background-color:${colorTransparentBackgroundPressed}}:host(${subtleState}){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host(${subtleState}:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host(${subtleState}:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(${subtleState}:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host(${subtleState}:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host(${transparentState}){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host(${transparentState}:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host(${transparentState}:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host(:is(${transparentState},${transparentState}:is(:hover,:active))){border-color:transparent}`;
|
|
5171
|
+
:host{--icon-spacing:${spacingHorizontalSNudge};position:relative;contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}:is([slot='start'],::slotted([slot='start'])){margin-inline-end:var(--icon-spacing)}:is([slot='end'],::slotted([slot='end'])){flex-shrink:0}:host(:not(${iconOnlyState})) :is([slot='end'],:host(:not(${iconOnlyState}))::slotted([slot='end'])){margin-inline-start:var(--icon-spacing)}:host(${iconOnlyState}){min-width:32px;max-width:32px}:host(${smallState}){--icon-spacing:${spacingHorizontalXS};min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host(${smallState}${iconOnlyState}){min-width:24px;max-width:24px}:host(${largeState}){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${largeState}${iconOnlyState}){min-width:40px;max-width:40px}:host(${largeState}) ::slotted(svg){font-size:24px;height:24px;width:24px}:host(:is(${circularState},${circularState}:focus-visible)){border-radius:${borderRadiusCircular}}:host(:is(${squareState},${squareState}:focus-visible)){border-radius:${borderRadiusNone}}:host(${primaryState}){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host(${primaryState}:hover){background-color:${colorBrandBackgroundHover}}:host(${primaryState}:is(:hover,:hover:active)){border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host(${primaryState}:hover:active){background-color:${colorBrandBackgroundPressed}}:host(${primaryState}:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(${outlineState}){background-color:${colorTransparentBackground}}:host(${outlineState}:hover){background-color:${colorTransparentBackgroundHover}}:host(${outlineState}:hover:active){background-color:${colorTransparentBackgroundPressed}}:host(${subtleState}){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host(${subtleState}:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host(${subtleState}:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(${subtleState}:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host(${subtleState}:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host(${transparentState}){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host(${transparentState}:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host(${transparentState}:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host(:is(${transparentState},${transparentState}:is(:hover,:active))){border-color:transparent}`;
|
|
5172
5172
|
const styles$y = css`
|
|
5173
5173
|
${baseButtonStyles}
|
|
5174
5174
|
|
|
@@ -8533,7 +8533,7 @@ class Menu extends FASTElement {
|
|
|
8533
8533
|
break;
|
|
8534
8534
|
case keyTab:
|
|
8535
8535
|
if (this._open) this.closeMenu();
|
|
8536
|
-
if (e.shiftKey && e.composedPath()[0] !== this._trigger) {
|
|
8536
|
+
if (e.shiftKey && e.composedPath()[0] !== this._trigger && e.composedPath()[0].assignedSlot !== this.primaryAction) {
|
|
8537
8537
|
this.focusTrigger();
|
|
8538
8538
|
} else if (e.shiftKey) {
|
|
8539
8539
|
return true;
|
|
@@ -8559,16 +8559,20 @@ __decorateClass$d([attr({
|
|
|
8559
8559
|
attribute: "persist-on-item-click",
|
|
8560
8560
|
mode: "boolean"
|
|
8561
8561
|
})], Menu.prototype, "persistOnItemClick", 2);
|
|
8562
|
+
__decorateClass$d([attr({
|
|
8563
|
+
mode: "boolean"
|
|
8564
|
+
})], Menu.prototype, "split", 2);
|
|
8562
8565
|
__decorateClass$d([observable], Menu.prototype, "slottedMenuList", 2);
|
|
8563
8566
|
__decorateClass$d([observable], Menu.prototype, "slottedTriggers", 2);
|
|
8567
|
+
__decorateClass$d([observable], Menu.prototype, "primaryAction", 2);
|
|
8564
8568
|
|
|
8565
8569
|
const styles$g = css`
|
|
8566
8570
|
${display("inline-block")}
|
|
8567
8571
|
|
|
8568
|
-
::slotted([slot='trigger']){anchor-name:--menu-trigger}::slotted([popover]){inset-area:block-end span-inline-end;margin:0;max-height:var(--menu-max-height,auto);position-anchor:--menu-trigger;position-try-options:flip-block;position:absolute;z-index:1}::slotted([popover]:popover-open){inset:unset}::slotted([popover]:not(:popover-open)){display:none}`;
|
|
8572
|
+
::slotted([slot='trigger']){anchor-name:--menu-trigger}::slotted([popover]){inset-area:block-end span-inline-end;margin:0;max-height:var(--menu-max-height,auto);position-anchor:--menu-trigger;position-try-options:flip-block;position:absolute;z-index:1}::slotted([popover]:popover-open){inset:unset}::slotted([popover]:not(:popover-open)){display:none}:host([split]){display:inline-flex}:host([split]) ::slotted([slot='primary-action']){border-inline-end:${strokeWidthThin} solid ${colorNeutralStroke1};border-start-end-radius:0;border-end-end-radius:0}:host([split]) ::slotted([slot='primary-action']:focus-visible){z-index:1}:host([split]) ::slotted([slot='primary-action'][appearance='primary']){border-inline-end:${strokeWidthThin} solid white}:host([split]) ::slotted([slot='trigger']){border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}`;
|
|
8569
8573
|
|
|
8570
8574
|
function menuTemplate() {
|
|
8571
|
-
return html`<template ?open-on-hover="${x => x.openOnHover}" ?open-on-context="${x => x.openOnContext}" ?close-on-scroll="${x => x.closeOnScroll}" ?persist-on-item-click="${x => x.persistOnItemClick}" @keydown="${(x, c) => x.menuKeydownHandler(c.event)}"><slot name="trigger" ${slotted({
|
|
8575
|
+
return html`<template ?open-on-hover="${x => x.openOnHover}" ?open-on-context="${x => x.openOnContext}" ?close-on-scroll="${x => x.closeOnScroll}" ?persist-on-item-click="${x => x.persistOnItemClick}" @keydown="${(x, c) => x.menuKeydownHandler(c.event)}"><slot name="primary-action" ${ref("primaryAction")}></slot><slot name="trigger" ${slotted({
|
|
8572
8576
|
property: "slottedTriggers",
|
|
8573
8577
|
filter: elements()
|
|
8574
8578
|
})}></slot><slot ${slotted({
|