@fluentui/web-components 2.5.4 → 2.5.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/CHANGELOG.json +46 -1
- package/CHANGELOG.md +20 -2
- package/dist/dts/styles/focus.d.ts +13 -0
- package/dist/dts/styles/index.d.ts +1 -0
- package/dist/esm/accordion/accordion-item/accordion-item.styles.js +8 -10
- package/dist/esm/breadcrumb-item/breadcrumb-item.styles.js +6 -10
- package/dist/esm/checkbox/checkbox.styles.js +4 -8
- package/dist/esm/combobox/combobox.styles.js +17 -8
- package/dist/esm/data-grid/data-grid-cell.styles.js +6 -9
- package/dist/esm/flipper/flipper.styles.js +5 -6
- package/dist/esm/listbox/listbox.styles.js +3 -4
- package/dist/esm/listbox-option/listbox-option.styles.js +9 -6
- package/dist/esm/menu/menu.styles.js +1 -1
- package/dist/esm/menu-item/menu-item.styles.js +5 -9
- package/dist/esm/progress/progress/progress.styles.js +0 -1
- package/dist/esm/progress/progress-ring/progress-ring.styles.js +0 -1
- package/dist/esm/radio/radio.styles.js +4 -9
- package/dist/esm/select/select.styles.js +4 -12
- package/dist/esm/styles/focus.js +21 -0
- package/dist/esm/styles/index.js +1 -0
- package/dist/esm/styles/patterns/button.styles.js +13 -21
- package/dist/esm/styles/patterns/input.styles.js +1 -9
- package/dist/esm/switch/switch.styles.js +5 -17
- package/dist/esm/tabs/tab/tab.styles.js +4 -6
- package/dist/esm/text-area/text-area.stories.js +2 -2
- package/dist/esm/toolbar/toolbar.styles.js +4 -3
- package/dist/esm/tree-item/tree-item.styles.js +4 -14
- package/dist/esm/tree-view/tree-view.styles.js +0 -4
- package/dist/fluent-web-components.api.json +52 -0
- package/dist/web-components.d.ts +15 -0
- package/dist/web-components.js +88 -51
- package/dist/web-components.min.js +150 -139
- package/docs/api-report.md +6 -0
- package/package.json +2 -2
package/dist/web-components.js
CHANGED
|
@@ -6433,6 +6433,11 @@ class Accordion extends FoundationElement {
|
|
|
6433
6433
|
};
|
|
6434
6434
|
|
|
6435
6435
|
this.activeItemChange = event => {
|
|
6436
|
+
if (event.defaultPrevented || event.target !== event.currentTarget) {
|
|
6437
|
+
return;
|
|
6438
|
+
}
|
|
6439
|
+
|
|
6440
|
+
event.preventDefault();
|
|
6436
6441
|
const selectedItem = event.target;
|
|
6437
6442
|
this.activeid = selectedItem.getAttribute("id");
|
|
6438
6443
|
|
|
@@ -17332,6 +17337,7 @@ class Search$1 extends FormAssociatedSearch {
|
|
|
17332
17337
|
handleClearInput() {
|
|
17333
17338
|
this.value = "";
|
|
17334
17339
|
this.control.focus();
|
|
17340
|
+
this.handleChange();
|
|
17335
17341
|
}
|
|
17336
17342
|
/**
|
|
17337
17343
|
* Change event handler for inner control.
|
|
@@ -18804,6 +18810,10 @@ class Switch extends FormAssociatedSwitch {
|
|
|
18804
18810
|
*/
|
|
18805
18811
|
|
|
18806
18812
|
this.keypressHandler = e => {
|
|
18813
|
+
if (this.readOnly) {
|
|
18814
|
+
return;
|
|
18815
|
+
}
|
|
18816
|
+
|
|
18807
18817
|
switch (e.key) {
|
|
18808
18818
|
case keyEnter:
|
|
18809
18819
|
case keySpace:
|
|
@@ -23852,6 +23862,28 @@ const accordionStyles$1 = (context, definition) => css`
|
|
|
23852
23862
|
${display('flex')} :host{box-sizing:border-box;flex-direction:column;${typeRampBase}
|
|
23853
23863
|
color:${neutralForegroundRest};gap:calc(${designUnit} * 1px)}`;
|
|
23854
23864
|
|
|
23865
|
+
/**
|
|
23866
|
+
* Partial CSS for the focus treatment for most typical sized components like Button, Menu Item, etc.
|
|
23867
|
+
*
|
|
23868
|
+
* @public
|
|
23869
|
+
*/
|
|
23870
|
+
|
|
23871
|
+
const focusTreatmentBase = cssPartial`
|
|
23872
|
+
outline: calc(${focusStrokeWidth} * 1px) solid ${focusStrokeOuter};
|
|
23873
|
+
outline-offset: calc(${focusStrokeWidth} * -1px);
|
|
23874
|
+
`;
|
|
23875
|
+
/**
|
|
23876
|
+
* Partial CSS for the focus treatment for tighter components with spacing constraints, like Checkbox
|
|
23877
|
+
* and Radio, or plain text like Hypertext appearance Anchor or Breadcrumb Item.
|
|
23878
|
+
*
|
|
23879
|
+
* @public
|
|
23880
|
+
*/
|
|
23881
|
+
|
|
23882
|
+
const focusTreatmentTight = cssPartial`
|
|
23883
|
+
outline: calc(${focusStrokeWidth} * 1px) solid ${focusStrokeOuter};
|
|
23884
|
+
outline-offset: calc(${strokeWidth} * 1px);
|
|
23885
|
+
`;
|
|
23886
|
+
|
|
23855
23887
|
/**
|
|
23856
23888
|
* A formula to retrieve the control height.
|
|
23857
23889
|
* Use this as the value of any CSS property that
|
|
@@ -23877,8 +23909,9 @@ const neutralFillStealthActiveOnNeutralFillLayerRest = DesignToken.create('neutr
|
|
|
23877
23909
|
return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).active;
|
|
23878
23910
|
});
|
|
23879
23911
|
const accordionItemStyles$1 = (context, definition) => css`
|
|
23880
|
-
${display('flex')} :host{box-sizing:border-box;${typeRampBase};flex-direction:column;background:${neutralFillLayerRest};color:${neutralForegroundRest};border:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};border-radius:calc(${layerCornerRadius} * 1px)}.region{display:none;padding:calc(${designUnit} * 2 * 1px);background:${neutralFillLayerAltRest}}.heading{display:grid;position:relative;grid-template-columns:auto 1fr auto auto;align-items:center}.button{appearance:none;border:none;background:none;grid-column:2;grid-row:1;outline:none;margin:calc(${designUnit} * 3 * 1px) 0;padding:0 calc(${designUnit} * 2 * 1px);text-align:left;color:inherit;cursor:pointer;font:inherit}.button::before{content:'';position:absolute;top:
|
|
23881
|
-
|
|
23912
|
+
${display('flex')} :host{box-sizing:border-box;${typeRampBase};flex-direction:column;background:${neutralFillLayerRest};color:${neutralForegroundRest};border:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};border-radius:calc(${layerCornerRadius} * 1px)}.region{display:none;padding:calc(${designUnit} * 2 * 1px);background:${neutralFillLayerAltRest}}.heading{display:grid;position:relative;grid-template-columns:auto 1fr auto auto;align-items:center}.button{appearance:none;border:none;background:none;grid-column:2;grid-row:1;outline:none;margin:calc(${designUnit} * 3 * 1px) 0;padding:0 calc(${designUnit} * 2 * 1px);text-align:left;color:inherit;cursor:pointer;font:inherit}.button::before{content:'';position:absolute;top:calc(${strokeWidth} * -1px);left:calc(${strokeWidth} * -1px);right:calc(${strokeWidth} * -1px);bottom:calc(${strokeWidth} * -1px);cursor:pointer}.button:${focusVisible}::before{${focusTreatmentBase}
|
|
23913
|
+
border-radius:calc(${layerCornerRadius} * 1px)}:host(.expanded) .button:${focusVisible}::before{border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.expanded) .region{display:block;border-top:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};border-bottom-left-radius:calc((${layerCornerRadius} - ${strokeWidth}) * 1px);border-bottom-right-radius:calc((${layerCornerRadius} - ${strokeWidth}) * 1px)}.icon{display:flex;align-items:center;justify-content:center;grid-column:4;pointer-events:none;background:${neutralFillStealthRestOnNeutralFillLayerRest};border-radius:calc(${controlCornerRadius} * 1px);fill:currentcolor;width:calc(${heightNumber} * 1px);height:calc(${heightNumber} * 1px);margin:calc(${designUnit} * 2 * 1px)}.heading:hover .icon{background:${neutralFillStealthHoverOnNeutralFillLayerRest}}.heading:active .icon{background:${neutralFillStealthActiveOnNeutralFillLayerRest}}slot[name='collapsed-icon']{display:flex}:host(.expanded) slot[name='collapsed-icon']{display:none}slot[name='expanded-icon']{display:none}:host(.expanded) slot[name='expanded-icon']{display:flex}.start{display:flex;align-items:center;padding-inline-start:calc(${designUnit} * 2 * 1px);justify-content:center;grid-column:1}.end{display:flex;align-items:center;justify-content:center;grid-column:3}.icon,.start,.end{position:relative}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
23914
|
+
.button:${focusVisible}::before{outline-color:${SystemColors.Highlight}}.icon{fill:${SystemColors.ButtonText}}`));
|
|
23882
23915
|
|
|
23883
23916
|
/**
|
|
23884
23917
|
* The Fluent Accordion Item Element. Implements {@link @microsoft/fast-foundation#AccordionItem},
|
|
@@ -24145,22 +24178,23 @@ const elevationShadowDialog = DesignToken.create('elevation-shadow-dialog').with
|
|
|
24145
24178
|
*/
|
|
24146
24179
|
|
|
24147
24180
|
const baseButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css`
|
|
24148
|
-
${display('inline-flex')} :host{position:relative;box-sizing:border-box
|
|
24149
|
-
height:calc(${heightNumber} * 1px);min-width:calc(${heightNumber} * 1px);color:${neutralForegroundRest};border-radius:calc(${controlCornerRadius} * 1px);fill:currentcolor;cursor:pointer}:host .control{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlRest};border:calc(${strokeWidth} * 1px) solid transparent;flex-grow:1;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;padding:0 calc((10 + (${designUnit} * 2 * ${density})) * 1px);white-space:nowrap;outline:none;text-decoration:none;color:inherit;border-radius:inherit;fill:inherit;cursor:inherit;font-family:inherit}.control,.end,.start{font:inherit}.control.icon-only{padding:0;line-height:0}:host .control${interactivitySelector}:hover{background:padding-box linear-gradient(${neutralFillHover},${neutralFillHover}),border-box ${neutralStrokeControlHover}}:host .control${interactivitySelector}:active{background:padding-box linear-gradient(${neutralFillActive},${neutralFillActive}),border-box ${neutralStrokeControlActive}}:host .control:${focusVisible}{
|
|
24150
|
-
:host .control{background:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonText};color:${SystemColors.ButtonText};fill:currentcolor}:host(:not([disabled])) .control:hover,:host .control${interactivitySelector}:hover,.control${interactivitySelector}:hover{forced-color-adjust:none;background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}.control:${focusVisible},:host .control:${focusVisible},:host(:${focusVisible}) .control{forced-color-adjust:none;background:${SystemColors.ButtonFace};
|
|
24181
|
+
${display('inline-flex')} :host{position:relative;box-sizing:border-box;${typeRampBase}
|
|
24182
|
+
height:calc(${heightNumber} * 1px);min-width:calc(${heightNumber} * 1px);color:${neutralForegroundRest};border-radius:calc(${controlCornerRadius} * 1px);fill:currentcolor;cursor:pointer}:host .control{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlRest};border:calc(${strokeWidth} * 1px) solid transparent;flex-grow:1;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;padding:0 calc((10 + (${designUnit} * 2 * ${density})) * 1px);white-space:nowrap;outline:none;text-decoration:none;color:inherit;border-radius:inherit;fill:inherit;cursor:inherit;font-family:inherit}.control,.end,.start{font:inherit}.control.icon-only{padding:0;line-height:0}:host .control${interactivitySelector}:hover{background:padding-box linear-gradient(${neutralFillHover},${neutralFillHover}),border-box ${neutralStrokeControlHover}}:host .control${interactivitySelector}:active{background:padding-box linear-gradient(${neutralFillActive},${neutralFillActive}),border-box ${neutralStrokeControlActive}}:host .control:${focusVisible}{${focusTreatmentBase}}:host .control${nonInteractivitySelector}{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeRest}}.control::-moz-focus-inner{border:0}.content{pointer-events:none}.start,.end{display:flex;pointer-events:none}.start{margin-inline-end:11px}.end{margin-inline-start:11px}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
24183
|
+
:host .control{background:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonText};color:${SystemColors.ButtonText};fill:currentcolor}:host(:not([disabled])) .control:hover,:host .control${interactivitySelector}:hover,.control${interactivitySelector}:hover{forced-color-adjust:none;background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}.control:${focusVisible},:host .control:${focusVisible},:host(:${focusVisible}) .control{forced-color-adjust:none;background:${SystemColors.ButtonFace};outline-color:${SystemColors.Highlight}}:host([href]) .control{background:${SystemColors.ButtonFace};border-color:${SystemColors.LinkText};color:${SystemColors.LinkText};fill:currentcolor}:host([href]) .control:hover,:host(.neutral[href]) .control:hover{background:${SystemColors.LinkText};border-color:${SystemColors.LinkText} !important;color:${SystemColors.HighlightText};fill:currentcolor}:host([href]) .control:${focusVisible}{forced-color-adjust:none;outline-color:${SystemColors.LinkText}}`));
|
|
24151
24184
|
/**
|
|
24152
24185
|
* @internal
|
|
24153
24186
|
*/
|
|
24154
24187
|
|
|
24155
24188
|
const AccentButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css`
|
|
24156
|
-
:host .control{background:padding-box linear-gradient(${accentFillRest},${accentFillRest}),border-box ${accentStrokeControlRest};color:${foregroundOnAccentRest}}:host .control${interactivitySelector}:hover{background:padding-box linear-gradient(${accentFillHover},${accentFillHover}),border-box ${accentStrokeControlHover};color:${foregroundOnAccentHover}}:host .control${interactivitySelector}:active{background:padding-box linear-gradient(${accentFillActive},${accentFillActive}),border-box ${accentStrokeControlActive};color:${foregroundOnAccentActive}}:host .control:${focusVisible}{
|
|
24157
|
-
|
|
24189
|
+
:host .control{background:padding-box linear-gradient(${accentFillRest},${accentFillRest}),border-box ${accentStrokeControlRest};color:${foregroundOnAccentRest}}:host .control${interactivitySelector}:hover{background:padding-box linear-gradient(${accentFillHover},${accentFillHover}),border-box ${accentStrokeControlHover};color:${foregroundOnAccentHover}}:host .control${interactivitySelector}:active{background:padding-box linear-gradient(${accentFillActive},${accentFillActive}),border-box ${accentStrokeControlActive};color:${foregroundOnAccentActive}}:host .control:${focusVisible}{${focusTreatmentBase}
|
|
24190
|
+
box-shadow:0 0 0 calc(((${focusStrokeWidth} + ${strokeWidth}) - ${strokeWidth}) * 1px) ${focusStrokeInner} inset !important}:host .control${nonInteractivitySelector}{background:${accentFillRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
24191
|
+
:host .control{forced-color-adjust:none;background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host .control${interactivitySelector}:hover,:host .control${interactivitySelector}:active{background:${SystemColors.HighlightText};border-color:${SystemColors.Highlight};color:${SystemColors.Highlight}}:host .control:${focusVisible}{background:${SystemColors.Highlight};outline-color:${SystemColors.Highlight};box-shadow:0 0 0 calc(((${focusStrokeWidth} + ${strokeWidth}) - ${strokeWidth}) * 1px) ${SystemColors.HighlightText} inset !important}:host([href]) .control{background:${SystemColors.LinkText};color:${SystemColors.HighlightText}}:host([href]) .control:hover{background:${SystemColors.ButtonFace};border-color:${SystemColors.LinkText};color:${SystemColors.LinkText};fill:currentcolor}:host([href]) .control:${focusVisible}{background:${SystemColors.LinkText};outline-color:${SystemColors.LinkText};box-shadow:0 0 0 calc(((${focusStrokeWidth} + ${strokeWidth}) - ${strokeWidth}) * 1px) ${SystemColors.HighlightText} inset !important;color:${SystemColors.HighlightText};fill:currentcolor}`));
|
|
24158
24192
|
/**
|
|
24159
24193
|
* @internal
|
|
24160
24194
|
*/
|
|
24161
24195
|
|
|
24162
24196
|
const HypertextStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css`
|
|
24163
|
-
:host{height:auto;font-family:inherit;font-size:inherit;line-height:inherit;min-width:0}:host .control{display:inline;padding:0;background:transparent;border:none;box-shadow:none;line-height:1;text-decoration:underline 1px}:host .control:not([href]){background:transparent}:host .control${interactivitySelector}{background:transparent;color:${accentForegroundRest}}:host .control${interactivitySelector}:hover{background:transparent;color:${accentForegroundHover};text-decoration:none}:host .control${interactivitySelector}:active{background:transparent;color:${accentForegroundActive};text-decoration:none}:host .control:${focusVisible}{
|
|
24197
|
+
:host{height:auto;font-family:inherit;font-size:inherit;line-height:inherit;min-width:0}:host .control{display:inline;padding:0;background:transparent;border:none;box-shadow:none;line-height:1;text-decoration:underline 1px}:host .control:not([href]){background:transparent}:host .control${interactivitySelector}{background:transparent;color:${accentForegroundRest}}:host .control${interactivitySelector}:hover{background:transparent;color:${accentForegroundHover};text-decoration:none}:host .control${interactivitySelector}:active{background:transparent;color:${accentForegroundActive};text-decoration:none}:host .control:${focusVisible}{${focusTreatmentTight}}:host .control${nonInteractivitySelector}{background:transparent}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
24164
24198
|
:host .control${interactivitySelector}:hover{color:${SystemColors.Highlight};fill:currentcolor}:host .control:${focusVisible}{color:${SystemColors.LinkText}}`));
|
|
24165
24199
|
/**
|
|
24166
24200
|
* @internal
|
|
@@ -24168,21 +24202,21 @@ const HypertextStyles = (context, definition, interactivitySelector = '', nonInt
|
|
|
24168
24202
|
|
|
24169
24203
|
const LightweightButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css`
|
|
24170
24204
|
:host{color:${accentForegroundRest}}:host .control{background:${neutralFillStealthRest}}:host .control${interactivitySelector}:hover{background:${neutralFillStealthHover};color:${accentForegroundHover}}:host .control${interactivitySelector}:active{background:${neutralFillStealthActive};color:${accentForegroundActive}}:host .control${nonInteractivitySelector}{background:${neutralFillStealthRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
24171
|
-
:host .control{border-color:${SystemColors.ButtonFace};color:${SystemColors.ButtonText}}:host .control${interactivitySelector}:hover,:host .control${interactivitySelector}:active,:host .control:${focusVisible}{border-color:${SystemColors.Highlight};background:${SystemColors.Highlight};
|
|
24205
|
+
:host .control{border-color:${SystemColors.ButtonFace};color:${SystemColors.ButtonText}}:host .control${interactivitySelector}:hover,:host .control${interactivitySelector}:active,:host .control:${focusVisible}{border-color:${SystemColors.Highlight};background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host([href]) .control{border-color:${SystemColors.ButtonFace};color:${SystemColors.LinkText}}:host([href]) .control:hover,:host([href]) .control:${focusVisible}{background:${SystemColors.ButtonFace};color:${SystemColors.LinkText}}`));
|
|
24172
24206
|
/**
|
|
24173
24207
|
* @internal
|
|
24174
24208
|
*/
|
|
24175
24209
|
|
|
24176
24210
|
const OutlineButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css`
|
|
24177
24211
|
:host .control{background:transparent !important;border-color:${neutralStrokeRest}}:host .control${interactivitySelector}:hover{border-color:${neutralStrokeHover}}:host .control${interactivitySelector}:active{border-color:${neutralStrokeActive}}:host .control${nonInteractivitySelector}{background:transparent !important;border-color:${neutralStrokeRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
24178
|
-
:host .control${nonInteractivitySelector}{border-color:${SystemColors.ButtonText}}:host .control${interactivitySelector}:hover{border-color:${SystemColors.Highlight};color:${SystemColors.ButtonText}}:host([href]){border-color:${SystemColors.LinkText}}:host([href]) .control:hover{
|
|
24212
|
+
:host .control${nonInteractivitySelector}{border-color:${SystemColors.ButtonText}}:host .control${interactivitySelector}:hover{border-color:${SystemColors.Highlight};color:${SystemColors.ButtonText}}:host([href]){border-color:${SystemColors.LinkText}}:host([href]) .control:hover{outline-color:${SystemColors.LinkText};color:${SystemColors.LinkText}}`));
|
|
24179
24213
|
/**
|
|
24180
24214
|
* @internal
|
|
24181
24215
|
*/
|
|
24182
24216
|
|
|
24183
24217
|
const StealthButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css`
|
|
24184
24218
|
:host .control{background:${neutralFillStealthRest}}:host .control${interactivitySelector}:hover{background:${neutralFillStealthHover}}:host .control${interactivitySelector}:active{background:${neutralFillStealthActive}}:host .control${nonInteractivitySelector}{background:${neutralFillStealthRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
24185
|
-
:host .control{background:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonFace};color:${SystemColors.ButtonText};fill:currentcolor}:host .control${interactivitySelector}:hover,:host .control${interactivitySelector}:active,:host .control:${focusVisible}{background:${SystemColors.Highlight};border-color:${SystemColors.Highlight};
|
|
24219
|
+
:host .control{background:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonFace};color:${SystemColors.ButtonText};fill:currentcolor}:host .control${interactivitySelector}:hover,:host .control${interactivitySelector}:active,:host .control:${focusVisible}{background:${SystemColors.Highlight};border-color:${SystemColors.Highlight};color:${SystemColors.HighlightText};fill:currentcolor}:host([href]) .control{border-color:${SystemColors.ButtonFace};color:${SystemColors.LinkText}}:host([href]) .control:hover,:host([href]) .control:${focusVisible}{background:${SystemColors.LinkText};border-color:${SystemColors.LinkText};color:${SystemColors.HighlightText};fill:currentcolor}`));
|
|
24186
24220
|
|
|
24187
24221
|
const placeholderRest = DesignToken.create('input-placeholder-rest').withDefault(target => {
|
|
24188
24222
|
const baseRecipe = neutralFillInputRecipe.getValueFor(target);
|
|
@@ -24210,7 +24244,7 @@ const filledPlaceholderHover = DesignToken.create('input-filled-placeholder-hove
|
|
|
24210
24244
|
|
|
24211
24245
|
const inputStyles = (context, definition, rootSelector) => css`
|
|
24212
24246
|
:host{${typeRampBase}
|
|
24213
|
-
color:${neutralForegroundRest};fill:currentcolor;
|
|
24247
|
+
color:${neutralForegroundRest};fill:currentcolor;user-select:none;position:relative}${rootSelector}{box-sizing:border-box;position:relative;color:inherit;background:padding-box linear-gradient(${neutralFillInputRest},${neutralFillInputRest}),border-box ${neutralStrokeInputRest};border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px);height:calc(${heightNumber} * 1px);font-family:inherit;font-size:inherit;line-height:inherit}.control{width:100%;outline:none}.label{display:block;color:${neutralForegroundRest};cursor:pointer;${typeRampBase}
|
|
24214
24248
|
margin-bottom:4px}.label__hidden{display:none;visibility:hidden}:host(:hover:not([disabled]):not(:focus-within)) ${rootSelector}{background:padding-box linear-gradient(${neutralFillInputHover},${neutralFillInputHover}),border-box ${neutralStrokeInputHover}}:host(:not([disabled]):focus-within) ${rootSelector}{background:padding-box linear-gradient(${neutralFillInputFocus},${neutralFillInputFocus}),border-box ${neutralStrokeInputRest}}.control::placeholder{color:${placeholderRest}}:host(:hover:not([disabled]):not(:focus-within)) .control::placeholder{color:${placeholderHover}}:host([disabled]) ${rootSelector},:host([readonly]) ${rootSelector},:host([disabled]) .label,:host([readonly]) .label,:host([disabled]) .control,:host([readonly]) .control{cursor:${disabledCursor}}:host([disabled]){opacity:${disabledOpacity}}:host([disabled]) ${rootSelector}{background:padding-box linear-gradient(${neutralFillInputRest},${neutralFillInputRest}),border-box ${neutralStrokeRest}}`;
|
|
24215
24249
|
/**
|
|
24216
24250
|
* @internal
|
|
@@ -24223,7 +24257,7 @@ const inputStateStyles = (context, definition, rootSelector) => css`
|
|
|
24223
24257
|
*/
|
|
24224
24258
|
|
|
24225
24259
|
const inputFilledStyles = (context, definition, rootSelector) => css`
|
|
24226
|
-
:host ${rootSelector}{background:${neutralFillSecondaryRest};border-color:transparent}:host(:hover:not([disabled]):not(:focus-within)) ${rootSelector}{background:${neutralFillSecondaryHover};border-color:transparent}.control::placeholder{color:${filledPlaceholderRest}}:host(:hover:not([disabled]):not(:focus-within)) .control::placeholder{color:${filledPlaceholderHover}}:host(:focus-within:not([disabled])) ${rootSelector}{border-color:transparent
|
|
24260
|
+
:host ${rootSelector}{background:${neutralFillSecondaryRest};border-color:transparent}:host(:hover:not([disabled]):not(:focus-within)) ${rootSelector}{background:${neutralFillSecondaryHover};border-color:transparent}.control::placeholder{color:${filledPlaceholderRest}}:host(:hover:not([disabled]):not(:focus-within)) .control::placeholder{color:${filledPlaceholderHover}}:host(:focus-within:not([disabled])) ${rootSelector}{border-color:transparent}`;
|
|
24227
24261
|
/**
|
|
24228
24262
|
* @internal
|
|
24229
24263
|
*/
|
|
@@ -24433,8 +24467,8 @@ const fluentBreadcrumb = Breadcrumb.compose({
|
|
|
24433
24467
|
const breadcrumbStyles = breadcrumbStyles$1;
|
|
24434
24468
|
|
|
24435
24469
|
const breadcrumbItemStyles$1 = (context, definition) => css`
|
|
24436
|
-
${display('inline-flex')} :host{background:transparent;color:${neutralForegroundRest};fill:currentcolor;box-sizing:border-box;${typeRampBase};min-width:calc(${heightNumber} * 1px);border-radius:calc(${controlCornerRadius} * 1px)
|
|
24437
|
-
:host(:not([href])),.start,.end,.separator{background:${SystemColors.ButtonFace};color:${SystemColors.ButtonText};fill:currentcolor}.separator{fill:${SystemColors.ButtonText}}:host([href]){forced-color-adjust:none;background:${SystemColors.ButtonFace};color:${SystemColors.LinkText}}:host([href]) .control:hover{background:${SystemColors.LinkText};color:${SystemColors.HighlightText};fill:currentcolor}
|
|
24470
|
+
${display('inline-flex')} :host{background:transparent;color:${neutralForegroundRest};fill:currentcolor;box-sizing:border-box;${typeRampBase};min-width:calc(${heightNumber} * 1px);border-radius:calc(${controlCornerRadius} * 1px)}.listitem{display:flex;align-items:center;border-radius:inherit}.control{position:relative;align-items:center;box-sizing:border-box;color:inherit;fill:inherit;cursor:pointer;display:flex;outline:none;text-decoration:none;white-space:nowrap;border-radius:inherit}.control:hover{color:${neutralForegroundHover}}.control:active{color:${neutralForegroundActive}}.control:${focusVisible}{${focusTreatmentTight}}:host(:not([href])),:host([aria-current]) .control{color:${neutralForegroundRest};fill:currentcolor;cursor:default}.start{display:flex;margin-inline-end:6px}.end{display:flex;margin-inline-start:6px}.separator{display:flex}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
24471
|
+
:host(:not([href])),.start,.end,.separator{background:${SystemColors.ButtonFace};color:${SystemColors.ButtonText};fill:currentcolor}.separator{fill:${SystemColors.ButtonText}}:host([href]){forced-color-adjust:none;background:${SystemColors.ButtonFace};color:${SystemColors.LinkText}}:host([href]) .control:hover{background:${SystemColors.LinkText};color:${SystemColors.HighlightText};fill:currentcolor}.control:${focusVisible}{outline-color:${SystemColors.LinkText}}`));
|
|
24438
24472
|
|
|
24439
24473
|
/**
|
|
24440
24474
|
* The Fluent BreadcrumbItem Element. Implements {@link @microsoft/fast-foundation#BreadcrumbItem},
|
|
@@ -24703,11 +24737,11 @@ const checkboxStyles$1 = (context, definition) => css`
|
|
|
24703
24737
|
* Chromium likes to select label text or the default slot when
|
|
24704
24738
|
* the checkbox is clicked. Maybe there is a better solution here?
|
|
24705
24739
|
*/
|
|
24706
|
-
''} user-select:none}.control{position:relative;width:calc((${heightNumber} / 2 + ${designUnit}) * 1px);height:calc((${heightNumber} / 2 + ${designUnit}) * 1px);box-sizing:border-box;border-radius:calc(${controlCornerRadius} * 1px);border:calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};background:${neutralFillInputAltRest};
|
|
24740
|
+
''} user-select:none}.control{position:relative;width:calc((${heightNumber} / 2 + ${designUnit}) * 1px);height:calc((${heightNumber} / 2 + ${designUnit}) * 1px);box-sizing:border-box;border-radius:calc(${controlCornerRadius} * 1px);border:calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};background:${neutralFillInputAltRest};cursor:pointer}.label__hidden{display:none;visibility:hidden}.label{${typeRampBase}
|
|
24707
24741
|
color:${neutralForegroundRest};${
|
|
24708
24742
|
/* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */
|
|
24709
|
-
''} padding-inline-start:calc(${designUnit} * 2px + 2px);margin-inline-end:calc(${designUnit} * 2px + 2px);cursor:pointer}slot[name='checked-indicator'],slot[name='indeterminate-indicator']{display:flex;align-items:center;justify-content:center;width:100%;height:100%;fill:${neutralForegroundRest};opacity:0;pointer-events:none}slot[name='indeterminate-indicator']{position:absolute;top:0}:host(.checked) slot[name='checked-indicator'],:host(.checked) slot[name='indeterminate-indicator']{fill:${foregroundOnAccentRest}}:host(:not(.disabled):hover) .control{background:${neutralFillInputAltHover};border-color:${neutralStrokeStrongHover}}:host(:not(.disabled):active) .control{background:${neutralFillInputAltActive};border-color:${neutralStrokeStrongActive}}:host(:${focusVisible}) .control{
|
|
24710
|
-
.control{border-color:${SystemColors.FieldText};background:${SystemColors.Field}}:host(:not(.disabled):hover) .control,:host(:not(.disabled):active) .control{border-color:${SystemColors.Highlight};background:${SystemColors.Field}}slot[name='checked-indicator'],slot[name='indeterminate-indicator']{fill:${SystemColors.FieldText}}:host(:${focusVisible}) .control{forced-color-adjust:none;
|
|
24743
|
+
''} padding-inline-start:calc(${designUnit} * 2px + 2px);margin-inline-end:calc(${designUnit} * 2px + 2px);cursor:pointer}slot[name='checked-indicator'],slot[name='indeterminate-indicator']{display:flex;align-items:center;justify-content:center;width:100%;height:100%;fill:${neutralForegroundRest};opacity:0;pointer-events:none}slot[name='indeterminate-indicator']{position:absolute;top:0}:host(.checked) slot[name='checked-indicator'],:host(.checked) slot[name='indeterminate-indicator']{fill:${foregroundOnAccentRest}}:host(:not(.disabled):hover) .control{background:${neutralFillInputAltHover};border-color:${neutralStrokeStrongHover}}:host(:not(.disabled):active) .control{background:${neutralFillInputAltActive};border-color:${neutralStrokeStrongActive}}:host(:${focusVisible}) .control{background:${neutralFillInputAltFocus};${focusTreatmentTight}}:host(.checked) .control{background:${accentFillRest};border-color:transparent}:host(.checked:not(.disabled):hover) .control{background:${accentFillHover};border-color:transparent}:host(.checked:not(.disabled):active) .control{background:${accentFillActive};border-color:transparent}:host(.disabled) .label,:host(.readonly) .label,:host(.readonly) .control,:host(.disabled) .control{cursor:${disabledCursor}}:host(.checked:not(.indeterminate)) slot[name='checked-indicator'],:host(.indeterminate) slot[name='indeterminate-indicator']{opacity:1}:host(.disabled){opacity:${disabledOpacity}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
24744
|
+
.control{border-color:${SystemColors.FieldText};background:${SystemColors.Field}}:host(:not(.disabled):hover) .control,:host(:not(.disabled):active) .control{border-color:${SystemColors.Highlight};background:${SystemColors.Field}}slot[name='checked-indicator'],slot[name='indeterminate-indicator']{fill:${SystemColors.FieldText}}:host(:${focusVisible}) .control{forced-color-adjust:none;outline-color:${SystemColors.FieldText};background:${SystemColors.Field};border-color:${SystemColors.Highlight}}:host(.checked) .control{background:${SystemColors.Highlight};border-color:${SystemColors.Highlight}}:host(.checked:not(.disabled):hover) .control,:host(.checked:not(.disabled):active) .control{background:${SystemColors.HighlightText};border-color:${SystemColors.Highlight}}:host(.checked) slot[name='checked-indicator'],:host(.checked) slot[name='indeterminate-indicator']{fill:${SystemColors.HighlightText}}:host(.checked:hover ) .control slot[name='checked-indicator'],:host(.checked:hover ) .control slot[name='indeterminate-indicator']{fill:${SystemColors.Highlight}}:host(.disabled){opacity:1}:host(.disabled) .control{border-color:${SystemColors.GrayText};background:${SystemColors.Field}}:host(.disabled) slot[name='checked-indicator'],:host(.checked.disabled:hover) .control slot[name='checked-indicator'],:host(.disabled) slot[name='indeterminate-indicator'],:host(.checked.disabled:hover) .control slot[name='indeterminate-indicator']{fill:${SystemColors.GrayText}}`));
|
|
24711
24745
|
|
|
24712
24746
|
/**
|
|
24713
24747
|
* The Fluent Checkbox Element. Implements {@link @microsoft/fast-foundation#Checkbox},
|
|
@@ -24743,19 +24777,19 @@ const checkboxStyles = checkboxStyles$1;
|
|
|
24743
24777
|
|
|
24744
24778
|
const selectFilledStyles = (context, definition) => css`
|
|
24745
24779
|
:host{background:${neutralFillSecondaryRest};border-color:transparent}:host(:not([disabled]):not([open]):hover){background:${neutralFillSecondaryHover};border-color:transparent}:host(:not([disabled]):not([open]):active){background:${neutralFillSecondaryActive};border-color:transparent}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
24746
|
-
:host(:not([disabled]):not([open]):hover){background:transparent}:host(:not([disabled]):not([open]):hover),:host(:not([disabled]):not([open]):active){border-color:${SystemColors.Highlight}}
|
|
24780
|
+
:host(:not([disabled]):not([open]):hover){background:transparent}:host(:not([disabled]):not([open]):hover),:host(:not([disabled]):not([open]):active){border-color:${SystemColors.Highlight}}`));
|
|
24747
24781
|
const selectStealthStyles = (context, definition) => css`
|
|
24748
24782
|
:host{background:${neutralFillStealthRest};border-color:transparent}:host(:not([disabled]):not([open]):hover){background:${neutralFillStealthHover};border-color:transparent}:host(:not([disabled]):not([open]):active){background:${neutralFillStealthActive};border-color:transparent}`;
|
|
24749
24783
|
const selectStyles$1 = (context, definition) => css`
|
|
24750
24784
|
${display('inline-flex')} :host{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlRest};border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px);box-sizing:border-box;color:${neutralForegroundRest};fill:currentcolor;font-family:${bodyFont};height:calc(${heightNumber} * 1px);position:relative;user-select:none;min-width:250px;vertical-align:top}:host .listbox{box-shadow:${elevationShadowFlyout};background:${fillColor};border-radius:calc(${layerCornerRadius} * 1px);box-sizing:border-box;display:inline-flex;flex-direction:column;left:0;max-height:calc(var(--max-height) - (${heightNumber} * 1px));padding:calc((${designUnit} - ${strokeWidth} ) * 1px) 0;overflow-y:auto;position:absolute;width:100%;z-index:1;margin:1px 0;border:calc(${strokeWidth} * 1px) solid transparent}:host .listbox[hidden]{display:none}:host .control{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;${typeRampBase}
|
|
24751
|
-
min-height:100%;padding:0 calc(${designUnit} * 2.25px);width:100%}:host(:not([disabled]):not([open]):hover){background:padding-box linear-gradient(${neutralFillHover},${neutralFillHover}),border-box ${neutralStrokeControlHover}}:host(:not([disabled]):not([open]):active){background:padding-box linear-gradient(${neutralFillActive},${neutralFillActive}),border-box ${neutralStrokeControlActive}}:host(:${focusVisible}){
|
|
24752
|
-
:host{background:${SystemColors.ButtonFace};color:${SystemColors.ButtonText}}:host(:not([disabled]):not([open]):hover){background:transparent}:host(:not([disabled]):hover){border-color:${SystemColors.Highlight}}:host(:${focusVisible}){forced-color-adjust:none;
|
|
24785
|
+
min-height:100%;padding:0 calc(${designUnit} * 2.25px);width:100%}:host(:not([disabled]):not([open]):hover){background:padding-box linear-gradient(${neutralFillHover},${neutralFillHover}),border-box ${neutralStrokeControlHover}}:host(:not([disabled]):not([open]):active){background:padding-box linear-gradient(${neutralFillActive},${neutralFillActive}),border-box ${neutralStrokeControlActive}}:host(:${focusVisible}){${focusTreatmentBase}}:host([disabled]){cursor:${disabledCursor};opacity:${disabledOpacity}}:host([disabled]) .control{cursor:${disabledCursor};user-select:none}:host([open][position='above']) .listbox{bottom:calc((${heightNumber} + ${designUnit} * 2) * 1px)}:host([open][position='below']) .listbox{top:calc((${heightNumber} + ${designUnit} * 2) * 1px)}.selected-value{font-family:inherit;flex:1 1 auto;text-align:start}.indicator{flex:0 0 auto;margin-inline-start:1em}slot[name='listbox']{display:none;width:100%}:host([open]) slot[name='listbox']{display:flex;position:absolute}.start{margin-inline-end:11px}.end{margin-inline-start:11px}.start,.end,.indicator,::slotted(svg){display:flex}::slotted([role='option']){flex:0 0 auto}`.withBehaviors(appearanceBehavior('filled', selectFilledStyles()), appearanceBehavior('stealth', selectStealthStyles()), forcedColorsStylesheetBehavior(css`
|
|
24786
|
+
:host{background:${SystemColors.ButtonFace};color:${SystemColors.ButtonText}}:host(:not([disabled]):not([open]):hover){background:transparent}:host(:not([disabled]):hover){border-color:${SystemColors.Highlight}}:host(:${focusVisible}){forced-color-adjust:none;outline-color:${SystemColors.Highlight}}:host([open]) .listbox{background:${SystemColors.ButtonFace};border-color:${SystemColors.CanvasText}}.start,.end,.indicator,::slotted(svg){fill:${SystemColors.FieldText}}:host([disabled]){border-color:${SystemColors.GrayText};color:${SystemColors.GrayText};opacity:1}:host([disabled]) .start,:host([disabled]) .end,:host([disabled]) .indicator,:host([disabled]) ::slotted(svg){fill:${SystemColors.GrayText}}`));
|
|
24753
24787
|
|
|
24754
24788
|
const comboboxStyles$1 = (context, definition) => css`
|
|
24755
24789
|
${selectStyles$1()}
|
|
24756
24790
|
|
|
24757
|
-
:host(:empty) .listbox{display:none}:host([disabled]) *,:host([disabled]){cursor:${disabledCursor};user-select:none}:host(:active) .selected-value{user-select:none}.selected-value{-webkit-appearance:none;background:transparent;border:none;color:inherit;${typeRampBase}
|
|
24758
|
-
height:calc(100% - ${strokeWidth} * 1px));margin:auto 0;width:100
|
|
24791
|
+
:host{background:padding-box linear-gradient(${neutralFillInputRest},${neutralFillInputRest}),border-box ${neutralStrokeInputRest}}:host(:not([disabled]):not([open]):hover){background:padding-box linear-gradient(${neutralFillInputHover},${neutralFillInputHover}),border-box ${neutralStrokeInputHover}}:host(:not([disabled]):not([open]):active){background:padding-box linear-gradient(${neutralFillInputActive},${neutralFillInputActive}),border-box ${neutralStrokeInputActive}}:host(:empty) .listbox{display:none}:host([disabled]) *,:host([disabled]){cursor:${disabledCursor};user-select:none}:host(:active) .selected-value{user-select:none}.selected-value{-webkit-appearance:none;background:transparent;border:none;color:inherit;${typeRampBase}
|
|
24792
|
+
height:calc(100% - ${strokeWidth} * 1px));margin:auto 0;width:100%;outline:none}`.withBehaviors(appearanceBehavior('filled', selectFilledStyles()));
|
|
24759
24793
|
|
|
24760
24794
|
/**
|
|
24761
24795
|
* The Fluent combobox class
|
|
@@ -24834,9 +24868,9 @@ const dataGridRowStyles$1 = (context, definition) => css`
|
|
|
24834
24868
|
:host{}`));
|
|
24835
24869
|
|
|
24836
24870
|
const dataGridCellStyles$1 = (context, definition) => css`
|
|
24837
|
-
:host{padding:calc(${designUnit} * 1px) calc(${designUnit} *
|
|
24838
|
-
border:transparent calc(${
|
|
24839
|
-
:host{forced-color-adjust:none;
|
|
24871
|
+
:host{padding:calc((${designUnit} + ${focusStrokeWidth} - ${strokeWidth}) * 1px) calc(((${designUnit} * 3) + ${focusStrokeWidth} - ${strokeWidth}) * 1px);color:${neutralForegroundRest};box-sizing:border-box;${typeRampBase}
|
|
24872
|
+
border:transparent calc(${strokeWidth} * 1px) solid;overflow:hidden;white-space:nowrap;border-radius:calc(${controlCornerRadius} * 1px)}:host(.column-header){font-weight:600}:host(:${focusVisible}){${focusTreatmentBase}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
24873
|
+
:host{forced-color-adjust:none;background:${SystemColors.Field};color:${SystemColors.FieldText}}:host(:${focusVisible}){outline-color:${SystemColors.FieldText}}`));
|
|
24840
24874
|
|
|
24841
24875
|
/**
|
|
24842
24876
|
* The Fluent Data Grid Cell Element.
|
|
@@ -25343,8 +25377,8 @@ const fluentDivider = Divider.compose({
|
|
|
25343
25377
|
const dividerStyles = dividerStyles$1;
|
|
25344
25378
|
|
|
25345
25379
|
const flipperStyles$1 = (context, definition) => css`
|
|
25346
|
-
${display('inline-flex')} :host{height:calc((${heightNumber} + ${designUnit}) * 1px);justify-content:center;align-items:center;fill:currentcolor;color:${neutralFillStrongRest};background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlRest};box-sizing:border-box;border:calc(${
|
|
25347
|
-
:host{background:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonText}}:host .next,:host .previous{color:${SystemColors.ButtonText};fill:currentcolor}:host(:not(.disabled):hover){background:${SystemColors.Highlight}}:host(:not(.disabled):hover) .next,:host(:not(.disabled):hover) .previous{color:${SystemColors.HighlightText};fill:currentcolor}:host(.disabled){opacity:1}:host(.disabled),:host(.disabled) .next,:host(.disabled) .previous{border-color:${SystemColors.GrayText};color:${SystemColors.GrayText};fill:currentcolor}:host(:${focusVisible}){forced-color-adjust:none;
|
|
25380
|
+
${display('inline-flex')} :host{height:calc((${heightNumber} + ${designUnit}) * 1px);justify-content:center;align-items:center;fill:currentcolor;color:${neutralFillStrongRest};background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlRest};box-sizing:border-box;border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px);padding:0}:host(.disabled){opacity:${disabledOpacity};cursor:${disabledCursor};pointer-events:none}.next,.previous{display:flex}:host(:not(.disabled):hover){cursor:pointer}:host(:not(.disabled):hover){color:${neutralFillStrongHover}}:host(:not(.disabled):active){color:${neutralFillStrongActive}}:host(:${focusVisible}){${focusTreatmentBase}}:host::-moz-focus-inner{border:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
25381
|
+
:host{background:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonText}}:host .next,:host .previous{color:${SystemColors.ButtonText};fill:currentcolor}:host(:not(.disabled):hover){background:${SystemColors.Highlight}}:host(:not(.disabled):hover) .next,:host(:not(.disabled):hover) .previous{color:${SystemColors.HighlightText};fill:currentcolor}:host(.disabled){opacity:1}:host(.disabled),:host(.disabled) .next,:host(.disabled) .previous{border-color:${SystemColors.GrayText};color:${SystemColors.GrayText};fill:currentcolor}:host(:${focusVisible}){forced-color-adjust:none;outline-color:${SystemColors.Highlight}}`));
|
|
25348
25382
|
|
|
25349
25383
|
/**
|
|
25350
25384
|
* The Fluent Flipper Element. Implements {@link @microsoft/fast-foundation#Flipper},
|
|
@@ -25440,7 +25474,7 @@ const fluentHorizontalScroll = HorizontalScroll.compose({
|
|
|
25440
25474
|
const horizontalScrollStyles = horizontalScrollStyles$1;
|
|
25441
25475
|
|
|
25442
25476
|
const listboxStyles$1 = (context, definition) => css`
|
|
25443
|
-
${display('inline-flex')} :host{border:calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};border-radius:calc(${controlCornerRadius} * 1px);box-sizing:border-box;flex-direction:column;padding:calc(${designUnit} * 1px) 0
|
|
25477
|
+
${display('inline-flex')} :host{border:calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};border-radius:calc(${controlCornerRadius} * 1px);box-sizing:border-box;flex-direction:column;padding:calc(${designUnit} * 1px) 0}::slotted(${context.tagFor(ListboxOption)}){margin:0 calc(${designUnit} * 1px)}:host(:focus-within:not([disabled])){${focusTreatmentBase}}`;
|
|
25444
25478
|
|
|
25445
25479
|
class Listbox extends Listbox$1 {}
|
|
25446
25480
|
/**
|
|
@@ -25468,8 +25502,9 @@ const listboxStyles = listboxStyles$1;
|
|
|
25468
25502
|
|
|
25469
25503
|
const optionStyles = (context, definition) => css`
|
|
25470
25504
|
${display('inline-flex')} :host{position:relative;${typeRampBase}
|
|
25471
|
-
background:${neutralFillStealthRest};border-radius:calc(${controlCornerRadius} * 1px);border:calc(${
|
|
25472
|
-
|
|
25505
|
+
background:${neutralFillStealthRest};border-radius:calc(${controlCornerRadius} * 1px);border:calc(${strokeWidth} * 1px) solid transparent;box-sizing:border-box;color:${neutralForegroundRest};cursor:pointer;fill:currentcolor;height:calc(${heightNumber} * 1px);overflow:hidden;align-items:center;padding:0 calc(((${designUnit} * 3) - ${strokeWidth} - 1) * 1px);user-select:none;white-space:nowrap}:host::before{content:'';display:block;position:absolute;left:calc((${focusStrokeWidth} - ${strokeWidth}) * 1px);top:calc((${heightNumber} / 4) - ${focusStrokeWidth} * 1px);width:3px;height:calc((${heightNumber} / 2) * 1px);background:transparent;border-radius:calc(${controlCornerRadius} * 1px)}:host(:not([disabled]):hover){background:${neutralFillStealthHover}}:host(:not([disabled]):active){background:${neutralFillStealthActive}}:host(:not([disabled]):active)::before{background:${accentFillRest};height:calc(((${heightNumber} / 2) - 6) * 1px)}:host([aria-selected='true'])::before{background:${accentFillRest}}:host(:${focusVisible}){${focusTreatmentBase}
|
|
25506
|
+
background:${neutralFillStealthFocus}}:host([aria-selected='true']){background:${neutralFillSecondaryRest}}:host(:not([disabled])[aria-selected='true']:hover){background:${neutralFillSecondaryHover}}:host(:not([disabled])[aria-selected='true']:active){background:${neutralFillSecondaryActive}}:host(:not([disabled]):not([aria-selected='true']):hover){background:${neutralFillStealthHover}}:host(:not([disabled]):not([aria-selected='true']):active){background:${neutralFillStealthActive}}:host([disabled]){cursor:${disabledCursor};opacity:${disabledOpacity}}.content{grid-column-start:2;justify-self:start;overflow:hidden;text-overflow:ellipsis}.start,.end,::slotted(svg){display:flex}::slotted([slot='end']){margin-inline-start:1ch}::slotted([slot='start']){margin-inline-end:1ch}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
25507
|
+
:host{background:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonFace};color:${SystemColors.ButtonText}}:host(:not([disabled]):not([aria-selected="true"]):hover),:host(:not([disabled])[aria-selected="true"]:hover),:host([aria-selected="true"]){forced-color-adjust:none;background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host(:not([disabled]):active)::before,:host([aria-selected='true'])::before{background:${SystemColors.HighlightText}}:host([disabled]),:host([disabled]:not([aria-selected='true']):hover){background:${SystemColors.Canvas};color:${SystemColors.GrayText};fill:currentcolor;opacity:1}:host(:${focusVisible}){outline-color:${SystemColors.CanvasText}}`));
|
|
25473
25508
|
|
|
25474
25509
|
/**
|
|
25475
25510
|
* The Fluent option Custom Element. Implements {@link @microsoft/fast-foundation#ListboxOption}
|
|
@@ -25495,7 +25530,7 @@ const fluentOption = ListboxOption.compose({
|
|
|
25495
25530
|
const OptionStyles = optionStyles;
|
|
25496
25531
|
|
|
25497
25532
|
const menuStyles$1 = (context, definition) => css`
|
|
25498
|
-
${display('block')} :host{background:${neutralLayerFloating};border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${layerCornerRadius} * 1px);box-shadow:${elevationShadowFlyout};padding:calc(${designUnit} * 1px) 0;max-width:368px;min-width:64px}:host([slot='submenu']){width:max-content;margin:0 calc(${designUnit} * 2px)}::slotted(${context.tagFor(MenuItem)}){margin:0 calc(${designUnit} * 1px)}::slotted(${context.tagFor(Divider)}){margin:calc(${designUnit} * 1px) 0}::slotted(hr){box-sizing:content-box;height:0;margin:calc(${designUnit} * 1px) 0;border:none;border-top:calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
25533
|
+
${display('block')} :host{background:${neutralLayerFloating};border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${layerCornerRadius} * 1px);box-shadow:${elevationShadowFlyout};padding:calc((${designUnit} - ${strokeWidth}) * 1px) 0;max-width:368px;min-width:64px}:host([slot='submenu']){width:max-content;margin:0 calc(${designUnit} * 2px)}::slotted(${context.tagFor(MenuItem)}){margin:0 calc(${designUnit} * 1px)}::slotted(${context.tagFor(Divider)}){margin:calc(${designUnit} * 1px) 0}::slotted(hr){box-sizing:content-box;height:0;margin:calc(${designUnit} * 1px) 0;border:none;border-top:calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
25499
25534
|
:host([slot='submenu']){background:${SystemColors.Canvas};border-color:${SystemColors.CanvasText}}`));
|
|
25500
25535
|
|
|
25501
25536
|
/**
|
|
@@ -25538,8 +25573,8 @@ const menuStyles = menuStyles$1;
|
|
|
25538
25573
|
|
|
25539
25574
|
const menuItemStyles$1 = (context, definition) => css`
|
|
25540
25575
|
${display('grid')} :host{contain:layout;overflow:visible;${typeRampBase}
|
|
25541
|
-
|
|
25542
|
-
:host,::slotted([slot='end']:not(svg)){forced-color-adjust:none;color:${SystemColors.ButtonText};fill:currentcolor}:host(:not([disabled]):hover){background:${SystemColors.Highlight};color:${SystemColors.HighlightText};fill:currentcolor}:host(:hover) .start,:host(:hover) .end,:host(:hover)::slotted(svg),:host(:active) .start,:host(:active) .end,:host(:active)::slotted(svg),:host(:hover) ::slotted([slot='end']:not(svg)),:host(:${focusVisible}) ::slotted([slot='end']:not(svg)){color:${SystemColors.HighlightText};fill:currentcolor}:host(.expanded){background:${SystemColors.Highlight};
|
|
25576
|
+
box-sizing:border-box;height:calc(${heightNumber} * 1px);grid-template-columns:minmax(32px,auto) 1fr minmax(32px,auto);grid-template-rows:auto;justify-items:center;align-items:center;padding:0;white-space:nowrap;color:${neutralForegroundRest};fill:currentcolor;cursor:pointer;border-radius:calc(${controlCornerRadius} * 1px);border:calc(${strokeWidth} * 1px) solid transparent}:host(.indent-0){grid-template-columns:auto 1fr minmax(32px,auto)}:host(.indent-0) .content{grid-column:1;grid-row:1;margin-inline-start:10px}:host(.indent-0) .expand-collapse-glyph-container{grid-column:5;grid-row:1}:host(.indent-2){grid-template-columns:minmax(32px,auto) minmax(32px,auto) 1fr minmax(32px,auto) minmax(32px,auto)}:host(.indent-2) .content{grid-column:3;grid-row:1;margin-inline-start:10px}:host(.indent-2) .expand-collapse-glyph-container{grid-column:5;grid-row:1}:host(.indent-2) .start{grid-column:2}:host(.indent-2) .end{grid-column:4}:host(:${focusVisible}){${focusTreatmentBase}}:host(:not([disabled]):hover){background:${neutralFillStealthHover}}:host(:not([disabled]):active),:host(.expanded){background:${neutralFillStealthActive};color:${neutralForegroundRest}}:host([disabled]){cursor:${disabledCursor};opacity:${disabledOpacity}}.content{grid-column-start:2;justify-self:start;overflow:hidden;text-overflow:ellipsis}.start,.end{display:flex;justify-content:center}:host(.indent-0[aria-haspopup='menu']){display:grid;grid-template-columns:minmax(32px,auto) auto 1fr minmax(32px,auto) minmax(32px,auto);align-items:center;min-height:32px}:host(.indent-1[aria-haspopup='menu']),:host(.indent-1[role='menuitemcheckbox']),:host(.indent-1[role='menuitemradio']){display:grid;grid-template-columns:minmax(32px,auto) auto 1fr minmax(32px,auto) minmax(32px,auto);align-items:center;min-height:32px}:host(.indent-2:not([aria-haspopup='menu'])) .end{grid-column:5}:host .input-container,:host .expand-collapse-glyph-container{display:none}:host([aria-haspopup='menu']) .expand-collapse-glyph-container,:host([role='menuitemcheckbox']) .input-container,:host([role='menuitemradio']) .input-container{display:grid}:host([aria-haspopup='menu']) .content,:host([role='menuitemcheckbox']) .content,:host([role='menuitemradio']) .content{grid-column-start:3}:host([aria-haspopup='menu'].indent-0) .content{grid-column-start:1}:host([aria-haspopup='menu']) .end,:host([role='menuitemcheckbox']) .end,:host([role='menuitemradio']) .end{grid-column-start:4}:host .expand-collapse,:host .checkbox,:host .radio{display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box}:host .checkbox-indicator,:host .radio-indicator,slot[name='checkbox-indicator'],slot[name='radio-indicator']{display:none}::slotted([slot='end']:not(svg)){margin-inline-end:10px;color:${neutralForegroundHint}}:host([aria-checked='true']) .checkbox-indicator,:host([aria-checked='true']) slot[name='checkbox-indicator'],:host([aria-checked='true']) .radio-indicator,:host([aria-checked='true']) slot[name='radio-indicator']{display:flex}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
25577
|
+
:host,::slotted([slot='end']:not(svg)){forced-color-adjust:none;color:${SystemColors.ButtonText};fill:currentcolor}:host(:not([disabled]):hover){background:${SystemColors.Highlight};color:${SystemColors.HighlightText};fill:currentcolor}:host(:hover) .start,:host(:hover) .end,:host(:hover)::slotted(svg),:host(:active) .start,:host(:active) .end,:host(:active)::slotted(svg),:host(:hover) ::slotted([slot='end']:not(svg)),:host(:${focusVisible}) ::slotted([slot='end']:not(svg)){color:${SystemColors.HighlightText};fill:currentcolor}:host(.expanded){background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host(:${focusVisible}){background:${SystemColors.Highlight};outline-color:${SystemColors.ButtonText};color:${SystemColors.HighlightText};fill:currentcolor}:host([disabled]),:host([disabled]:hover),:host([disabled]:hover) .start,:host([disabled]:hover) .end,:host([disabled]:hover)::slotted(svg),:host([disabled]:${focusVisible}){background:${SystemColors.ButtonFace};color:${SystemColors.GrayText};fill:currentcolor;opacity:1}:host([disabled]:${focusVisible}){outline-color:${SystemColors.GrayText}}:host .expanded-toggle,:host .checkbox,:host .radio{border-color:${SystemColors.ButtonText};background:${SystemColors.HighlightText}}:host([checked]) .checkbox,:host([checked]) .radio{background:${SystemColors.HighlightText};border-color:${SystemColors.HighlightText}}:host(:hover) .expanded-toggle,:host(:hover) .checkbox,:host(:hover) .radio,:host(:${focusVisible}) .expanded-toggle,:host(:${focusVisible}) .checkbox,:host(:${focusVisible}) .radio,:host([checked]:hover) .checkbox,:host([checked]:hover) .radio,:host([checked]:${focusVisible}) .checkbox,:host([checked]:${focusVisible}) .radio{border-color:${SystemColors.HighlightText}}:host([aria-checked='true']){background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host([aria-checked='true']) .checkbox-indicator,:host([aria-checked='true']) ::slotted([slot='checkbox-indicator']),:host([aria-checked='true']) ::slotted([slot='radio-indicator']){fill:${SystemColors.Highlight}}:host([aria-checked='true']) .radio-indicator{background:${SystemColors.Highlight}}`), new DirectionalStyleSheetBehavior(css`
|
|
25543
25578
|
.expand-collapse-glyph-container{transform:rotate(0deg)}`, css`
|
|
25544
25579
|
.expand-collapse-glyph-container{transform:rotate(180deg)}`));
|
|
25545
25580
|
|
|
@@ -25656,7 +25691,7 @@ const fluentNumberField = NumberField.compose({
|
|
|
25656
25691
|
});
|
|
25657
25692
|
|
|
25658
25693
|
const progressStyles$1 = (context, definition) => css`
|
|
25659
|
-
${display('flex')} :host{align-items:center;
|
|
25694
|
+
${display('flex')} :host{align-items:center;height:calc((${strokeWidth} * 3) * 1px)}.progress{background-color:${neutralStrokeStrongRest};border-radius:calc(${designUnit} * 1px);width:100%;height:calc(${strokeWidth} * 1px);display:flex;align-items:center;position:relative}.determinate{background-color:${accentFillRest};border-radius:calc(${designUnit} * 1px);height:calc((${strokeWidth} * 3) * 1px);transition:all 0.2s ease-in-out;display:flex}.indeterminate{height:calc((${strokeWidth} * 3) * 1px);border-radius:calc(${designUnit} * 1px);display:flex;width:100%;position:relative;overflow:hidden}.indeterminate-indicator-1{position:absolute;opacity:0;height:100%;background-color:${accentFillRest};border-radius:calc(${designUnit} * 1px);animation-timing-function:cubic-bezier(0.4,0,0.6,1);width:40%;animation:indeterminate-1 2s infinite}.indeterminate-indicator-2{position:absolute;opacity:0;height:100%;background-color:${accentFillRest};border-radius:calc(${designUnit} * 1px);animation-timing-function:cubic-bezier(0.4,0,0.6,1);width:60%;animation:indeterminate-2 2s infinite}:host(.paused) .indeterminate-indicator-1,:host(.paused) .indeterminate-indicator-2{animation:none;background-color:${neutralForegroundHint};width:100%;opacity:1}:host(.paused) .determinate{background-color:${neutralForegroundHint}}@keyframes indeterminate-1{0%{opacity:1;transform:translateX(-100%)}70%{opacity:1;transform:translateX(300%)}70.01%{opacity:0}100%{opacity:0;transform:translateX(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translateX(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translateX(-150%)}100%{transform:translateX(166.66%);opacity:1}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
25660
25695
|
.indeterminate-indicator-1,.indeterminate-indicator-2,.determinate,.progress{background-color:${SystemColors.ButtonText}}:host(.paused) .indeterminate-indicator-1,:host(.paused) .indeterminate-indicator-2,:host(.paused) .determinate{background-color:${SystemColors.GrayText}}`));
|
|
25661
25696
|
|
|
25662
25697
|
/**
|
|
@@ -25694,7 +25729,7 @@ const fluentProgress = Progress.compose({
|
|
|
25694
25729
|
const progressStyles = progressStyles$1;
|
|
25695
25730
|
|
|
25696
25731
|
const progressRingStyles$1 = (context, definition) => css`
|
|
25697
|
-
${display('flex')} :host{align-items:center;
|
|
25732
|
+
${display('flex')} :host{align-items:center;height:calc(${heightNumber} * 1px);width:calc(${heightNumber} * 1px)}.progress{height:100%;width:100%}.background{fill:none;stroke-width:2px}.determinate{stroke:${accentFillRest};fill:none;stroke-width:2px;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all 0.2s ease-in-out}.indeterminate-indicator-1{stroke:${accentFillRest};fill:none;stroke-width:2px;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all 0.2s ease-in-out;animation:spin-infinite 2s linear infinite}:host(.paused) .indeterminate-indicator-1{animation:none;stroke:${neutralForegroundHint}}:host(.paused) .determinate{stroke:${neutralForegroundHint}}@keyframes spin-infinite{0%{stroke-dasharray:0.01px 43.97px;transform:rotate(0deg)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}100%{stroke-dasharray:0.01px 43.97px;transform:rotate(1080deg)}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
25698
25733
|
.background{stroke:${SystemColors.Field}}.determinate,.indeterminate-indicator-1{stroke:${SystemColors.ButtonText}}:host(.paused) .determinate,:host(.paused) .indeterminate-indicator-1{stroke:${SystemColors.GrayText}}`));
|
|
25699
25734
|
|
|
25700
25735
|
/**
|
|
@@ -25749,11 +25784,12 @@ const radioStyles = (context, definition) => css`
|
|
|
25749
25784
|
* Chromium likes to select label text or the default slot when
|
|
25750
25785
|
* the radio button is clicked. Maybe there is a better solution here?
|
|
25751
25786
|
*/
|
|
25752
|
-
''} user-select:none;position:relative;flex-direction:row;transition:all 0.2s ease-in-out}.control{position:relative;width:calc(var(--input-size) * 1px);height:calc(var(--input-size) * 1px);box-sizing:border-box;border-radius:50%;border:calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};background:${neutralFillInputAltRest};
|
|
25787
|
+
''} user-select:none;position:relative;flex-direction:row;transition:all 0.2s ease-in-out}.control{position:relative;width:calc(var(--input-size) * 1px);height:calc(var(--input-size) * 1px);box-sizing:border-box;border-radius:50%;border:calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};background:${neutralFillInputAltRest};cursor:pointer}.label__hidden{display:none;visibility:hidden}.label{${typeRampBase}
|
|
25753
25788
|
color:${neutralForegroundRest};${
|
|
25754
25789
|
/* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */
|
|
25755
|
-
''} padding-inline-start:calc(${designUnit} * 2px + 2px);margin-inline-end:calc(${designUnit} * 2px + 2px);cursor:pointer}.control,slot[name='checked-indicator']{flex-shrink:0}slot[name='checked-indicator']{display:flex;align-items:center;justify-content:center;width:100%;height:100%;fill:${foregroundOnAccentRest};opacity:0;pointer-events:none}:host(:not(.disabled):hover) .control{background:${neutralFillInputAltHover};border-color:${neutralStrokeStrongHover}}:host(:not(.disabled):active) .control{background:${neutralFillInputAltActive};border-color:${neutralStrokeStrongActive}}:host(:not(.disabled):active) slot[name='checked-indicator']{opacity:1}:host(:${focusVisible}) .control{
|
|
25756
|
-
|
|
25790
|
+
''} padding-inline-start:calc(${designUnit} * 2px + 2px);margin-inline-end:calc(${designUnit} * 2px + 2px);cursor:pointer}.control,slot[name='checked-indicator']{flex-shrink:0}slot[name='checked-indicator']{display:flex;align-items:center;justify-content:center;width:100%;height:100%;fill:${foregroundOnAccentRest};opacity:0;pointer-events:none}:host(:not(.disabled):hover) .control{background:${neutralFillInputAltHover};border-color:${neutralStrokeStrongHover}}:host(:not(.disabled):active) .control{background:${neutralFillInputAltActive};border-color:${neutralStrokeStrongActive}}:host(:not(.disabled):active) slot[name='checked-indicator']{opacity:1}:host(:${focusVisible}) .control{${focusTreatmentTight}
|
|
25791
|
+
background:${neutralFillInputAltFocus}}:host(.checked) .control{background:${accentFillRest};border-color:transparent}:host(.checked:not(.disabled):hover) .control{background:${accentFillHover};border-color:transparent}:host(.checked:not(.disabled):active) .control{background:${accentFillActive};border-color:transparent}:host(.disabled) .label,:host(.readonly) .label,:host(.readonly) .control,:host(.disabled) .control{cursor:${disabledCursor}}:host(.checked) slot[name='checked-indicator']{opacity:1}:host(.disabled){opacity:${disabledOpacity}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
25792
|
+
.control{background:${SystemColors.Field};border-color:${SystemColors.FieldText}}:host(:not(.disabled):hover) .control,:host(:not(.disabled):active) .control{border-color:${SystemColors.Highlight}}:host(:${focusVisible}) .control{forced-color-adjust:none;background:${SystemColors.Field};outline-color:${SystemColors.FieldText}}:host(.checked:not(.disabled):hover) .control,:host(.checked:not(.disabled):active) .control{border-color:${SystemColors.Highlight};background:${SystemColors.Highlight}}:host(.checked) slot[name='checked-indicator']{fill:${SystemColors.Highlight}}:host(.checked:hover) .control slot[name='checked-indicator']{fill:${SystemColors.HighlightText}}:host(.disabled){opacity:1}:host(.disabled) .label{color:${SystemColors.GrayText}}:host(.disabled) .control,:host(.checked.disabled) .control{background:${SystemColors.Field};border-color:${SystemColors.GrayText}}:host(.disabled) slot[name='checked-indicator'],:host(.checked.disabled) slot[name='checked-indicator']{fill:${SystemColors.GrayText}}`));
|
|
25757
25793
|
|
|
25758
25794
|
/**
|
|
25759
25795
|
* The Fluent Radio Element. Implements {@link @microsoft/fast-foundation#Radio},
|
|
@@ -26048,11 +26084,12 @@ const switchStyles$1 = (context, definition) => css`
|
|
|
26048
26084
|
* Chromium likes to select label text or the default slot when
|
|
26049
26085
|
* the checkbox is clicked. Maybe there is a better solution here?
|
|
26050
26086
|
*/
|
|
26051
|
-
''} user-select:none}:host(.disabled){opacity:${disabledOpacity}}:host(.disabled) .label,:host(.readonly) .label,:host(.disabled) .switch,:host(.readonly) .switch,:host(.disabled) .status-message,:host(.readonly) .status-message{cursor:${disabledCursor}}.switch{position:relative;
|
|
26052
|
-
|
|
26087
|
+
''} user-select:none}:host(.disabled){opacity:${disabledOpacity}}:host(.disabled) .label,:host(.readonly) .label,:host(.disabled) .switch,:host(.readonly) .switch,:host(.disabled) .status-message,:host(.readonly) .status-message{cursor:${disabledCursor}}.switch{position:relative;box-sizing:border-box;width:calc(((${heightNumber} / 2) + ${designUnit}) * 2px);height:calc(((${heightNumber} / 2) + ${designUnit}) * 1px);background:${neutralFillInputAltRest};border-radius:calc(${heightNumber} * 1px);border:calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};cursor:pointer}:host(:not(.disabled):hover) .switch{background:${neutralFillInputAltHover};border-color:${neutralStrokeStrongHover}}:host(:not(.disabled):active) .switch{background:${neutralFillInputAltActive};border-color:${neutralStrokeStrongActive}}:host(:${focusVisible}) .switch{${focusTreatmentTight}
|
|
26088
|
+
background:${neutralFillInputAltFocus}}:host(.checked) .switch{background:${accentFillRest};border-color:transparent}:host(.checked:not(.disabled):hover) .switch{background:${accentFillHover};border-color:transparent}:host(.checked:not(.disabled):active) .switch{background:${accentFillActive};border-color:transparent}slot[name='switch']{position:absolute;display:flex;border:1px solid transparent;fill:${neutralForegroundRest};transition:all 0.2s ease-in-out}.status-message{color:${neutralForegroundRest};cursor:pointer;${typeRampBase}}.label__hidden{display:none;visibility:hidden}.label{color:${neutralForegroundRest};${typeRampBase}
|
|
26089
|
+
margin-inline-end:calc(${designUnit} * 2px + 2px);cursor:pointer}::slotted([slot="checked-message"]),::slotted([slot="unchecked-message"]){margin-inline-start:calc(${designUnit} * 2px + 2px)}:host(.checked) .switch{background:${accentFillRest}}:host(.checked) .switch slot[name='switch']{fill:${foregroundOnAccentRest};filter:drop-shadow(0px 1px 1px rgba(0,0,0,0.15))}:host(.checked:not(.disabled)) .switch:hover{background:${accentFillHover}}:host(.checked:not(.disabled)) .switch:hover slot[name='switch']{fill:${foregroundOnAccentHover}}:host(.checked:not(.disabled)) .switch:active{background:${accentFillActive}}:host(.checked:not(.disabled)) .switch:active slot[name='switch']{fill:${foregroundOnAccentActive}}.unchecked-message{display:block}.checked-message{display:none}:host(.checked) .unchecked-message{display:none}:host(.checked) .checked-message{display:block}`.withBehaviors(new DirectionalStyleSheetBehavior(css`
|
|
26053
26090
|
slot[name='switch']{left:0}:host(.checked) slot[name='switch']{left:100%;transform:translateX(-100%)}`, css`
|
|
26054
26091
|
slot[name='switch']{right:0}:host(.checked) slot[name='switch']{right:100%;transform:translateX(100%)}`), forcedColorsStylesheetBehavior(css`
|
|
26055
|
-
:host(:not(.disabled)) .switch slot[name='switch']{forced-color-adjust:none;fill:${SystemColors.FieldText}}.switch{background:${SystemColors.Field};border-color:${SystemColors.FieldText}}:host(.checked) .switch{background:${SystemColors.Highlight};border-color:${SystemColors.Highlight}}:host(:not(.disabled):hover) .switch,:host(:not(.disabled):active) .switch,:host(.checked:not(.disabled):hover) .switch{background:${SystemColors.HighlightText};border-color:${SystemColors.Highlight}}:host(.checked:not(.disabled)) .switch slot[name="switch"]{fill:${SystemColors.HighlightText}}:host(.checked:not(.disabled):hover) .switch slot[name='switch']{fill:${SystemColors.Highlight}}:host(:${focusVisible}) .switch{forced-color-adjust:none;background:${SystemColors.Field};border-color:${SystemColors.Highlight};
|
|
26092
|
+
:host(:not(.disabled)) .switch slot[name='switch']{forced-color-adjust:none;fill:${SystemColors.FieldText}}.switch{background:${SystemColors.Field};border-color:${SystemColors.FieldText}}:host(.checked) .switch{background:${SystemColors.Highlight};border-color:${SystemColors.Highlight}}:host(:not(.disabled):hover) .switch,:host(:not(.disabled):active) .switch,:host(.checked:not(.disabled):hover) .switch{background:${SystemColors.HighlightText};border-color:${SystemColors.Highlight}}:host(.checked:not(.disabled)) .switch slot[name="switch"]{fill:${SystemColors.HighlightText}}:host(.checked:not(.disabled):hover) .switch slot[name='switch']{fill:${SystemColors.Highlight}}:host(:${focusVisible}) .switch{forced-color-adjust:none;background:${SystemColors.Field};border-color:${SystemColors.Highlight};outline-color:${SystemColors.FieldText}}:host(.disabled){opacity:1}:host(.disabled) slot[name='switch']{forced-color-adjust:none;fill:${SystemColors.GrayText}}:host(.disabled) .switch{background:${SystemColors.Field};border-color:${SystemColors.GrayText}}.status-message,.label{color:${SystemColors.FieldText}}`));
|
|
26056
26093
|
|
|
26057
26094
|
/**
|
|
26058
26095
|
* The Fluent Switch Custom Element. Implements {@link @microsoft/fast-foundation#Switch},
|
|
@@ -26088,8 +26125,8 @@ const tabsStyles$1 = (context, definition) => css`
|
|
|
26088
26125
|
|
|
26089
26126
|
const tabStyles$1 = (context, definition) => css`
|
|
26090
26127
|
${display('inline-flex')} :host{box-sizing:border-box;${typeRampBase}
|
|
26091
|
-
height:calc((${heightNumber} + (${designUnit} * 2)) * 1px);padding:0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);color:${neutralForegroundRest};border-radius:calc(${controlCornerRadius} * 1px);border:calc(${strokeWidth} * 1px) solid transparent;align-items:center;justify-content:center;grid-row:1 / 3;cursor:pointer
|
|
26092
|
-
:host{forced-color-adjust:none;border-color:transparent;color:${SystemColors.ButtonText};fill:currentcolor}:host(:hover),:host(.vertical:hover),:host([aria-selected='true']:hover){background:transparent;color:${SystemColors.Highlight};fill:currentcolor}:host([aria-selected='true']){background:transparent;color:${SystemColors.Highlight};fill:currentcolor}:host(:${focusVisible}){background:transparent;
|
|
26128
|
+
height:calc((${heightNumber} + (${designUnit} * 2)) * 1px);padding:0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);color:${neutralForegroundRest};border-radius:calc(${controlCornerRadius} * 1px);border:calc(${strokeWidth} * 1px) solid transparent;align-items:center;justify-content:center;grid-row:1 / 3;cursor:pointer}:host([aria-selected='true']){z-index:2}:host(:hover),:host(:active){color:${neutralForegroundRest}}:host(:${focusVisible}){${focusTreatmentBase}}:host(.vertical){justify-content:start;grid-column:1 / 3}:host(.vertical[aria-selected='true']){z-index:2}:host(.vertical:hover),:host(.vertical:active){color:${neutralForegroundRest}}:host(.vertical:hover[aria-selected='true']){}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
26129
|
+
:host{forced-color-adjust:none;border-color:transparent;color:${SystemColors.ButtonText};fill:currentcolor}:host(:hover),:host(.vertical:hover),:host([aria-selected='true']:hover){background:transparent;color:${SystemColors.Highlight};fill:currentcolor}:host([aria-selected='true']){background:transparent;color:${SystemColors.Highlight};fill:currentcolor}:host(:${focusVisible}){background:transparent;outline-color:${SystemColors.ButtonText}}`));
|
|
26093
26130
|
|
|
26094
26131
|
/**
|
|
26095
26132
|
* The Fluent Tab Custom Element. Implements {@link @microsoft/fast-foundation#Tab},
|
|
@@ -26314,11 +26351,11 @@ const fluentTextField = TextField.compose({
|
|
|
26314
26351
|
const textFieldStyles = textFieldStyles$1;
|
|
26315
26352
|
|
|
26316
26353
|
const toolbarStyles = (context, definition) => css`
|
|
26317
|
-
${display('inline-flex')} :host{--toolbar-item-gap:calc(${designUnit} * 1px);background:${fillColor};fill:currentcolor;padding:var(--toolbar-item-gap);box-sizing:border-box;align-items:center}:host(${focusVisible}){
|
|
26354
|
+
${display('inline-flex')} :host{--toolbar-item-gap:calc(${designUnit} * 1px);background:${fillColor};fill:currentcolor;padding:var(--toolbar-item-gap);box-sizing:border-box;align-items:center}:host(${focusVisible}){${focusTreatmentBase}}.positioning-region{align-items:center;display:inline-flex;flex-flow:row wrap;justify-content:flex-start;flex-grow:1}:host([orientation='vertical']) .positioning-region{flex-direction:column;align-items:start}::slotted(:not([slot])){flex:0 0 auto;margin:0 var(--toolbar-item-gap)}:host([orientation='vertical']) ::slotted(:not([slot])){margin:var(--toolbar-item-gap) 0}:host([orientation='vertical']){display:inline-flex;flex-direction:column}.start,.end{display:flex;align-items:center}.end{margin-inline-start:auto}.start__hidden,.end__hidden{display:none}::slotted(svg){${
|
|
26318
26355
|
/* Glyph size is temporary - replace when adaptive typography is figured out */
|
|
26319
26356
|
''}
|
|
26320
26357
|
width:16px;height:16px}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
26321
|
-
:host(:${focusVisible}){
|
|
26358
|
+
:host(:${focusVisible}){outline-color:${SystemColors.Highlight};color:${SystemColors.ButtonText};forced-color-adjust:none}`));
|
|
26322
26359
|
|
|
26323
26360
|
/**
|
|
26324
26361
|
* The Fluent toolbar class
|
|
@@ -26381,7 +26418,7 @@ const fluentTooltip = Tooltip.compose({
|
|
|
26381
26418
|
});
|
|
26382
26419
|
|
|
26383
26420
|
const treeViewStyles$1 = (context, definition) => css`
|
|
26384
|
-
:host([hidden]){display:none}${display('flex')} :host{flex-direction:column;align-items:stretch;min-width:fit-content;font-size:0}
|
|
26421
|
+
:host([hidden]){display:none}${display('flex')} :host{flex-direction:column;align-items:stretch;min-width:fit-content;font-size:0}`;
|
|
26385
26422
|
|
|
26386
26423
|
/**
|
|
26387
26424
|
* The Fluent tree view Custom Element. Implements, {@link @microsoft/fast-foundation#TreeView}
|
|
@@ -26421,10 +26458,10 @@ const selectedExpandCollapseHover = DesignToken.create('tree-item-expand-collaps
|
|
|
26421
26458
|
return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).hover;
|
|
26422
26459
|
});
|
|
26423
26460
|
const treeItemStyles$1 = (context, definition) => css`
|
|
26424
|
-
${display('block')} :host{contain:content;position:relative;outline:none;color:${neutralForegroundRest};fill:currentcolor;cursor:pointer;font-family:${bodyFont};--expand-collapse-button-size:calc(${heightNumber} * 1px);--tree-item-nested-width:0}
|
|
26461
|
+
${display('block')} :host{contain:content;position:relative;outline:none;color:${neutralForegroundRest};fill:currentcolor;cursor:pointer;font-family:${bodyFont};--expand-collapse-button-size:calc(${heightNumber} * 1px);--tree-item-nested-width:0}.positioning-region{display:flex;position:relative;box-sizing:border-box;background:${neutralFillStealthRest};border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px);height:calc((${heightNumber} + 1) * 1px)}:host(:${focusVisible}) .positioning-region{${focusTreatmentBase}}.positioning-region::before{content:'';display:block;width:var(--tree-item-nested-width);flex-shrink:0}:host(:not([disabled])) .positioning-region:hover{background:${neutralFillStealthHover}}:host(:not([disabled])) .positioning-region:active{background:${neutralFillStealthActive}}.content-region{display:inline-flex;align-items:center;white-space:nowrap;width:100%;height:calc(${heightNumber} * 1px);margin-inline-start:calc(${designUnit} * 2px + 8px);${typeRampBase}}.items{display:none;${
|
|
26425
26462
|
/* Font size should be based off calc(1em + (design-unit + glyph-size-number) * 1px) -
|
|
26426
26463
|
update when density story is figured out */
|
|
26427
|
-
''} font-size:calc(1em + (${designUnit} + 16) * 1px)}.expand-collapse-button{background:none;border:none;border-radius:calc(${controlCornerRadius} * 1px)
|
|
26464
|
+
''} font-size:calc(1em + (${designUnit} + 16) * 1px)}.expand-collapse-button{background:none;border:none;border-radius:calc(${controlCornerRadius} * 1px);${
|
|
26428
26465
|
/* Width and Height should be based off calc(glyph-size-number + (design-unit * 4) * 1px) -
|
|
26429
26466
|
update when density story is figured out */
|
|
26430
26467
|
''} width:calc((${expandCollapseButtonSize} + (${designUnit} * 2)) * 1px);height:calc((${expandCollapseButtonSize} + (${designUnit} * 2)) * 1px);padding:0;display:flex;justify-content:center;align-items:center;cursor:pointer;margin:0 6px}.expand-collapse-button svg{transition:transform 0.1s linear;pointer-events:none}.start,.end{display:flex}.start{${
|
|
@@ -26435,7 +26472,7 @@ const treeItemStyles$1 = (context, definition) => css`
|
|
|
26435
26472
|
/* The french fry background needs to be calculated based on the selected background state for this control.
|
|
26436
26473
|
We currently have no way of changing that, so setting to accent-foreground-rest for the time being */
|
|
26437
26474
|
''} background:${accentFillRest};border-radius:calc(${controlCornerRadius} * 1px)}::slotted(fluent-tree-item){--tree-item-nested-width:1em;--expand-collapse-button-nested-width:calc(${heightNumber} * -1px)}`.withBehaviors(new DirectionalStyleSheetBehavior(ltr, rtl), forcedColorsStylesheetBehavior(css`
|
|
26438
|
-
:host{color:${SystemColors.ButtonText}}.positioning-region{border-color:${SystemColors.ButtonFace};background:${SystemColors.ButtonFace}}:host(:not([disabled])) .positioning-region:hover,:host(:not([disabled])) .positioning-region:active,:host(:not([disabled])[selected]) .positioning-region{background:${SystemColors.Highlight}}:host .positioning-region:hover .content-region,:host([selected]) .positioning-region .content-region{forced-color-adjust:none;color:${SystemColors.HighlightText}}:host([disabled][selected]) .positioning-region .content-region{color:${SystemColors.GrayText}}:host([selected])::after{background:${SystemColors.HighlightText}}:host(:${focusVisible}) .positioning-region{forced-color-adjust:none;
|
|
26475
|
+
:host{color:${SystemColors.ButtonText}}.positioning-region{border-color:${SystemColors.ButtonFace};background:${SystemColors.ButtonFace}}:host(:not([disabled])) .positioning-region:hover,:host(:not([disabled])) .positioning-region:active,:host(:not([disabled])[selected]) .positioning-region{background:${SystemColors.Highlight}}:host .positioning-region:hover .content-region,:host([selected]) .positioning-region .content-region{forced-color-adjust:none;color:${SystemColors.HighlightText}}:host([disabled][selected]) .positioning-region .content-region{color:${SystemColors.GrayText}}:host([selected])::after{background:${SystemColors.HighlightText}}:host(:${focusVisible}) .positioning-region{forced-color-adjust:none;outline-color:${SystemColors.ButtonFace}}:host([disabled]),:host([disabled]) .content-region,:host([disabled]) .positioning-region:hover .content-region{opacity:1;color:${SystemColors.GrayText}}:host(.nested) .expand-collapse-button:hover,:host(:not([disabled])[selected]) .expand-collapse-button:hover{background:${SystemColors.ButtonFace};fill:${SystemColors.ButtonText}}`));
|
|
26439
26476
|
|
|
26440
26477
|
/**
|
|
26441
26478
|
* The Fluent tree item Custom Element. Implements, {@link @microsoft/fast-foundation#TreeItem}
|
|
@@ -26556,4 +26593,4 @@ function provideFluentDesignSystem(element) {
|
|
|
26556
26593
|
|
|
26557
26594
|
const FluentDesignSystem = provideFluentDesignSystem().register(allComponents);
|
|
26558
26595
|
|
|
26559
|
-
export { AccentButtonStyles, Accordion, AccordionItem, Anchor, AnchoredRegion, Badge, Breadcrumb, BreadcrumbItem, Button, Card, Combobox, DataGrid, DataGridCell, DataGridRow, DesignSystemProvider, Dialog, DirectionalStyleSheetBehavior, Divider, Flipper, FluentDesignSystem, HorizontalScroll, HypertextStyles, LightweightButtonStyles, Listbox, Menu, MenuItem, NumberField, OptionStyles, OutlineButtonStyles, PaletteRGB, Progress, ProgressRing, Radio, RadioGroup, RadioStyles, Search, Select, Skeleton, Slider, SliderLabel, StandardLuminance, StealthButtonStyles, SwatchRGB, Switch, Tab, TabPanel, Tabs, TextArea, TextField, Toolbar, Tooltip, TreeItem, TreeView, accentBaseColor, accentFillActive, accentFillActiveDelta, accentFillFocus, accentFillFocusDelta, accentFillHover, accentFillHoverDelta, accentFillRecipe, accentFillRest, accentFillRestDelta, accentForegroundActive, accentForegroundActiveDelta, accentForegroundCut, accentForegroundCutLarge, accentForegroundFocus, accentForegroundFocusDelta, accentForegroundHover, accentForegroundHoverDelta, accentForegroundRecipe, accentForegroundRest, accentForegroundRestDelta, accentPalette, accentStrokeControlActive, accentStrokeControlFocus, accentStrokeControlHover, accentStrokeControlRecipe, accentStrokeControlRest, accordionItemStyles, accordionStyles, allComponents, ambientShadow, anchorStyles, anchoredRegionStyles, badgeStyles, baseButtonStyles, baseHeightMultiplier, baseHorizontalSpacingMultiplier, baseLayerLuminance, bodyFont, breadcrumbItemStyles, breadcrumbStyles, buttonStyles, cardStyles, checkboxStyles, comboboxStyles, controlCornerRadius, cornerRadius, dataGridCellStyles, dataGridRowStyles, dataGridStyles, density, designUnit, dialogStyles, direction, directionalShadow, disabledOpacity, dividerStyles, elevatedCornerRadius, elevation, elevationShadowCardActive, elevationShadowCardActiveSize, elevationShadowCardFocus, elevationShadowCardFocusSize, elevationShadowCardHover, elevationShadowCardHoverSize, elevationShadowCardRest, elevationShadowCardRestSize, elevationShadowDialog, elevationShadowDialogSize, elevationShadowFlyout, elevationShadowFlyoutSize, elevationShadowRecipe, elevationShadowTooltip, elevationShadowTooltipSize, fillColor, flipperStyles, fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegion, fluentBadge, fluentBreadcrumb, fluentBreadcrumbItem, fluentButton, fluentCalendar, fluentCard, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentMenu, fluentMenuItem, fluentNumberField, fluentOption, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSearch, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTab, fluentTabPanel, fluentTabs, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeItem, fluentTreeView, focusOutlineWidth, focusStrokeInner, focusStrokeInnerRecipe, focusStrokeOuter, focusStrokeOuterRecipe, focusStrokeWidth, fontWeight, foregroundOnAccentActive, foregroundOnAccentActiveLarge, foregroundOnAccentFocus, foregroundOnAccentFocusLarge, foregroundOnAccentHover, foregroundOnAccentHoverLarge, foregroundOnAccentLargeRecipe, foregroundOnAccentRecipe, foregroundOnAccentRest, foregroundOnAccentRestLarge, heightNumber, horizontalScrollStyles, inputFilledForcedColorStyles, inputFilledStyles, inputForcedColorStyles, inputStateStyles, inputStyles, isDark, layerCornerRadius, listboxStyles, menuItemStyles, menuStyles, neutralBaseColor, neutralContrastFillActive, neutralContrastFillActiveDelta, neutralContrastFillFocus, neutralContrastFillFocusDelta, neutralContrastFillHover, neutralContrastFillHoverDelta, neutralContrastFillRest, neutralContrastFillRestDelta, neutralDivider, neutralDividerRestDelta, neutralFillActive, neutralFillActiveDelta, neutralFillCard, neutralFillCardDelta, neutralFillFocus, neutralFillFocusDelta, neutralFillHover, neutralFillHoverDelta, neutralFillInputActive, neutralFillInputActiveDelta, neutralFillInputAltActive, neutralFillInputAltActiveDelta, neutralFillInputAltFocus, neutralFillInputAltFocusDelta, neutralFillInputAltHover, neutralFillInputAltHoverDelta, neutralFillInputAltRecipe, neutralFillInputAltRest, neutralFillInputAltRestDelta, neutralFillInputFocus, neutralFillInputFocusDelta, neutralFillInputHover, neutralFillInputHoverDelta, neutralFillInputRecipe, neutralFillInputRest, neutralFillInputRestDelta, neutralFillInverseActive, neutralFillInverseActiveDelta, neutralFillInverseFocus, neutralFillInverseFocusDelta, neutralFillInverseHover, neutralFillInverseHoverDelta, neutralFillInverseRecipe, neutralFillInverseRest, neutralFillInverseRestDelta, neutralFillLayerActive, neutralFillLayerActiveDelta, neutralFillLayerAltRecipe, neutralFillLayerAltRest, neutralFillLayerAltRestDelta, neutralFillLayerHover, neutralFillLayerHoverDelta, neutralFillLayerRecipe, neutralFillLayerRest, neutralFillLayerRestDelta, neutralFillRecipe, neutralFillRest, neutralFillRestDelta, neutralFillSecondaryActive, neutralFillSecondaryActiveDelta, neutralFillSecondaryFocus, neutralFillSecondaryFocusDelta, neutralFillSecondaryHover, neutralFillSecondaryHoverDelta, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralFillSecondaryRestDelta, neutralFillStealthActive, neutralFillStealthActiveDelta, neutralFillStealthFocus, neutralFillStealthFocusDelta, neutralFillStealthHover, neutralFillStealthHoverDelta, neutralFillStealthRecipe, neutralFillStealthRest, neutralFillStealthRestDelta, neutralFillStrongActive, neutralFillStrongActiveDelta, neutralFillStrongFocus, neutralFillStrongFocusDelta, neutralFillStrongHover, neutralFillStrongHoverDelta, neutralFillStrongRecipe, neutralFillStrongRest, neutralFillStrongRestDelta, neutralFillToggleActive, neutralFillToggleActiveDelta, neutralFillToggleFocus, neutralFillToggleFocusDelta, neutralFillToggleHover, neutralFillToggleHoverDelta, neutralFillToggleRest, neutralFillToggleRestDelta, neutralFocus, neutralFocusInnerAccent, neutralForegroundActive, neutralForegroundFocus, neutralForegroundHint, neutralForegroundHintRecipe, neutralForegroundHover, neutralForegroundRecipe, neutralForegroundRest, neutralLayer1, neutralLayer1Recipe, neutralLayer2, neutralLayer2Recipe, neutralLayer3, neutralLayer3Recipe, neutralLayer4, neutralLayer4Recipe, neutralLayerCardContainer, neutralLayerCardContainerRecipe, neutralLayerFloating, neutralLayerFloatingRecipe, neutralLayerL1, neutralLayerL2, neutralLayerL3, neutralLayerL4, neutralOutlineActive, neutralOutlineFocus, neutralOutlineHover, neutralOutlineRest, neutralPalette, neutralStrokeActive, neutralStrokeActiveDelta, neutralStrokeControlActive, neutralStrokeControlActiveDelta, neutralStrokeControlFocus, neutralStrokeControlFocusDelta, neutralStrokeControlHover, neutralStrokeControlHoverDelta, neutralStrokeControlRecipe, neutralStrokeControlRest, neutralStrokeControlRestDelta, neutralStrokeDividerRecipe, neutralStrokeDividerRest, neutralStrokeDividerRestDelta, neutralStrokeFocus, neutralStrokeFocusDelta, neutralStrokeHover, neutralStrokeHoverDelta, neutralStrokeInputActive, neutralStrokeInputFocus, neutralStrokeInputHover, neutralStrokeInputRecipe, neutralStrokeInputRest, neutralStrokeLayerActive, neutralStrokeLayerActiveDelta, neutralStrokeLayerHover, neutralStrokeLayerHoverDelta, neutralStrokeLayerRecipe, neutralStrokeLayerRest, neutralStrokeLayerRestDelta, neutralStrokeRecipe, neutralStrokeRest, neutralStrokeRestDelta, neutralStrokeStrongActive, neutralStrokeStrongActiveDelta, neutralStrokeStrongFocus, neutralStrokeStrongFocusDelta, neutralStrokeStrongHover, neutralStrokeStrongHoverDelta, neutralStrokeStrongRecipe, neutralStrokeStrongRest, numberFieldStyles, outlineWidth, progressRingStyles, progressStyles, provideFluentDesignSystem, radioGroupStyles, searchStyles, searchTemplate, selectStyles, skeletonStyles, sliderLabelStyles, sliderStyles, strokeWidth, switchStyles, tabPanelStyles, tabStyles, tabsStyles, textAreaStyles, textFieldStyles, treeItemStyles, treeViewStyles, typeRampBase, typeRampBaseFontSize, typeRampBaseFontVariations, typeRampBaseLineHeight, typeRampMinus1, typeRampMinus1FontSize, typeRampMinus1FontVariations, typeRampMinus1LineHeight, typeRampMinus2, typeRampMinus2FontSize, typeRampMinus2FontVariations, typeRampMinus2LineHeight, typeRampPlus1, typeRampPlus1FontSize, typeRampPlus1FontVariations, typeRampPlus1LineHeight, typeRampPlus2, typeRampPlus2FontSize, typeRampPlus2FontVariations, typeRampPlus2LineHeight, typeRampPlus3, typeRampPlus3FontSize, typeRampPlus3FontVariations, typeRampPlus3LineHeight, typeRampPlus4, typeRampPlus4FontSize, typeRampPlus4FontVariations, typeRampPlus4LineHeight, typeRampPlus5, typeRampPlus5FontSize, typeRampPlus5FontVariations, typeRampPlus5LineHeight, typeRampPlus6, typeRampPlus6FontSize, typeRampPlus6FontVariations, typeRampPlus6LineHeight };
|
|
26596
|
+
export { AccentButtonStyles, Accordion, AccordionItem, Anchor, AnchoredRegion, Badge, Breadcrumb, BreadcrumbItem, Button, Card, Combobox, DataGrid, DataGridCell, DataGridRow, DesignSystemProvider, Dialog, DirectionalStyleSheetBehavior, Divider, Flipper, FluentDesignSystem, HorizontalScroll, HypertextStyles, LightweightButtonStyles, Listbox, Menu, MenuItem, NumberField, OptionStyles, OutlineButtonStyles, PaletteRGB, Progress, ProgressRing, Radio, RadioGroup, RadioStyles, Search, Select, Skeleton, Slider, SliderLabel, StandardLuminance, StealthButtonStyles, SwatchRGB, Switch, Tab, TabPanel, Tabs, TextArea, TextField, Toolbar, Tooltip, TreeItem, TreeView, accentBaseColor, accentFillActive, accentFillActiveDelta, accentFillFocus, accentFillFocusDelta, accentFillHover, accentFillHoverDelta, accentFillRecipe, accentFillRest, accentFillRestDelta, accentForegroundActive, accentForegroundActiveDelta, accentForegroundCut, accentForegroundCutLarge, accentForegroundFocus, accentForegroundFocusDelta, accentForegroundHover, accentForegroundHoverDelta, accentForegroundRecipe, accentForegroundRest, accentForegroundRestDelta, accentPalette, accentStrokeControlActive, accentStrokeControlFocus, accentStrokeControlHover, accentStrokeControlRecipe, accentStrokeControlRest, accordionItemStyles, accordionStyles, allComponents, ambientShadow, anchorStyles, anchoredRegionStyles, badgeStyles, baseButtonStyles, baseHeightMultiplier, baseHorizontalSpacingMultiplier, baseLayerLuminance, bodyFont, breadcrumbItemStyles, breadcrumbStyles, buttonStyles, cardStyles, checkboxStyles, comboboxStyles, controlCornerRadius, cornerRadius, dataGridCellStyles, dataGridRowStyles, dataGridStyles, density, designUnit, dialogStyles, direction, directionalShadow, disabledOpacity, dividerStyles, elevatedCornerRadius, elevation, elevationShadowCardActive, elevationShadowCardActiveSize, elevationShadowCardFocus, elevationShadowCardFocusSize, elevationShadowCardHover, elevationShadowCardHoverSize, elevationShadowCardRest, elevationShadowCardRestSize, elevationShadowDialog, elevationShadowDialogSize, elevationShadowFlyout, elevationShadowFlyoutSize, elevationShadowRecipe, elevationShadowTooltip, elevationShadowTooltipSize, fillColor, flipperStyles, fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegion, fluentBadge, fluentBreadcrumb, fluentBreadcrumbItem, fluentButton, fluentCalendar, fluentCard, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentMenu, fluentMenuItem, fluentNumberField, fluentOption, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSearch, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTab, fluentTabPanel, fluentTabs, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeItem, fluentTreeView, focusOutlineWidth, focusStrokeInner, focusStrokeInnerRecipe, focusStrokeOuter, focusStrokeOuterRecipe, focusStrokeWidth, focusTreatmentBase, focusTreatmentTight, fontWeight, foregroundOnAccentActive, foregroundOnAccentActiveLarge, foregroundOnAccentFocus, foregroundOnAccentFocusLarge, foregroundOnAccentHover, foregroundOnAccentHoverLarge, foregroundOnAccentLargeRecipe, foregroundOnAccentRecipe, foregroundOnAccentRest, foregroundOnAccentRestLarge, heightNumber, horizontalScrollStyles, inputFilledForcedColorStyles, inputFilledStyles, inputForcedColorStyles, inputStateStyles, inputStyles, isDark, layerCornerRadius, listboxStyles, menuItemStyles, menuStyles, neutralBaseColor, neutralContrastFillActive, neutralContrastFillActiveDelta, neutralContrastFillFocus, neutralContrastFillFocusDelta, neutralContrastFillHover, neutralContrastFillHoverDelta, neutralContrastFillRest, neutralContrastFillRestDelta, neutralDivider, neutralDividerRestDelta, neutralFillActive, neutralFillActiveDelta, neutralFillCard, neutralFillCardDelta, neutralFillFocus, neutralFillFocusDelta, neutralFillHover, neutralFillHoverDelta, neutralFillInputActive, neutralFillInputActiveDelta, neutralFillInputAltActive, neutralFillInputAltActiveDelta, neutralFillInputAltFocus, neutralFillInputAltFocusDelta, neutralFillInputAltHover, neutralFillInputAltHoverDelta, neutralFillInputAltRecipe, neutralFillInputAltRest, neutralFillInputAltRestDelta, neutralFillInputFocus, neutralFillInputFocusDelta, neutralFillInputHover, neutralFillInputHoverDelta, neutralFillInputRecipe, neutralFillInputRest, neutralFillInputRestDelta, neutralFillInverseActive, neutralFillInverseActiveDelta, neutralFillInverseFocus, neutralFillInverseFocusDelta, neutralFillInverseHover, neutralFillInverseHoverDelta, neutralFillInverseRecipe, neutralFillInverseRest, neutralFillInverseRestDelta, neutralFillLayerActive, neutralFillLayerActiveDelta, neutralFillLayerAltRecipe, neutralFillLayerAltRest, neutralFillLayerAltRestDelta, neutralFillLayerHover, neutralFillLayerHoverDelta, neutralFillLayerRecipe, neutralFillLayerRest, neutralFillLayerRestDelta, neutralFillRecipe, neutralFillRest, neutralFillRestDelta, neutralFillSecondaryActive, neutralFillSecondaryActiveDelta, neutralFillSecondaryFocus, neutralFillSecondaryFocusDelta, neutralFillSecondaryHover, neutralFillSecondaryHoverDelta, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralFillSecondaryRestDelta, neutralFillStealthActive, neutralFillStealthActiveDelta, neutralFillStealthFocus, neutralFillStealthFocusDelta, neutralFillStealthHover, neutralFillStealthHoverDelta, neutralFillStealthRecipe, neutralFillStealthRest, neutralFillStealthRestDelta, neutralFillStrongActive, neutralFillStrongActiveDelta, neutralFillStrongFocus, neutralFillStrongFocusDelta, neutralFillStrongHover, neutralFillStrongHoverDelta, neutralFillStrongRecipe, neutralFillStrongRest, neutralFillStrongRestDelta, neutralFillToggleActive, neutralFillToggleActiveDelta, neutralFillToggleFocus, neutralFillToggleFocusDelta, neutralFillToggleHover, neutralFillToggleHoverDelta, neutralFillToggleRest, neutralFillToggleRestDelta, neutralFocus, neutralFocusInnerAccent, neutralForegroundActive, neutralForegroundFocus, neutralForegroundHint, neutralForegroundHintRecipe, neutralForegroundHover, neutralForegroundRecipe, neutralForegroundRest, neutralLayer1, neutralLayer1Recipe, neutralLayer2, neutralLayer2Recipe, neutralLayer3, neutralLayer3Recipe, neutralLayer4, neutralLayer4Recipe, neutralLayerCardContainer, neutralLayerCardContainerRecipe, neutralLayerFloating, neutralLayerFloatingRecipe, neutralLayerL1, neutralLayerL2, neutralLayerL3, neutralLayerL4, neutralOutlineActive, neutralOutlineFocus, neutralOutlineHover, neutralOutlineRest, neutralPalette, neutralStrokeActive, neutralStrokeActiveDelta, neutralStrokeControlActive, neutralStrokeControlActiveDelta, neutralStrokeControlFocus, neutralStrokeControlFocusDelta, neutralStrokeControlHover, neutralStrokeControlHoverDelta, neutralStrokeControlRecipe, neutralStrokeControlRest, neutralStrokeControlRestDelta, neutralStrokeDividerRecipe, neutralStrokeDividerRest, neutralStrokeDividerRestDelta, neutralStrokeFocus, neutralStrokeFocusDelta, neutralStrokeHover, neutralStrokeHoverDelta, neutralStrokeInputActive, neutralStrokeInputFocus, neutralStrokeInputHover, neutralStrokeInputRecipe, neutralStrokeInputRest, neutralStrokeLayerActive, neutralStrokeLayerActiveDelta, neutralStrokeLayerHover, neutralStrokeLayerHoverDelta, neutralStrokeLayerRecipe, neutralStrokeLayerRest, neutralStrokeLayerRestDelta, neutralStrokeRecipe, neutralStrokeRest, neutralStrokeRestDelta, neutralStrokeStrongActive, neutralStrokeStrongActiveDelta, neutralStrokeStrongFocus, neutralStrokeStrongFocusDelta, neutralStrokeStrongHover, neutralStrokeStrongHoverDelta, neutralStrokeStrongRecipe, neutralStrokeStrongRest, numberFieldStyles, outlineWidth, progressRingStyles, progressStyles, provideFluentDesignSystem, radioGroupStyles, searchStyles, searchTemplate, selectStyles, skeletonStyles, sliderLabelStyles, sliderStyles, strokeWidth, switchStyles, tabPanelStyles, tabStyles, tabsStyles, textAreaStyles, textFieldStyles, treeItemStyles, treeViewStyles, typeRampBase, typeRampBaseFontSize, typeRampBaseFontVariations, typeRampBaseLineHeight, typeRampMinus1, typeRampMinus1FontSize, typeRampMinus1FontVariations, typeRampMinus1LineHeight, typeRampMinus2, typeRampMinus2FontSize, typeRampMinus2FontVariations, typeRampMinus2LineHeight, typeRampPlus1, typeRampPlus1FontSize, typeRampPlus1FontVariations, typeRampPlus1LineHeight, typeRampPlus2, typeRampPlus2FontSize, typeRampPlus2FontVariations, typeRampPlus2LineHeight, typeRampPlus3, typeRampPlus3FontSize, typeRampPlus3FontVariations, typeRampPlus3LineHeight, typeRampPlus4, typeRampPlus4FontSize, typeRampPlus4FontVariations, typeRampPlus4LineHeight, typeRampPlus5, typeRampPlus5FontSize, typeRampPlus5FontVariations, typeRampPlus5LineHeight, typeRampPlus6, typeRampPlus6FontSize, typeRampPlus6FontVariations, typeRampPlus6LineHeight };
|