@fluentui/web-components 2.5.5 → 2.5.7
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/combobox/combobox.stories.d.ts +5 -0
- package/dist/dts/custom-elements.d.ts +3 -35
- package/dist/dts/number-field/index.d.ts +1 -1
- package/dist/dts/number-field/number-field.styles.d.ts +1 -2
- package/dist/dts/search/index.d.ts +1 -1
- package/dist/dts/search/search.styles.d.ts +2 -3
- package/dist/dts/select/index.d.ts +1 -1
- package/dist/dts/select/select.styles.d.ts +11 -3
- package/dist/dts/styles/focus.d.ts +13 -0
- package/dist/dts/styles/index.d.ts +1 -0
- package/dist/dts/styles/patterns/button.styles.d.ts +12 -6
- package/dist/dts/styles/patterns/input.styles.d.ts +13 -5
- package/dist/dts/text-area/index.d.ts +2 -18
- package/dist/dts/text-area/text-area.stories.d.ts +1 -17
- package/dist/dts/text-area/text-area.styles.d.ts +1 -2
- package/dist/dts/text-field/index.d.ts +2 -18
- package/dist/dts/text-field/text-field.stories.d.ts +1 -17
- package/dist/dts/text-field/text-field.styles.d.ts +1 -2
- package/dist/esm/accordion/accordion-item/accordion-item.styles.js +8 -10
- package/dist/esm/anchor/anchor.styles.js +3 -10
- package/dist/esm/breadcrumb-item/breadcrumb-item.styles.js +6 -10
- package/dist/esm/button/button.styles.js +14 -39
- package/dist/esm/checkbox/checkbox.styles.js +4 -8
- package/dist/esm/combobox/combobox.stories.js +7 -2
- package/dist/esm/combobox/combobox.styles.js +22 -23
- 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/number-field/number-field.styles.js +5 -16
- 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/search/search.styles.js +8 -11
- package/dist/esm/select/select.stories.js +2 -2
- package/dist/esm/select/select.styles.js +37 -110
- package/dist/esm/styles/focus.js +21 -0
- package/dist/esm/styles/index.js +1 -0
- package/dist/esm/styles/patterns/button.styles.js +194 -161
- package/dist/esm/styles/patterns/input.styles.js +113 -102
- 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/text-area/text-area.styles.js +5 -11
- package/dist/esm/text-field/text-field.styles.js +5 -11
- 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 +179 -397
- package/dist/web-components.d.ts +54 -90
- package/dist/web-components.js +158 -132
- package/dist/web-components.min.js +137 -156
- package/docs/api-report.md +44 -99
- package/karma.conf.js +3 -8
- package/package.json +27 -40
package/dist/web-components.js
CHANGED
|
@@ -23862,6 +23862,28 @@ const accordionStyles$1 = (context, definition) => css`
|
|
|
23862
23862
|
${display('flex')} :host{box-sizing:border-box;flex-direction:column;${typeRampBase}
|
|
23863
23863
|
color:${neutralForegroundRest};gap:calc(${designUnit} * 1px)}`;
|
|
23864
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
|
+
|
|
23865
23887
|
/**
|
|
23866
23888
|
* A formula to retrieve the control height.
|
|
23867
23889
|
* Use this as the value of any CSS property that
|
|
@@ -23887,8 +23909,9 @@ const neutralFillStealthActiveOnNeutralFillLayerRest = DesignToken.create('neutr
|
|
|
23887
23909
|
return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).active;
|
|
23888
23910
|
});
|
|
23889
23911
|
const accordionItemStyles$1 = (context, definition) => css`
|
|
23890
|
-
${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:
|
|
23891
|
-
|
|
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}}`));
|
|
23892
23915
|
|
|
23893
23916
|
/**
|
|
23894
23917
|
* The Fluent Accordion Item Element. Implements {@link @microsoft/fast-foundation#AccordionItem},
|
|
@@ -24150,49 +24173,59 @@ const elevationShadowDialogSize = DesignToken.create('elevation-shadow-dialog-si
|
|
|
24150
24173
|
|
|
24151
24174
|
const elevationShadowDialog = DesignToken.create('elevation-shadow-dialog').withDefault(element => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowDialogSize.getValueFor(element)));
|
|
24152
24175
|
|
|
24176
|
+
/**
|
|
24177
|
+
* The base styles for button controls, without `appearance` visual differences.
|
|
24178
|
+
*
|
|
24179
|
+
* @internal
|
|
24180
|
+
*/
|
|
24181
|
+
|
|
24182
|
+
const baseButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css`
|
|
24183
|
+
${display('inline-flex')}
|
|
24184
|
+
|
|
24185
|
+
:host{position:relative;box-sizing:border-box;${typeRampBase}
|
|
24186
|
+
height:calc(${heightNumber} * 1px);min-width:calc(${heightNumber} * 1px);color:${neutralForegroundRest};border-radius:calc(${controlCornerRadius} * 1px);fill:currentcolor}.control{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;font-family:inherit}.control,.end,.start{font:inherit}.control.icon-only{padding:0;line-height:0}.control:${focusVisible}{${focusTreatmentBase}}.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}`;
|
|
24153
24187
|
/**
|
|
24154
24188
|
* @internal
|
|
24155
24189
|
*/
|
|
24156
24190
|
|
|
24157
|
-
const
|
|
24158
|
-
${
|
|
24159
|
-
|
|
24160
|
-
: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};border-color:${SystemColors.Highlight} !important;box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.Highlight} !important}: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;border-color:${SystemColors.LinkText} !important;box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.LinkText} !important}`));
|
|
24191
|
+
const NeutralButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css`
|
|
24192
|
+
.control{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlRest}}:host(${interactivitySelector}:hover) .control{background:padding-box linear-gradient(${neutralFillHover},${neutralFillHover}),border-box ${neutralStrokeControlHover}}:host(${interactivitySelector}:active) .control{background:padding-box linear-gradient(${neutralFillActive},${neutralFillActive}),border-box ${neutralStrokeControlActive}}:host(${nonInteractivitySelector}) .control{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
24193
|
+
.control{background:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonText};color:${SystemColors.ButtonText}}:host(${interactivitySelector}:hover) .control,:host(${interactivitySelector}:active) .control{forced-color-adjust:none;background:${SystemColors.HighlightText};border-color:${SystemColors.Highlight};color:${SystemColors.Highlight}}:host(${nonInteractivitySelector}) .control{background:transparent;border-color:${SystemColors.GrayText};color:${SystemColors.GrayText}}.control:${focusVisible}{outline-color:${SystemColors.CanvasText}}:host([href]) .control{background:transparent;border-color:${SystemColors.LinkText};color:${SystemColors.LinkText}}:host([href]:hover) .control,:host([href]:active) .control{background:transparent;border-color:${SystemColors.CanvasText};color:${SystemColors.CanvasText}}`));
|
|
24161
24194
|
/**
|
|
24162
24195
|
* @internal
|
|
24163
24196
|
*/
|
|
24164
24197
|
|
|
24165
|
-
const AccentButtonStyles = (context, definition, interactivitySelector
|
|
24166
|
-
|
|
24167
|
-
|
|
24198
|
+
const AccentButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css`
|
|
24199
|
+
.control{background:padding-box linear-gradient(${accentFillRest},${accentFillRest}),border-box ${accentStrokeControlRest};color:${foregroundOnAccentRest}}:host(${interactivitySelector}:hover) .control{background:padding-box linear-gradient(${accentFillHover},${accentFillHover}),border-box ${accentStrokeControlHover};color:${foregroundOnAccentHover}}:host(${interactivitySelector}:active) .control{background:padding-box linear-gradient(${accentFillActive},${accentFillActive}),border-box ${accentStrokeControlActive};color:${foregroundOnAccentActive}}:host(${nonInteractivitySelector}) .control{background:${accentFillRest}}.control:${focusVisible}{box-shadow:0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeInner} inset !important}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
24200
|
+
.control{forced-color-adjust:none;background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host(${interactivitySelector}:hover) .control,:host(${interactivitySelector}:active) .control{background:${SystemColors.HighlightText};border-color:${SystemColors.Highlight};color:${SystemColors.Highlight}}:host(${nonInteractivitySelector}) .control{background:transparent;border-color:${SystemColors.GrayText};color:${SystemColors.GrayText}}.control:${focusVisible}{outline-color:${SystemColors.CanvasText};box-shadow:0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.HighlightText} inset !important}:host([href]) .control{background:${SystemColors.LinkText};color:${SystemColors.HighlightText}}:host([href]:hover) .control,:host([href]:active) .control{background:${SystemColors.ButtonFace};border-color:${SystemColors.LinkText};color:${SystemColors.LinkText}}`));
|
|
24168
24201
|
/**
|
|
24169
24202
|
* @internal
|
|
24170
24203
|
*/
|
|
24171
24204
|
|
|
24172
|
-
const HypertextStyles = (context, definition, interactivitySelector
|
|
24173
|
-
:host{height:auto;font-family:inherit;font-size:inherit;line-height:inherit;min-width:0}
|
|
24174
|
-
|
|
24205
|
+
const HypertextStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css`
|
|
24206
|
+
:host{height:auto;font-family:inherit;font-size:inherit;line-height:inherit;min-width:0}.control{display:inline;padding:0;border:none;box-shadow:none;line-height:1}:host(${interactivitySelector}) .control{color:${accentForegroundRest};text-decoration:underline 1px}:host(${interactivitySelector}:hover) .control{color:${accentForegroundHover};text-decoration:none}:host(${interactivitySelector}:active) .control{color:${accentForegroundActive};text-decoration:none}.control:${focusVisible}{${focusTreatmentTight}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
24207
|
+
:host(${interactivitySelector}) .control{color:${SystemColors.LinkText}}:host(${interactivitySelector}:hover) .control,:host(${interactivitySelector}:active) .control{color:${SystemColors.CanvasText}}.control:${focusVisible}{outline-color:${SystemColors.CanvasText}}`));
|
|
24175
24208
|
/**
|
|
24176
24209
|
* @internal
|
|
24177
24210
|
*/
|
|
24178
24211
|
|
|
24179
|
-
const LightweightButtonStyles = (context, definition, interactivitySelector
|
|
24180
|
-
:host{color:${accentForegroundRest}}
|
|
24181
|
-
:host
|
|
24212
|
+
const LightweightButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css`
|
|
24213
|
+
:host{color:${accentForegroundRest}}.control{background:${neutralFillStealthRest}}:host(${interactivitySelector}:hover) .control{background:${neutralFillStealthHover};color:${accentForegroundHover}}:host(${interactivitySelector}:active) .control{background:${neutralFillStealthActive};color:${accentForegroundActive}}:host(${nonInteractivitySelector}) .control{background:${neutralFillStealthRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
24214
|
+
:host{color:${SystemColors.ButtonText}}.control{forced-color-adjust:none;background:transparent}:host(${interactivitySelector}:hover) .control,:host(${interactivitySelector}:active) .control{background:transparent;border-color:${SystemColors.ButtonText};color:${SystemColors.ButtonText}}:host(${nonInteractivitySelector}) .control{background:transparent;color:${SystemColors.GrayText}}.control:${focusVisible}{outline-color:${SystemColors.CanvasText}}:host([href]) .control{color:${SystemColors.LinkText}}:host([href]:hover) .control,:host([href]:active) .control{border-color:${SystemColors.LinkText};color:${SystemColors.LinkText}}`));
|
|
24182
24215
|
/**
|
|
24183
24216
|
* @internal
|
|
24184
24217
|
*/
|
|
24185
24218
|
|
|
24186
|
-
const OutlineButtonStyles = (context, definition, interactivitySelector
|
|
24187
|
-
|
|
24188
|
-
|
|
24219
|
+
const OutlineButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css`
|
|
24220
|
+
.control{background:transparent !important;border-color:${neutralStrokeRest}}:host(${interactivitySelector}:hover) .control{border-color:${neutralStrokeHover}}:host(${interactivitySelector}:active) .control{border-color:${neutralStrokeActive}}:host(${nonInteractivitySelector}) .control{background:transparent !important;border-color:${neutralStrokeRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
24221
|
+
.control{border-color:${SystemColors.ButtonText};color:${SystemColors.ButtonText}}:host(${interactivitySelector}:hover) .control,:host(${interactivitySelector}:active) .control{background:${SystemColors.HighlightText};border-color:${SystemColors.Highlight};color:${SystemColors.Highlight}}:host(${nonInteractivitySelector}) .control{border-color:${SystemColors.GrayText};color:${SystemColors.GrayText}}.control:${focusVisible}{outline-color:${SystemColors.CanvasText}}:host([href]) .control{border-color:${SystemColors.LinkText};color:${SystemColors.LinkText}}:host([href]:hover) .control,:host([href]:active) .control{border-color:${SystemColors.CanvasText};color:${SystemColors.CanvasText}}`));
|
|
24189
24222
|
/**
|
|
24190
24223
|
* @internal
|
|
24191
24224
|
*/
|
|
24192
24225
|
|
|
24193
|
-
const StealthButtonStyles = (context, definition, interactivitySelector
|
|
24194
|
-
|
|
24195
|
-
|
|
24226
|
+
const StealthButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css`
|
|
24227
|
+
.control{background:${neutralFillStealthRest}}:host(${interactivitySelector}:hover) .control{background:${neutralFillStealthHover}}:host(${interactivitySelector}:active) .control{background:${neutralFillStealthActive}}:host(${nonInteractivitySelector}) .control{background:${neutralFillStealthRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
24228
|
+
.control{forced-color-adjust:none;background:transparent;color:${SystemColors.ButtonText}}:host(${interactivitySelector}:hover) .control,:host(${interactivitySelector}:active) .control{background:transparent;border-color:${SystemColors.ButtonText};color:${SystemColors.ButtonText}}:host(${nonInteractivitySelector}) .control{background:transparent;color:${SystemColors.GrayText}}.control:${focusVisible}{outline-color:${SystemColors.CanvasText}}:host([href]) .control{color:${SystemColors.LinkText}}:host([href]:hover) .control,:host([href]:active) .control{background:transparent;border-color:${SystemColors.LinkText};color:${SystemColors.LinkText}}`));
|
|
24196
24229
|
|
|
24197
24230
|
const placeholderRest = DesignToken.create('input-placeholder-rest').withDefault(target => {
|
|
24198
24231
|
const baseRecipe = neutralFillInputRecipe.getValueFor(target);
|
|
@@ -24215,37 +24248,46 @@ const filledPlaceholderHover = DesignToken.create('input-filled-placeholder-hove
|
|
|
24215
24248
|
return hintRecipe.evaluate(target, baseRecipe.evaluate(target).hover);
|
|
24216
24249
|
});
|
|
24217
24250
|
/**
|
|
24251
|
+
* The base styles for input controls, without `appearance` visual differences.
|
|
24252
|
+
*
|
|
24218
24253
|
* @internal
|
|
24219
24254
|
*/
|
|
24220
24255
|
|
|
24221
|
-
const
|
|
24256
|
+
const baseInputStyles = (context, definition, logicalControlSelector) => css`
|
|
24222
24257
|
:host{${typeRampBase}
|
|
24223
|
-
color:${neutralForegroundRest};fill:currentcolor;
|
|
24224
|
-
margin-bottom:4px}.label__hidden{display:none;visibility:hidden}:host(
|
|
24258
|
+
color:${neutralForegroundRest};fill:currentcolor;user-select:none;position:relative}${logicalControlSelector}{box-sizing:border-box;position:relative;color:inherit;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}
|
|
24259
|
+
margin-bottom:4px}.label__hidden{display:none;visibility:hidden}:host([disabled]) ${logicalControlSelector},:host([readonly]) ${logicalControlSelector},:host([disabled]) .label,:host([readonly]) .label,:host([disabled]) .control,:host([readonly]) .control{cursor:${disabledCursor}}:host([disabled]){opacity:${disabledOpacity}}`;
|
|
24225
24260
|
/**
|
|
24261
|
+
* The styles for active and focus interactions for input controls.
|
|
24262
|
+
*
|
|
24226
24263
|
* @internal
|
|
24227
24264
|
*/
|
|
24228
24265
|
|
|
24229
|
-
const inputStateStyles = (context, definition,
|
|
24230
|
-
:host(:not([disabled]):active)::after{left:50%;width:40%;transform:translateX(-50%);border-bottom-left-radius:0;border-bottom-right-radius:0}:host(:not([disabled]):focus-within)::after{left:0;width:100%;transform:none}:host(:not([disabled]):active)::after,:host(:not([disabled]):focus-within:not(:active))::after{content:'';position:absolute;height:calc(${focusStrokeWidth} * 1px);bottom:0;border-bottom:calc(${focusStrokeWidth} * 1px) solid ${accentFillRest};border-bottom-left-radius:calc(${controlCornerRadius} * 1px);border-bottom-right-radius:calc(${controlCornerRadius} * 1px);z-index:2;transition:all 300ms cubic-bezier(0.1,0.9,0.2,1)}`;
|
|
24266
|
+
const inputStateStyles = (context, definition, logicalControlSelector) => css`
|
|
24267
|
+
@media (forced-colors:none){:host(:not([disabled]):active)::after{left:50%;width:40%;transform:translateX(-50%);border-bottom-left-radius:0;border-bottom-right-radius:0}:host(:not([disabled]):focus-within)::after{left:0;width:100%;transform:none}:host(:not([disabled]):active)::after,:host(:not([disabled]):focus-within:not(:active))::after{content:'';position:absolute;height:calc(${focusStrokeWidth} * 1px);bottom:0;border-bottom:calc(${focusStrokeWidth} * 1px) solid ${accentFillRest};border-bottom-left-radius:calc(${controlCornerRadius} * 1px);border-bottom-right-radius:calc(${controlCornerRadius} * 1px);z-index:2;transition:all 300ms cubic-bezier(0.1,0.9,0.2,1)}}`;
|
|
24231
24268
|
/**
|
|
24269
|
+
* The visual styles for inputs with `appearance='outline'`.
|
|
24270
|
+
*
|
|
24232
24271
|
* @internal
|
|
24233
24272
|
*/
|
|
24234
24273
|
|
|
24235
|
-
const
|
|
24236
|
-
:host ${
|
|
24274
|
+
const inputOutlineStyles = (context, definition, logicalControlSelector, interactivitySelector = ':not([disabled]):not(:focus-within)') => css`
|
|
24275
|
+
${logicalControlSelector}{background:padding-box linear-gradient(${neutralFillInputRest},${neutralFillInputRest}),border-box ${neutralStrokeInputRest}}:host(${interactivitySelector}:hover) ${logicalControlSelector}{background:padding-box linear-gradient(${neutralFillInputHover},${neutralFillInputHover}),border-box ${neutralStrokeInputHover}}:host(:not([disabled]):focus-within) ${logicalControlSelector}{background:padding-box linear-gradient(${neutralFillInputFocus},${neutralFillInputFocus}),border-box ${neutralStrokeInputRest}}:host([disabled]) ${logicalControlSelector}{background:padding-box linear-gradient(${neutralFillInputRest},${neutralFillInputRest}),border-box ${neutralStrokeRest}}.control::placeholder{color:${placeholderRest}}:host(${interactivitySelector}:hover) .control::placeholder{color:${placeholderHover}}`;
|
|
24237
24276
|
/**
|
|
24277
|
+
* The visual styles for inputs with `appearance='filled'`.
|
|
24278
|
+
*
|
|
24238
24279
|
* @internal
|
|
24239
24280
|
*/
|
|
24240
24281
|
|
|
24241
|
-
const
|
|
24242
|
-
|
|
24282
|
+
const inputFilledStyles = (context, definition, logicalControlSelector, interactivitySelector = ':not([disabled]):not(:focus-within)') => css`
|
|
24283
|
+
${logicalControlSelector}{background:${neutralFillSecondaryRest}}:host(${interactivitySelector}:hover) ${logicalControlSelector}{background:${neutralFillSecondaryHover}}:host(:not([disabled]):focus-within) ${logicalControlSelector}{background:${neutralFillSecondaryFocus}}:host([disabled]) ${logicalControlSelector}{background:${neutralFillSecondaryRest}}.control::placeholder{color:${filledPlaceholderRest}}:host(${interactivitySelector}:hover) .control::placeholder{color:${filledPlaceholderHover}}`;
|
|
24243
24284
|
/**
|
|
24244
24285
|
* @internal
|
|
24245
24286
|
*/
|
|
24246
24287
|
|
|
24247
|
-
const
|
|
24248
|
-
:host
|
|
24288
|
+
const inputForcedColorStyles = (context, definition, logicalControlSelector, interactivitySelector = ':not([disabled]):not(:focus-within)') => css`
|
|
24289
|
+
:host{color:${SystemColors.ButtonText}}${logicalControlSelector}{background:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonText}}:host(${interactivitySelector}:hover) ${logicalControlSelector},:host(:not([disabled]):focus-within) ${logicalControlSelector}{border-color:${SystemColors.Highlight}}:host([disabled]) ${logicalControlSelector}{opacity:1;background:${SystemColors.ButtonFace};border-color:${SystemColors.GrayText}}.control::placeholder,:host(${interactivitySelector}:hover) .control::placeholder{color:${SystemColors.CanvasText}}:host(:not([disabled]):focus) ${logicalControlSelector}{${focusTreatmentBase}
|
|
24290
|
+
outline-color:${SystemColors.Highlight}}:host([disabled]){opacity:1;color:${SystemColors.GrayText}}:host([disabled]) ::placeholder,:host([disabled]) ::-webkit-input-placeholder{color:${SystemColors.GrayText}}`;
|
|
24249
24291
|
|
|
24250
24292
|
/**
|
|
24251
24293
|
* Behavior that will conditionally apply a stylesheet based on the elements
|
|
@@ -24261,11 +24303,8 @@ function appearanceBehavior(value, styles) {
|
|
|
24261
24303
|
return new PropertyStyleSheetBehavior('appearance', value, styles);
|
|
24262
24304
|
}
|
|
24263
24305
|
|
|
24264
|
-
const interactivitySelector$
|
|
24265
|
-
const
|
|
24266
|
-
const anchorStyles$1 = (context, definition) => css`
|
|
24267
|
-
:host .control:not([href]){cursor:default}${baseButtonStyles(context, definition, interactivitySelector$1, nonInteractivitySelector$1)}
|
|
24268
|
-
`.withBehaviors(appearanceBehavior('accent', AccentButtonStyles(context, definition, interactivitySelector$1, nonInteractivitySelector$1)), appearanceBehavior('hypertext', HypertextStyles(context, definition, interactivitySelector$1, nonInteractivitySelector$1)), appearanceBehavior('lightweight', LightweightButtonStyles(context, definition, interactivitySelector$1, nonInteractivitySelector$1)), appearanceBehavior('outline', OutlineButtonStyles(context, definition, interactivitySelector$1, nonInteractivitySelector$1)), appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector$1, nonInteractivitySelector$1)));
|
|
24306
|
+
const interactivitySelector$3 = '[href]';
|
|
24307
|
+
const anchorStyles$1 = (context, definition) => baseButtonStyles().withBehaviors(appearanceBehavior('neutral', NeutralButtonStyles(context, definition, interactivitySelector$3)), appearanceBehavior('accent', AccentButtonStyles(context, definition, interactivitySelector$3)), appearanceBehavior('hypertext', HypertextStyles(context, definition, interactivitySelector$3)), appearanceBehavior('lightweight', LightweightButtonStyles(context, definition, interactivitySelector$3)), appearanceBehavior('outline', OutlineButtonStyles(context, definition, interactivitySelector$3)), appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector$3)));
|
|
24269
24308
|
|
|
24270
24309
|
/**
|
|
24271
24310
|
* The Fluent version of Anchor
|
|
@@ -24443,8 +24482,8 @@ const fluentBreadcrumb = Breadcrumb.compose({
|
|
|
24443
24482
|
const breadcrumbStyles = breadcrumbStyles$1;
|
|
24444
24483
|
|
|
24445
24484
|
const breadcrumbItemStyles$1 = (context, definition) => css`
|
|
24446
|
-
${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)
|
|
24447
|
-
: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}
|
|
24485
|
+
${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`
|
|
24486
|
+
: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}}`));
|
|
24448
24487
|
|
|
24449
24488
|
/**
|
|
24450
24489
|
* The Fluent BreadcrumbItem Element. Implements {@link @microsoft/fast-foundation#BreadcrumbItem},
|
|
@@ -24476,22 +24515,11 @@ const fluentBreadcrumbItem = BreadcrumbItem.compose({
|
|
|
24476
24515
|
|
|
24477
24516
|
const breadcrumbItemStyles = breadcrumbItemStyles$1;
|
|
24478
24517
|
|
|
24479
|
-
const interactivitySelector = ':not([disabled])';
|
|
24480
|
-
const nonInteractivitySelector = '[disabled]';
|
|
24518
|
+
const interactivitySelector$2 = ':not([disabled])';
|
|
24519
|
+
const nonInteractivitySelector$1 = '[disabled]';
|
|
24481
24520
|
const buttonStyles$1 = (context, definition) => css`
|
|
24482
|
-
:host(
|
|
24483
|
-
`.withBehaviors(
|
|
24484
|
-
:host([disabled]){opacity:1}:host([disabled]) .control{border-color:${SystemColors.GrayText};color:${SystemColors.GrayText};fill:currentcolor}`), appearanceBehavior('accent', css`
|
|
24485
|
-
${AccentButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)},`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
24486
|
-
:host([disabled]) .control{background:${SystemColors.ButtonFace}}`))), appearanceBehavior('lightweight', css`
|
|
24487
|
-
${LightweightButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)},`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
24488
|
-
:host([disabled]) .control{border-color:${SystemColors.ButtonFace}}`))), appearanceBehavior('outline', css`
|
|
24489
|
-
${OutlineButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
|
|
24490
|
-
`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
24491
|
-
:host([disabled]) .control{border-color:${SystemColors.GrayText}}`))), appearanceBehavior('stealth', css`
|
|
24492
|
-
${StealthButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
|
|
24493
|
-
`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
24494
|
-
:host([disabled]) .control{border-color:${SystemColors.ButtonFace}}`))));
|
|
24521
|
+
:host(${interactivitySelector$2}) .control{cursor:pointer}:host(${nonInteractivitySelector$1}) .control{cursor:${disabledCursor}}@media (forced-colors:none){:host(${nonInteractivitySelector$1}) .control{opacity:${disabledOpacity}}}${baseButtonStyles(context, definition, interactivitySelector$2, nonInteractivitySelector$1)}
|
|
24522
|
+
`.withBehaviors(appearanceBehavior('neutral', NeutralButtonStyles(context, definition, interactivitySelector$2, nonInteractivitySelector$1)), appearanceBehavior('accent', AccentButtonStyles(context, definition, interactivitySelector$2, nonInteractivitySelector$1)), appearanceBehavior('lightweight', LightweightButtonStyles(context, definition, interactivitySelector$2, nonInteractivitySelector$1)), appearanceBehavior('outline', OutlineButtonStyles(context, definition, interactivitySelector$2, nonInteractivitySelector$1)), appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector$2, nonInteractivitySelector$1)));
|
|
24495
24523
|
|
|
24496
24524
|
/**
|
|
24497
24525
|
* The Fluent button class
|
|
@@ -24713,11 +24741,11 @@ const checkboxStyles$1 = (context, definition) => css`
|
|
|
24713
24741
|
* Chromium likes to select label text or the default slot when
|
|
24714
24742
|
* the checkbox is clicked. Maybe there is a better solution here?
|
|
24715
24743
|
*/
|
|
24716
|
-
''} 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};
|
|
24744
|
+
''} 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}
|
|
24717
24745
|
color:${neutralForegroundRest};${
|
|
24718
24746
|
/* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */
|
|
24719
|
-
''} 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{
|
|
24720
|
-
.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;
|
|
24747
|
+
''} 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`
|
|
24748
|
+
.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}}`));
|
|
24721
24749
|
|
|
24722
24750
|
/**
|
|
24723
24751
|
* The Fluent Checkbox Element. Implements {@link @microsoft/fast-foundation#Checkbox},
|
|
@@ -24751,21 +24779,37 @@ const fluentCheckbox = Checkbox.compose({
|
|
|
24751
24779
|
|
|
24752
24780
|
const checkboxStyles = checkboxStyles$1;
|
|
24753
24781
|
|
|
24754
|
-
const
|
|
24755
|
-
|
|
24756
|
-
|
|
24757
|
-
|
|
24758
|
-
|
|
24759
|
-
|
|
24760
|
-
|
|
24761
|
-
|
|
24762
|
-
|
|
24782
|
+
const logicalControlSelector$5 = '.control';
|
|
24783
|
+
const interactivitySelector$1 = ':not([disabled]):not([open])';
|
|
24784
|
+
const nonInteractivitySelector = '[disabled]';
|
|
24785
|
+
/**
|
|
24786
|
+
* The base styles for a select and combobox, without `appearance` visual differences.
|
|
24787
|
+
*
|
|
24788
|
+
* @internal
|
|
24789
|
+
*/
|
|
24790
|
+
|
|
24791
|
+
const baseSelectStyles = (context, definition) => css`
|
|
24792
|
+
${display('inline-flex')}
|
|
24793
|
+
|
|
24794
|
+
:host{border-radius:calc(${controlCornerRadius} * 1px);box-sizing:border-box;color:${neutralForegroundRest};fill:currentcolor;font-family:${bodyFont};position:relative;user-select:none;min-width:250px;vertical-align:top}.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);overflow-y:auto;position:absolute;width:100%;z-index:1;margin:1px 0;border:calc(${strokeWidth} * 1px) solid transparent}.listbox[hidden]{display:none}.control{border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px);height:calc(${heightNumber} * 1px);align-items:center;box-sizing:border-box;cursor:pointer;display:flex;${typeRampBase}
|
|
24795
|
+
min-height:100%;padding:0 calc(${designUnit} * 2.25px);width:100%}:host(:${focusVisible}){${focusTreatmentBase}}:host([disabled]) .control{cursor:${disabledCursor};opacity:${disabledOpacity};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}`;
|
|
24796
|
+
/**
|
|
24797
|
+
* @internal
|
|
24798
|
+
*/
|
|
24799
|
+
|
|
24800
|
+
const baseSelectForcedColorStyles = (context, definition) => css`
|
|
24801
|
+
:host([open]) .listbox{background:${SystemColors.ButtonFace};border-color:${SystemColors.CanvasText}}`;
|
|
24802
|
+
const selectStyles$1 = (context, definition) => baseSelectStyles().withBehaviors(appearanceBehavior('outline', NeutralButtonStyles(context, definition, interactivitySelector$1, nonInteractivitySelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector$5, interactivitySelector$1).withBehaviors(forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector$5, interactivitySelector$1)))), appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector$1, nonInteractivitySelector)), forcedColorsStylesheetBehavior(baseSelectForcedColorStyles()));
|
|
24763
24803
|
|
|
24804
|
+
const logicalControlSelector$4 = '.control';
|
|
24805
|
+
const interactivitySelector = ':not([disabled]):not([open])';
|
|
24764
24806
|
const comboboxStyles$1 = (context, definition) => css`
|
|
24765
|
-
${
|
|
24807
|
+
${baseSelectStyles()}
|
|
24808
|
+
|
|
24809
|
+
${inputStateStyles()}
|
|
24766
24810
|
|
|
24767
24811
|
: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}
|
|
24768
|
-
|
|
24812
|
+
height:calc(100% - ${strokeWidth} * 1px));margin:auto 0;width:100%;outline:none}`.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector$4, interactivitySelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector$4, interactivitySelector)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector$4, interactivitySelector)));
|
|
24769
24813
|
|
|
24770
24814
|
/**
|
|
24771
24815
|
* The Fluent combobox class
|
|
@@ -24844,9 +24888,9 @@ const dataGridRowStyles$1 = (context, definition) => css`
|
|
|
24844
24888
|
:host{}`));
|
|
24845
24889
|
|
|
24846
24890
|
const dataGridCellStyles$1 = (context, definition) => css`
|
|
24847
|
-
:host{padding:calc(${designUnit} * 1px) calc(${designUnit} *
|
|
24848
|
-
border:transparent calc(${
|
|
24849
|
-
:host{forced-color-adjust:none;
|
|
24891
|
+
:host{padding:calc((${designUnit} + ${focusStrokeWidth} - ${strokeWidth}) * 1px) calc(((${designUnit} * 3) + ${focusStrokeWidth} - ${strokeWidth}) * 1px);color:${neutralForegroundRest};box-sizing:border-box;${typeRampBase}
|
|
24892
|
+
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`
|
|
24893
|
+
:host{forced-color-adjust:none;background:${SystemColors.Field};color:${SystemColors.FieldText}}:host(:${focusVisible}){outline-color:${SystemColors.FieldText}}`));
|
|
24850
24894
|
|
|
24851
24895
|
/**
|
|
24852
24896
|
* The Fluent Data Grid Cell Element.
|
|
@@ -25353,8 +25397,8 @@ const fluentDivider = Divider.compose({
|
|
|
25353
25397
|
const dividerStyles = dividerStyles$1;
|
|
25354
25398
|
|
|
25355
25399
|
const flipperStyles$1 = (context, definition) => css`
|
|
25356
|
-
${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(${
|
|
25357
|
-
: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;
|
|
25400
|
+
${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`
|
|
25401
|
+
: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}}`));
|
|
25358
25402
|
|
|
25359
25403
|
/**
|
|
25360
25404
|
* The Fluent Flipper Element. Implements {@link @microsoft/fast-foundation#Flipper},
|
|
@@ -25450,7 +25494,7 @@ const fluentHorizontalScroll = HorizontalScroll.compose({
|
|
|
25450
25494
|
const horizontalScrollStyles = horizontalScrollStyles$1;
|
|
25451
25495
|
|
|
25452
25496
|
const listboxStyles$1 = (context, definition) => css`
|
|
25453
|
-
${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
|
|
25497
|
+
${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}}`;
|
|
25454
25498
|
|
|
25455
25499
|
class Listbox extends Listbox$1 {}
|
|
25456
25500
|
/**
|
|
@@ -25478,8 +25522,9 @@ const listboxStyles = listboxStyles$1;
|
|
|
25478
25522
|
|
|
25479
25523
|
const optionStyles = (context, definition) => css`
|
|
25480
25524
|
${display('inline-flex')} :host{position:relative;${typeRampBase}
|
|
25481
|
-
background:${neutralFillStealthRest};border-radius:calc(${controlCornerRadius} * 1px);border:calc(${
|
|
25482
|
-
|
|
25525
|
+
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}
|
|
25526
|
+
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`
|
|
25527
|
+
: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}}`));
|
|
25483
25528
|
|
|
25484
25529
|
/**
|
|
25485
25530
|
* The Fluent option Custom Element. Implements {@link @microsoft/fast-foundation#ListboxOption}
|
|
@@ -25505,7 +25550,7 @@ const fluentOption = ListboxOption.compose({
|
|
|
25505
25550
|
const OptionStyles = optionStyles;
|
|
25506
25551
|
|
|
25507
25552
|
const menuStyles$1 = (context, definition) => css`
|
|
25508
|
-
${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`
|
|
25553
|
+
${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`
|
|
25509
25554
|
:host([slot='submenu']){background:${SystemColors.Canvas};border-color:${SystemColors.CanvasText}}`));
|
|
25510
25555
|
|
|
25511
25556
|
/**
|
|
@@ -25548,8 +25593,8 @@ const menuStyles = menuStyles$1;
|
|
|
25548
25593
|
|
|
25549
25594
|
const menuItemStyles$1 = (context, definition) => css`
|
|
25550
25595
|
${display('grid')} :host{contain:layout;overflow:visible;${typeRampBase}
|
|
25551
|
-
|
|
25552
|
-
: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};
|
|
25596
|
+
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`
|
|
25597
|
+
: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`
|
|
25553
25598
|
.expand-collapse-glyph-container{transform:rotate(0deg)}`, css`
|
|
25554
25599
|
.expand-collapse-glyph-container{transform:rotate(180deg)}`));
|
|
25555
25600
|
|
|
@@ -25590,21 +25635,15 @@ const fluentMenuItem = MenuItem.compose({
|
|
|
25590
25635
|
|
|
25591
25636
|
const menuItemStyles = menuItemStyles$1;
|
|
25592
25637
|
|
|
25593
|
-
const
|
|
25594
|
-
${inputFilledStyles(context, definition, '.root')}
|
|
25595
|
-
`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
25596
|
-
${inputFilledForcedColorStyles(context, definition, '.root')}
|
|
25597
|
-
`));
|
|
25638
|
+
const logicalControlSelector$3 = '.root';
|
|
25598
25639
|
const numberFieldStyles$1 = (context, definition) => css`
|
|
25599
25640
|
${display('inline-block')}
|
|
25600
25641
|
|
|
25601
|
-
${
|
|
25642
|
+
${baseInputStyles(context, definition, logicalControlSelector$3)}
|
|
25602
25643
|
|
|
25603
25644
|
${inputStateStyles()}
|
|
25604
25645
|
|
|
25605
|
-
.root{display:flex;flex-direction:row}.control{-webkit-appearance:none;color:inherit;background:transparent;border:0;height:calc(100% - 4px);margin-top:auto;margin-bottom:auto;padding:0 calc(${designUnit} * 2px + 1px);font-family:inherit;font-size:inherit;line-height:inherit}.start,.end{margin:auto;fill:currentcolor}.start{display:flex;margin-inline-start:11px}.end{display:flex;margin-inline-end:11px}.controls{opacity:0;position:relative;top:-1px;z-index:3}:host(:hover:not([disabled])) .controls,:host(:focus-within:not([disabled])) .controls{opacity:1}.step-up,.step-down{display:flex;padding:0 8px;cursor:pointer}.step-up{padding-top:3px}`.withBehaviors(appearanceBehavior('filled',
|
|
25606
|
-
${inputForcedColorStyles(context, definition, '.root')}
|
|
25607
|
-
.step-up,.step-down{fill:${SystemColors.FieldText}}`));
|
|
25646
|
+
.root{display:flex;flex-direction:row}.control{-webkit-appearance:none;color:inherit;background:transparent;border:0;height:calc(100% - 4px);margin-top:auto;margin-bottom:auto;padding:0 calc(${designUnit} * 2px + 1px);font-family:inherit;font-size:inherit;line-height:inherit}.start,.end{margin:auto;fill:currentcolor}.start{display:flex;margin-inline-start:11px}.end{display:flex;margin-inline-end:11px}.controls{opacity:0;position:relative;top:-1px;z-index:3}:host(:hover:not([disabled])) .controls,:host(:focus-within:not([disabled])) .controls{opacity:1}.step-up,.step-down{display:flex;padding:0 8px;cursor:pointer}.step-up{padding-top:3px}`.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector$3)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector$3)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector$3)));
|
|
25608
25647
|
|
|
25609
25648
|
/**
|
|
25610
25649
|
* The Fluent number field class
|
|
@@ -25666,7 +25705,7 @@ const fluentNumberField = NumberField.compose({
|
|
|
25666
25705
|
});
|
|
25667
25706
|
|
|
25668
25707
|
const progressStyles$1 = (context, definition) => css`
|
|
25669
|
-
${display('flex')} :host{align-items:center;
|
|
25708
|
+
${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`
|
|
25670
25709
|
.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}}`));
|
|
25671
25710
|
|
|
25672
25711
|
/**
|
|
@@ -25704,7 +25743,7 @@ const fluentProgress = Progress.compose({
|
|
|
25704
25743
|
const progressStyles = progressStyles$1;
|
|
25705
25744
|
|
|
25706
25745
|
const progressRingStyles$1 = (context, definition) => css`
|
|
25707
|
-
${display('flex')} :host{align-items:center;
|
|
25746
|
+
${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`
|
|
25708
25747
|
.background{stroke:${SystemColors.Field}}.determinate,.indeterminate-indicator-1{stroke:${SystemColors.ButtonText}}:host(.paused) .determinate,:host(.paused) .indeterminate-indicator-1{stroke:${SystemColors.GrayText}}`));
|
|
25709
25748
|
|
|
25710
25749
|
/**
|
|
@@ -25759,11 +25798,12 @@ const radioStyles = (context, definition) => css`
|
|
|
25759
25798
|
* Chromium likes to select label text or the default slot when
|
|
25760
25799
|
* the radio button is clicked. Maybe there is a better solution here?
|
|
25761
25800
|
*/
|
|
25762
|
-
''} 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};
|
|
25801
|
+
''} 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}
|
|
25763
25802
|
color:${neutralForegroundRest};${
|
|
25764
25803
|
/* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */
|
|
25765
|
-
''} 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{
|
|
25766
|
-
|
|
25804
|
+
''} 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}
|
|
25805
|
+
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`
|
|
25806
|
+
.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}}`));
|
|
25767
25807
|
|
|
25768
25808
|
/**
|
|
25769
25809
|
* The Fluent Radio Element. Implements {@link @microsoft/fast-foundation#Radio},
|
|
@@ -25826,6 +25866,7 @@ const searchTemplate = (context, definition) => html`<template class=" ${x => x.
|
|
|
25826
25866
|
filter: whitespaceFilter
|
|
25827
25867
|
})}></slot></label><div class="root" part="root" ${ref('root')}>${startSlotTemplate(context, definition)}<div class="input-wrapper" part="input-wrapper"><input class="control" part="control" id="control" @input="${x => x.handleTextInput()}" @change="${x => x.handleChange()}" ?autofocus="${x => x.autofocus}" ?disabled="${x => x.disabled}" list="${x => x.list}" maxlength="${x => x.maxlength}" minlength="${x => x.minlength}" pattern="${x => x.pattern}" placeholder="${x => x.placeholder}" ?readonly="${x => x.readOnly}" ?required="${x => x.required}" size="${x => x.size}" ?spellcheck="${x => x.spellcheck}" :value="${x => x.value}" type="search" aria-atomic="${x => x.ariaAtomic}" aria-busy="${x => x.ariaBusy}" aria-controls="${x => x.ariaControls}" aria-current="${x => x.ariaCurrent}" aria-describedby="${x => x.ariaDescribedby}" aria-details="${x => x.ariaDetails}" aria-disabled="${x => x.ariaDisabled}" aria-errormessage="${x => x.ariaErrormessage}" aria-flowto="${x => x.ariaFlowto}" aria-haspopup="${x => x.ariaHaspopup}" aria-hidden="${x => x.ariaHidden}" aria-invalid="${x => x.ariaInvalid}" aria-keyshortcuts="${x => x.ariaKeyshortcuts}" aria-label="${x => x.ariaLabel}" aria-labelledby="${x => x.ariaLabelledby}" aria-live="${x => x.ariaLive}" aria-owns="${x => x.ariaOwns}" aria-relevant="${x => x.ariaRelevant}" aria-roledescription="${x => x.ariaRoledescription}" ${ref('control')} /><slot name="clear-button"><button class="clear-button ${x => x.value ? '' : 'clear-button__hidden'}" part="clear-button" tabindex="-1" @click=${x => x.handleClearInput()}><slot name="clear-glyph"><svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="m2.09 2.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L6 5.29l3.15-3.14a.5.5 0 1 1 .7.7L6.71 6l3.14 3.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L6 6.71 2.85 9.85a.5.5 0 0 1-.7-.7L5.29 6 2.15 2.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z" /></svg></slot></button></slot></div>${endSlotTemplate(context, definition)}</div></template>`;
|
|
25828
25868
|
|
|
25869
|
+
const logicalControlSelector$2 = '.root';
|
|
25829
25870
|
const clearButtonHover = DesignToken.create("clear-button-hover").withDefault(target => {
|
|
25830
25871
|
const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
|
|
25831
25872
|
const inputRecipe = neutralFillInputRecipe.getValueFor(target);
|
|
@@ -25836,19 +25877,15 @@ const clearButtonActive = DesignToken.create("clear-button-active").withDefault(
|
|
|
25836
25877
|
const inputRecipe = neutralFillInputRecipe.getValueFor(target);
|
|
25837
25878
|
return buttonRecipe.evaluate(target, inputRecipe.evaluate(target).focus).active;
|
|
25838
25879
|
});
|
|
25839
|
-
const searchFilledStyles = (context, definition) => css`
|
|
25840
|
-
${inputFilledStyles(context, definition, '.root')}
|
|
25841
|
-
`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
25842
|
-
${inputFilledForcedColorStyles(context, definition, '.root')}
|
|
25843
|
-
`));
|
|
25844
25880
|
const searchStyles$1 = (context, definition) => css`
|
|
25845
25881
|
${display('inline-block')}
|
|
25846
|
-
|
|
25882
|
+
|
|
25883
|
+
${baseInputStyles(context, definition, logicalControlSelector$2)}
|
|
25884
|
+
|
|
25847
25885
|
${inputStateStyles()}
|
|
25886
|
+
|
|
25848
25887
|
.root{display:flex;flex-direction:row}.control{-webkit-appearance:none;color:inherit;background:transparent;border:0;height:calc(100% - 4px);margin-top:auto;margin-bottom:auto;padding:0 calc(${designUnit} * 2px + 1px);font-family:inherit;font-size:inherit;line-height:inherit}.clear-button{display:inline-flex;align-items:center;margin:1px;height:calc(100% - 2px);opacity:0;background:transparent;color:${neutralForegroundRest};fill:currentcolor;border:none;border-radius:calc(${controlCornerRadius} * 1px);min-width:calc(${heightNumber} * 1px);${typeRampBase}
|
|
25849
|
-
outline:none;padding:0 calc((10 + (${designUnit} * 2 * ${density})) * 1px)}.clear-button:hover{background:${clearButtonHover}}.clear-button:active{background:${clearButtonActive}}:host(:hover:not([disabled],[readOnly])) .clear-button,:host(:active:not([disabled],[readOnly])) .clear-button,:host(:focus-within:not([disabled],[readOnly])) .clear-button{opacity:1}:host(:hover:not([disabled],[readOnly])) .clear-button__hidden,:host(:active:not([disabled],[readOnly])) .clear-button__hidden,:host(:focus-within:not([disabled],[readOnly])) .clear-button__hidden{opacity:0}.control::-webkit-search-cancel-button{-webkit-appearance:none}.input-wrapper{display:flex;position:relative;width:100%}.start,.end{display:flex;margin:1px;align-items:center}.start{display:flex;margin-inline-start:11px}::slotted([slot="end"]){height:100%}.clear-button__hidden{opacity:0}.end{margin-inline-end:11px}::slotted(${context.tagFor(Button$1)}){margin-inline-end:1px}`.withBehaviors(appearanceBehavior('filled',
|
|
25850
|
-
${inputForcedColorStyles(context, definition, '.root')}
|
|
25851
|
-
`));
|
|
25888
|
+
outline:none;padding:0 calc((10 + (${designUnit} * 2 * ${density})) * 1px)}.clear-button:hover{background:${clearButtonHover}}.clear-button:active{background:${clearButtonActive}}:host(:hover:not([disabled],[readOnly])) .clear-button,:host(:active:not([disabled],[readOnly])) .clear-button,:host(:focus-within:not([disabled],[readOnly])) .clear-button{opacity:1}:host(:hover:not([disabled],[readOnly])) .clear-button__hidden,:host(:active:not([disabled],[readOnly])) .clear-button__hidden,:host(:focus-within:not([disabled],[readOnly])) .clear-button__hidden{opacity:0}.control::-webkit-search-cancel-button{-webkit-appearance:none}.input-wrapper{display:flex;position:relative;width:100%}.start,.end{display:flex;margin:1px;align-items:center}.start{display:flex;margin-inline-start:11px}::slotted([slot="end"]){height:100%}.clear-button__hidden{opacity:0}.end{margin-inline-end:11px}::slotted(${context.tagFor(Button$1)}){margin-inline-end:1px}`.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector$2)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector$2)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector$2)));
|
|
25852
25889
|
|
|
25853
25890
|
/**
|
|
25854
25891
|
* The Fluent search class
|
|
@@ -26058,11 +26095,12 @@ const switchStyles$1 = (context, definition) => css`
|
|
|
26058
26095
|
* Chromium likes to select label text or the default slot when
|
|
26059
26096
|
* the checkbox is clicked. Maybe there is a better solution here?
|
|
26060
26097
|
*/
|
|
26061
|
-
''} 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;
|
|
26062
|
-
|
|
26098
|
+
''} 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}
|
|
26099
|
+
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}
|
|
26100
|
+
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`
|
|
26063
26101
|
slot[name='switch']{left:0}:host(.checked) slot[name='switch']{left:100%;transform:translateX(-100%)}`, css`
|
|
26064
26102
|
slot[name='switch']{right:0}:host(.checked) slot[name='switch']{right:100%;transform:translateX(100%)}`), forcedColorsStylesheetBehavior(css`
|
|
26065
|
-
: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};
|
|
26103
|
+
: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}}`));
|
|
26066
26104
|
|
|
26067
26105
|
/**
|
|
26068
26106
|
* The Fluent Switch Custom Element. Implements {@link @microsoft/fast-foundation#Switch},
|
|
@@ -26098,8 +26136,8 @@ const tabsStyles$1 = (context, definition) => css`
|
|
|
26098
26136
|
|
|
26099
26137
|
const tabStyles$1 = (context, definition) => css`
|
|
26100
26138
|
${display('inline-flex')} :host{box-sizing:border-box;${typeRampBase}
|
|
26101
|
-
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
|
|
26102
|
-
: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;
|
|
26139
|
+
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`
|
|
26140
|
+
: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}}`));
|
|
26103
26141
|
|
|
26104
26142
|
/**
|
|
26105
26143
|
* The Fluent Tab Custom Element. Implements {@link @microsoft/fast-foundation#Tab},
|
|
@@ -26171,21 +26209,15 @@ const fluentTabs = Tabs.compose({
|
|
|
26171
26209
|
|
|
26172
26210
|
const tabsStyles = tabsStyles$1;
|
|
26173
26211
|
|
|
26174
|
-
const
|
|
26175
|
-
${inputFilledStyles(context, definition, '.control')}
|
|
26176
|
-
`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
26177
|
-
${inputFilledForcedColorStyles(context, definition, '.control')}
|
|
26178
|
-
`));
|
|
26212
|
+
const logicalControlSelector$1 = '.control';
|
|
26179
26213
|
const textAreaStyles$1 = (context, definition) => css`
|
|
26180
26214
|
${display('inline-flex')}
|
|
26181
26215
|
|
|
26182
|
-
${
|
|
26216
|
+
${baseInputStyles(context, definition, logicalControlSelector$1)}
|
|
26183
26217
|
|
|
26184
26218
|
${inputStateStyles()}
|
|
26185
26219
|
|
|
26186
|
-
:host{flex-direction:column;vertical-align:bottom}.control{height:calc((${heightNumber} * 2) * 1px);padding:calc(${designUnit} * 1.5px) calc(${designUnit} * 2px + 1px)}:host .control{resize:none}:host(.resize-both) .control{resize:both}:host(.resize-horizontal) .control{resize:horizontal}:host(.resize-vertical) .control{resize:vertical}`.withBehaviors(appearanceBehavior('filled',
|
|
26187
|
-
${inputForcedColorStyles(context, definition, '.control')}
|
|
26188
|
-
`));
|
|
26220
|
+
:host{flex-direction:column;vertical-align:bottom}.control{height:calc((${heightNumber} * 2) * 1px);padding:calc(${designUnit} * 1.5px) calc(${designUnit} * 2px + 1px)}:host .control{resize:none}:host(.resize-both) .control{resize:both}:host(.resize-horizontal) .control{resize:horizontal}:host(.resize-vertical) .control{resize:vertical}`.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector$1)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector$1)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector$1)));
|
|
26189
26221
|
|
|
26190
26222
|
/**
|
|
26191
26223
|
* The Fluent TextArea class
|
|
@@ -26247,21 +26279,15 @@ const fluentTextArea = TextArea.compose({
|
|
|
26247
26279
|
|
|
26248
26280
|
const textAreaStyles = textAreaStyles$1;
|
|
26249
26281
|
|
|
26250
|
-
const
|
|
26251
|
-
${inputFilledStyles(context, definition, '.root')}
|
|
26252
|
-
`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
26253
|
-
${inputFilledForcedColorStyles(context, definition, '.root')}
|
|
26254
|
-
`));
|
|
26282
|
+
const logicalControlSelector = '.root';
|
|
26255
26283
|
const textFieldStyles$1 = (context, definition) => css`
|
|
26256
26284
|
${display('inline-block')}
|
|
26257
26285
|
|
|
26258
|
-
${
|
|
26286
|
+
${baseInputStyles(context, definition, logicalControlSelector)}
|
|
26259
26287
|
|
|
26260
26288
|
${inputStateStyles()}
|
|
26261
26289
|
|
|
26262
|
-
.root{display:flex;flex-direction:row}.control{-webkit-appearance:none;color:inherit;background:transparent;border:0;height:calc(100% - 4px);margin-top:auto;margin-bottom:auto;padding:0 calc(${designUnit} * 2px + 1px);font-family:inherit;font-size:inherit;line-height:inherit}.start,.end{display:flex;margin:auto}.start{display:flex;margin-inline-start:11px}.end{display:flex;margin-inline-end:11px}`.withBehaviors(appearanceBehavior('filled',
|
|
26263
|
-
${inputForcedColorStyles(context, definition, '.root')}
|
|
26264
|
-
`));
|
|
26290
|
+
.root{display:flex;flex-direction:row}.control{-webkit-appearance:none;color:inherit;background:transparent;border:0;height:calc(100% - 4px);margin-top:auto;margin-bottom:auto;padding:0 calc(${designUnit} * 2px + 1px);font-family:inherit;font-size:inherit;line-height:inherit}.start,.end{display:flex;margin:auto}.start{display:flex;margin-inline-start:11px}.end{display:flex;margin-inline-end:11px}`.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector)));
|
|
26265
26291
|
|
|
26266
26292
|
/**
|
|
26267
26293
|
* The Fluent text field class
|
|
@@ -26324,11 +26350,11 @@ const fluentTextField = TextField.compose({
|
|
|
26324
26350
|
const textFieldStyles = textFieldStyles$1;
|
|
26325
26351
|
|
|
26326
26352
|
const toolbarStyles = (context, definition) => css`
|
|
26327
|
-
${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}){
|
|
26353
|
+
${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){${
|
|
26328
26354
|
/* Glyph size is temporary - replace when adaptive typography is figured out */
|
|
26329
26355
|
''}
|
|
26330
26356
|
width:16px;height:16px}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
26331
|
-
:host(:${focusVisible}){
|
|
26357
|
+
:host(:${focusVisible}){outline-color:${SystemColors.Highlight};color:${SystemColors.ButtonText};forced-color-adjust:none}`));
|
|
26332
26358
|
|
|
26333
26359
|
/**
|
|
26334
26360
|
* The Fluent toolbar class
|
|
@@ -26391,7 +26417,7 @@ const fluentTooltip = Tooltip.compose({
|
|
|
26391
26417
|
});
|
|
26392
26418
|
|
|
26393
26419
|
const treeViewStyles$1 = (context, definition) => css`
|
|
26394
|
-
:host([hidden]){display:none}${display('flex')} :host{flex-direction:column;align-items:stretch;min-width:fit-content;font-size:0}
|
|
26420
|
+
:host([hidden]){display:none}${display('flex')} :host{flex-direction:column;align-items:stretch;min-width:fit-content;font-size:0}`;
|
|
26395
26421
|
|
|
26396
26422
|
/**
|
|
26397
26423
|
* The Fluent tree view Custom Element. Implements, {@link @microsoft/fast-foundation#TreeView}
|
|
@@ -26431,10 +26457,10 @@ const selectedExpandCollapseHover = DesignToken.create('tree-item-expand-collaps
|
|
|
26431
26457
|
return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).hover;
|
|
26432
26458
|
});
|
|
26433
26459
|
const treeItemStyles$1 = (context, definition) => css`
|
|
26434
|
-
${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}
|
|
26460
|
+
${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;${
|
|
26435
26461
|
/* Font size should be based off calc(1em + (design-unit + glyph-size-number) * 1px) -
|
|
26436
26462
|
update when density story is figured out */
|
|
26437
|
-
''} font-size:calc(1em + (${designUnit} + 16) * 1px)}.expand-collapse-button{background:none;border:none;border-radius:calc(${controlCornerRadius} * 1px)
|
|
26463
|
+
''} font-size:calc(1em + (${designUnit} + 16) * 1px)}.expand-collapse-button{background:none;border:none;border-radius:calc(${controlCornerRadius} * 1px);${
|
|
26438
26464
|
/* Width and Height should be based off calc(glyph-size-number + (design-unit * 4) * 1px) -
|
|
26439
26465
|
update when density story is figured out */
|
|
26440
26466
|
''} 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{${
|
|
@@ -26445,7 +26471,7 @@ const treeItemStyles$1 = (context, definition) => css`
|
|
|
26445
26471
|
/* The french fry background needs to be calculated based on the selected background state for this control.
|
|
26446
26472
|
We currently have no way of changing that, so setting to accent-foreground-rest for the time being */
|
|
26447
26473
|
''} 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`
|
|
26448
|
-
: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;
|
|
26474
|
+
: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}}`));
|
|
26449
26475
|
|
|
26450
26476
|
/**
|
|
26451
26477
|
* The Fluent tree item Custom Element. Implements, {@link @microsoft/fast-foundation#TreeItem}
|
|
@@ -26566,4 +26592,4 @@ function provideFluentDesignSystem(element) {
|
|
|
26566
26592
|
|
|
26567
26593
|
const FluentDesignSystem = provideFluentDesignSystem().register(allComponents);
|
|
26568
26594
|
|
|
26569
|
-
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,
|
|
26595
|
+
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, NeutralButtonStyles, 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, baseInputStyles, 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, inputFilledStyles, inputForcedColorStyles, inputOutlineStyles, inputStateStyles, 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 };
|