@fluentui/web-components 2.0.2 → 2.1.3
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 +69 -1
- package/CHANGELOG.md +38 -2
- package/dist/dts/anchor/anchor.stories.d.ts +1 -1
- package/dist/dts/badge/badge.stories.d.ts +1 -1
- package/dist/dts/button/button.stories.d.ts +1 -1
- package/dist/dts/custom-elements.d.ts +10 -10
- package/dist/dts/menu/menu.stories.d.ts +1 -1
- package/dist/dts/text-area/text-area.stories.d.ts +1 -1
- package/dist/dts/text-field/text-field.stories.d.ts +1 -1
- package/dist/dts/tooltip/tooltip.stories.d.ts +1 -1
- package/dist/esm/accordion/accordion-item/accordion-item.styles.js +6 -5
- package/dist/esm/checkbox/checkbox.styles.js +0 -1
- package/dist/esm/divider/divider.styles.js +1 -2
- package/dist/esm/flipper/flipper.styles.js +1 -1
- package/dist/esm/listbox/listbox.styles.js +5 -1
- package/dist/esm/listbox-option/listbox-option.styles.js +0 -1
- package/dist/esm/menu/menu.styles.js +9 -2
- package/dist/esm/menu-item/menu-item.styles.js +1 -2
- 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 +0 -1
- package/dist/esm/radio-group/radio-group.styles.js +0 -2
- package/dist/esm/slider/slider.styles.js +0 -1
- package/dist/esm/switch/switch.styles.js +3 -3
- package/dist/esm/tabs/tabs.stories.js +56 -2
- package/dist/esm/tabs/tabs.styles.js +1 -0
- package/dist/fluent-web-components.api.json +10 -10
- package/dist/web-components.js +23 -18
- package/dist/web-components.min.js +15 -15
- package/package.json +1 -2
|
@@ -1345,7 +1345,7 @@
|
|
|
1345
1345
|
},
|
|
1346
1346
|
{
|
|
1347
1347
|
"kind": "Content",
|
|
1348
|
-
"text": ", typeof import(\"./anchor\")."
|
|
1348
|
+
"text": ", typeof import(\"./anchor/index\")."
|
|
1349
1349
|
},
|
|
1350
1350
|
{
|
|
1351
1351
|
"kind": "Reference",
|
|
@@ -1435,7 +1435,7 @@
|
|
|
1435
1435
|
},
|
|
1436
1436
|
{
|
|
1437
1437
|
"kind": "Content",
|
|
1438
|
-
"text": ", typeof import(\"./badge\")."
|
|
1438
|
+
"text": ", typeof import(\"./badge/index\")."
|
|
1439
1439
|
},
|
|
1440
1440
|
{
|
|
1441
1441
|
"kind": "Reference",
|
|
@@ -1579,7 +1579,7 @@
|
|
|
1579
1579
|
},
|
|
1580
1580
|
{
|
|
1581
1581
|
"kind": "Content",
|
|
1582
|
-
"text": ", typeof import(\"./button\")."
|
|
1582
|
+
"text": ", typeof import(\"./button/index\")."
|
|
1583
1583
|
},
|
|
1584
1584
|
{
|
|
1585
1585
|
"kind": "Reference",
|
|
@@ -1678,7 +1678,7 @@
|
|
|
1678
1678
|
},
|
|
1679
1679
|
{
|
|
1680
1680
|
"kind": "Content",
|
|
1681
|
-
"text": ", typeof import(\"./card\")."
|
|
1681
|
+
"text": ", typeof import(\"./card/index\")."
|
|
1682
1682
|
},
|
|
1683
1683
|
{
|
|
1684
1684
|
"kind": "Reference",
|
|
@@ -1984,7 +1984,7 @@
|
|
|
1984
1984
|
},
|
|
1985
1985
|
{
|
|
1986
1986
|
"kind": "Content",
|
|
1987
|
-
"text": ";\n }, typeof import(\"./design-system-provider\")."
|
|
1987
|
+
"text": ";\n }, typeof import(\"./design-system-provider/index\")."
|
|
1988
1988
|
},
|
|
1989
1989
|
{
|
|
1990
1990
|
"kind": "Reference",
|
|
@@ -2317,7 +2317,7 @@
|
|
|
2317
2317
|
},
|
|
2318
2318
|
{
|
|
2319
2319
|
"kind": "Content",
|
|
2320
|
-
"text": ", typeof import(\"./menu\")."
|
|
2320
|
+
"text": ", typeof import(\"./menu/index\")."
|
|
2321
2321
|
},
|
|
2322
2322
|
{
|
|
2323
2323
|
"kind": "Reference",
|
|
@@ -3064,7 +3064,7 @@
|
|
|
3064
3064
|
},
|
|
3065
3065
|
{
|
|
3066
3066
|
"kind": "Content",
|
|
3067
|
-
"text": ", typeof import(\"./text-area\")."
|
|
3067
|
+
"text": ", typeof import(\"./text-area/index\")."
|
|
3068
3068
|
},
|
|
3069
3069
|
{
|
|
3070
3070
|
"kind": "Reference",
|
|
@@ -3109,7 +3109,7 @@
|
|
|
3109
3109
|
},
|
|
3110
3110
|
{
|
|
3111
3111
|
"kind": "Content",
|
|
3112
|
-
"text": ", typeof import(\"./text-field\")."
|
|
3112
|
+
"text": ", typeof import(\"./text-field/index\")."
|
|
3113
3113
|
},
|
|
3114
3114
|
{
|
|
3115
3115
|
"kind": "Reference",
|
|
@@ -3154,7 +3154,7 @@
|
|
|
3154
3154
|
},
|
|
3155
3155
|
{
|
|
3156
3156
|
"kind": "Content",
|
|
3157
|
-
"text": ", typeof import(\"./toolbar\")."
|
|
3157
|
+
"text": ", typeof import(\"./toolbar/index\")."
|
|
3158
3158
|
},
|
|
3159
3159
|
{
|
|
3160
3160
|
"kind": "Reference",
|
|
@@ -3199,7 +3199,7 @@
|
|
|
3199
3199
|
},
|
|
3200
3200
|
{
|
|
3201
3201
|
"kind": "Content",
|
|
3202
|
-
"text": ", typeof import(\"./tooltip\")."
|
|
3202
|
+
"text": ", typeof import(\"./tooltip/index\")."
|
|
3203
3203
|
},
|
|
3204
3204
|
{
|
|
3205
3205
|
"kind": "Reference",
|
package/dist/web-components.js
CHANGED
|
@@ -1475,7 +1475,10 @@ function compileTemplate(template, directives) {
|
|
|
1475
1475
|
// because something like a when, repeat, etc. could add nodes before the marker.
|
|
1476
1476
|
// To mitigate this, we insert a stable first node. However, if we insert a node,
|
|
1477
1477
|
// that will alter the result of the TreeWalker. So, we also need to offset the target index.
|
|
1478
|
-
DOM.isMarker(fragment.firstChild) ||
|
|
1478
|
+
DOM.isMarker(fragment.firstChild) || // Or if there is only one node and a directive, it means the template's content
|
|
1479
|
+
// is *only* the directive. In that case, HTMLView.dispose() misses any nodes inserted by
|
|
1480
|
+
// the directive. Inserting a new node ensures proper disposal of nodes added by the directive.
|
|
1481
|
+
fragment.childNodes.length === 1 && directives.length) {
|
|
1479
1482
|
fragment.insertBefore(document.createComment(""), fragment.firstChild);
|
|
1480
1483
|
targetOffset = -1;
|
|
1481
1484
|
}
|
|
@@ -5559,7 +5562,9 @@ function isArrayIndex(value) {
|
|
|
5559
5562
|
for (let i = 0; i < length; ++i) {
|
|
5560
5563
|
ch = value.charCodeAt(i);
|
|
5561
5564
|
|
|
5562
|
-
if (i === 0 && ch === 0x30 && length > 1
|
|
5565
|
+
if (i === 0 && ch === 0x30 && length > 1
|
|
5566
|
+
/* must not start with 0 */
|
|
5567
|
+
|| ch < 0x30
|
|
5563
5568
|
/* 0 */
|
|
5564
5569
|
|| ch > 0x39
|
|
5565
5570
|
/* 9 */
|
|
@@ -21544,7 +21549,7 @@ const neutralFillStealthActiveOnNeutralFillLayerRest = DesignToken.create('neutr
|
|
|
21544
21549
|
return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).active;
|
|
21545
21550
|
});
|
|
21546
21551
|
const accordionItemStyles$1 = (context, definition) => css`
|
|
21547
|
-
${display('flex')} :host{box-sizing:border-box;font-family:${bodyFont};flex-direction:column;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};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
|
|
21552
|
+
${display('flex')} :host{box-sizing:border-box;font-family:${bodyFont};flex-direction:column;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};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-family:inherit}.button::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer}.button:${focusVisible}::before{outline:none;border:calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};border-radius:calc(${layerCornerRadius} * 1px);box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter}}: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`
|
|
21548
21553
|
.button:${focusVisible}::before{border-color:${SystemColors.Highlight};box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.Highlight}}.icon{fill:${SystemColors.ButtonText}}`));
|
|
21549
21554
|
|
|
21550
21555
|
/**
|
|
@@ -22361,7 +22366,7 @@ const fluentCard = Card.compose({
|
|
|
22361
22366
|
const cardStyles = cardStyles$1;
|
|
22362
22367
|
|
|
22363
22368
|
const checkboxStyles$1 = (context, definition) => css`
|
|
22364
|
-
${display('inline-flex')} :host{align-items:center;outline:none
|
|
22369
|
+
${display('inline-flex')} :host{align-items:center;outline:none;${
|
|
22365
22370
|
/*
|
|
22366
22371
|
* Chromium likes to select label text or the default slot when
|
|
22367
22372
|
* the checkbox is clicked. Maybe there is a better solution here?
|
|
@@ -22974,7 +22979,7 @@ const fluentDialog = Dialog.compose({
|
|
|
22974
22979
|
const dialogStyles = dialogStyles$1;
|
|
22975
22980
|
|
|
22976
22981
|
const dividerStyles$1 = (context, definition) => css`
|
|
22977
|
-
${display('block')} :host{box-sizing:content-box;height:0;
|
|
22982
|
+
${display('block')} :host{box-sizing:content-box;height:0;border:none;border-top:calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest}}`;
|
|
22978
22983
|
|
|
22979
22984
|
/**
|
|
22980
22985
|
* The Fluent Divider Element. Implements {@link @microsoft/fast-foundation#Divider},
|
|
@@ -22999,7 +23004,7 @@ const fluentDivider = Divider.compose({
|
|
|
22999
23004
|
const dividerStyles = dividerStyles$1;
|
|
23000
23005
|
|
|
23001
23006
|
const flipperStyles$1 = (context, definition) => css`
|
|
23002
|
-
${display('inline-flex')} :host{height:calc((${heightNumber} + ${designUnit}) * 1px);justify-content:center;align-items:center;
|
|
23007
|
+
${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(${focusStrokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px);outline:none;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}){border-color:${focusStrokeOuter}}:host::-moz-focus-inner{border:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
23003
23008
|
: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;border-color:${SystemColors.Highlight};box-shadow:0 0 0 2px ${SystemColors.ButtonFace},0 0 0 4px ${SystemColors.ButtonText}}`));
|
|
23004
23009
|
|
|
23005
23010
|
/**
|
|
@@ -23096,7 +23101,7 @@ const fluentHorizontalScroll = HorizontalScroll.compose({
|
|
|
23096
23101
|
const horizontalScrollStyles = horizontalScrollStyles$1;
|
|
23097
23102
|
|
|
23098
23103
|
const listboxStyles$1 = (context, definition) => css`
|
|
23099
|
-
${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;outline:none}:host(:focus-within:not([disabled])){border-color:${focusStrokeOuter};box-shadow:0 0 0 1px ${focusStrokeOuter} inset}`;
|
|
23104
|
+
${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;outline:none}::slotted(${context.tagFor(ListboxOption)}){margin:0 calc(${designUnit} * 1px)}:host(:focus-within:not([disabled])){border-color:${focusStrokeOuter};box-shadow:0 0 0 1px ${focusStrokeOuter} inset}`;
|
|
23100
23105
|
|
|
23101
23106
|
/**
|
|
23102
23107
|
* The Fluent listbox Custom Element. Implements, {@link @microsoft/fast-foundation#Listbox}
|
|
@@ -23122,7 +23127,7 @@ const fluentListbox = Listbox.compose({
|
|
|
23122
23127
|
const listboxStyles = listboxStyles$1;
|
|
23123
23128
|
|
|
23124
23129
|
const optionStyles = (context, definition) => css`
|
|
23125
|
-
${display('inline-flex')} :host{position:relative;font-family:${bodyFont};background:${neutralFillStealthRest};border-radius:calc(${controlCornerRadius} * 1px);border:calc(${focusStrokeWidth} * 1px) solid transparent;box-sizing:border-box;color:${neutralForegroundRest};cursor:pointer;fill:currentcolor;font-size:${typeRampBaseFontSize};height:calc(${heightNumber} * 1px);line-height:${typeRampBaseLineHeight};
|
|
23130
|
+
${display('inline-flex')} :host{position:relative;font-family:${bodyFont};background:${neutralFillStealthRest};border-radius:calc(${controlCornerRadius} * 1px);border:calc(${focusStrokeWidth} * 1px) solid transparent;box-sizing:border-box;color:${neutralForegroundRest};cursor:pointer;fill:currentcolor;font-size:${typeRampBaseFontSize};height:calc(${heightNumber} * 1px);line-height:${typeRampBaseLineHeight};outline:none;overflow:hidden;align-items:center;padding:0 calc(${designUnit} * 2.25px);user-select:none;white-space:nowrap}:host::before{content:'';display:block;position:absolute;left:0;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}){border-color:${focusStrokeOuter};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`
|
|
23126
23131
|
: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}`));
|
|
23127
23132
|
|
|
23128
23133
|
/**
|
|
@@ -23149,7 +23154,7 @@ const fluentOption = ListboxOption.compose({
|
|
|
23149
23154
|
const OptionStyles = optionStyles;
|
|
23150
23155
|
|
|
23151
23156
|
const menuStyles$1 = (context, definition) => css`
|
|
23152
|
-
${display('block')} :host{background:${neutralLayerFloating};border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${layerCornerRadius} * 1px);box-shadow:${elevationShadowFlyout};
|
|
23157
|
+
${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`
|
|
23153
23158
|
:host([slot='submenu']){background:${SystemColors.Canvas};border-color:${SystemColors.CanvasText}}`));
|
|
23154
23159
|
|
|
23155
23160
|
/**
|
|
@@ -23191,7 +23196,7 @@ const fluentMenu = Menu.compose({
|
|
|
23191
23196
|
const menuStyles = menuStyles$1;
|
|
23192
23197
|
|
|
23193
23198
|
const menuItemStyles$1 = (context, definition) => css`
|
|
23194
|
-
${display('grid')} :host{contain:layout;overflow:visible;font-family:${bodyFont};outline:none;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;
|
|
23199
|
+
${display('grid')} :host{contain:layout;overflow:visible;font-family:${bodyFont};outline:none;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;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};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}){border:calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter}}: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;outline:none}: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`
|
|
23195
23200
|
: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};border-color:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host(:${focusVisible}){background:${SystemColors.Highlight};border-color:${SystemColors.ButtonText};box-shadow:0 0 0 calc(${strokeWidth} * 1px) inset ${SystemColors.HighlightText};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}){border-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`
|
|
23196
23201
|
.expand-collapse-glyph-container{transform:rotate(0deg)}`, css`
|
|
23197
23202
|
.expand-collapse-glyph-container{transform:rotate(180deg)}`));
|
|
@@ -23309,7 +23314,7 @@ const fluentNumberField = NumberField.compose({
|
|
|
23309
23314
|
});
|
|
23310
23315
|
|
|
23311
23316
|
const progressStyles$1 = (context, definition) => css`
|
|
23312
|
-
${display('flex')} :host{align-items:center;outline:none;height:calc((${strokeWidth} * 3) * 1px)
|
|
23317
|
+
${display('flex')} :host{align-items:center;outline:none;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`
|
|
23313
23318
|
.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}}`));
|
|
23314
23319
|
|
|
23315
23320
|
/**
|
|
@@ -23347,7 +23352,7 @@ const fluentProgress = Progress.compose({
|
|
|
23347
23352
|
const progressStyles = progressStyles$1;
|
|
23348
23353
|
|
|
23349
23354
|
const progressRingStyles$1 = (context, definition) => css`
|
|
23350
|
-
${display('flex')} :host{align-items:center;outline:none;height:calc(${heightNumber} * 1px);width:calc(${heightNumber} * 1px)
|
|
23355
|
+
${display('flex')} :host{align-items:center;outline:none;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`
|
|
23351
23356
|
.background{stroke:${SystemColors.Field}}.determinate,.indeterminate-indicator-1{stroke:${SystemColors.ButtonText}}:host(.paused) .determinate,:host(.paused) .indeterminate-indicator-1{stroke:${SystemColors.GrayText}}`));
|
|
23352
23357
|
|
|
23353
23358
|
/**
|
|
@@ -23397,7 +23402,7 @@ const fluentProgressRing = ProgressRing.compose({
|
|
|
23397
23402
|
const progressRingStyles = progressRingStyles$1;
|
|
23398
23403
|
|
|
23399
23404
|
const radioStyles = (context, definition) => css`
|
|
23400
|
-
${display('inline-flex')} :host{--input-size:calc((${heightNumber} / 2) + ${designUnit});align-items:center;outline:none
|
|
23405
|
+
${display('inline-flex')} :host{--input-size:calc((${heightNumber} / 2) + ${designUnit});align-items:center;outline:none;${
|
|
23401
23406
|
/*
|
|
23402
23407
|
* Chromium likes to select label text or the default slot when
|
|
23403
23408
|
* the radio button is clicked. Maybe there is a better solution here?
|
|
@@ -23435,7 +23440,7 @@ const fluentRadio = Radio.compose({
|
|
|
23435
23440
|
const RadioStyles = radioStyles;
|
|
23436
23441
|
|
|
23437
23442
|
const radioGroupStyles$1 = (context, definition) => css`
|
|
23438
|
-
${display('flex')} :host{align-items:flex-start;
|
|
23443
|
+
${display('flex')} :host{align-items:flex-start;flex-direction:column}.positioning-region{display:flex;flex-wrap:wrap}:host([orientation='vertical']) .positioning-region{flex-direction:column}:host([orientation='horizontal']) .positioning-region{flex-direction:row}`;
|
|
23439
23444
|
|
|
23440
23445
|
/**
|
|
23441
23446
|
* The Fluent Radio Group Element. Implements {@link @microsoft/fast-foundation#RadioGroup},
|
|
@@ -23555,7 +23560,7 @@ const fluentSkeleton = Skeleton.compose({
|
|
|
23555
23560
|
const skeletonStyles = skeletonStyles$1;
|
|
23556
23561
|
|
|
23557
23562
|
const sliderStyles$1 = (context, definition) => css`
|
|
23558
|
-
${display('inline-grid')} :host{--thumb-size:calc((${heightNumber} / 2) + ${designUnit} + (${strokeWidth} * 2));--thumb-translate:calc(var(--thumb-size) * -0.5 + var(--track-width) / 2);--track-overhang:calc((${designUnit} / 2) * -1);--track-width:${designUnit};align-items:center;width:100%;
|
|
23563
|
+
${display('inline-grid')} :host{--thumb-size:calc((${heightNumber} / 2) + ${designUnit} + (${strokeWidth} * 2));--thumb-translate:calc(var(--thumb-size) * -0.5 + var(--track-width) / 2);--track-overhang:calc((${designUnit} / 2) * -1);--track-width:${designUnit};align-items:center;width:100%;user-select:none;box-sizing:border-box;border-radius:calc(${controlCornerRadius} * 1px);outline:none;cursor:pointer}:host(.horizontal) .positioning-region{position:relative;margin:0 8px;display:grid;grid-template-rows:calc(var(--thumb-size) * 1px) 1fr}:host(.vertical) .positioning-region{position:relative;margin:0 8px;display:grid;height:100%;grid-template-columns:calc(var(--thumb-size) * 1px) 1fr}:host(:${focusVisible}) .thumb-cursor{box-shadow:0 0 0 2px ${fillColor},0 0 0 4px ${focusStrokeOuter}}.thumb-container{position:absolute;height:calc(var(--thumb-size) * 1px);width:calc(var(--thumb-size) * 1px);transition:all 0.2s ease}.thumb-cursor{display:flex;position:relative;border:none;width:calc(var(--thumb-size) * 1px);height:calc(var(--thumb-size) * 1px);background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlRest};border:calc(${strokeWidth} * 1px) solid transparent;border-radius:50%;box-sizing:border-box}.thumb-cursor::after{content:'';display:block;border-radius:50%;width:100%;margin:4px;background:${accentFillRest}}:host(:not(.disabled)) .thumb-cursor:hover::after{background:${accentFillHover};margin:3px}:host(:not(.disabled)) .thumb-cursor:active::after{background:${accentFillActive};margin:5px}:host(:not(.disabled)) .thumb-cursor:hover{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlHover}}:host(:not(.disabled)) .thumb-cursor:active{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlActive}}.track-start{background:${accentFillRest};position:absolute;height:100%;left:0;border-radius:calc(${controlCornerRadius} * 1px)}:host(.horizontal) .thumb-container{transform:translateX(calc(var(--thumb-size) * 0.5px)) translateY(calc(var(--thumb-translate) * 1px))}:host(.vertical) .thumb-container{transform:translateX(calc(var(--thumb-translate) * 1px)) translateY(calc(var(--thumb-size) * 0.5px))}:host(.horizontal){min-width:calc(var(--thumb-size) * 1px)}:host(.horizontal) .track{right:calc(var(--track-overhang) * 1px);left:calc(var(--track-overhang) * 1px);align-self:start;height:calc(var(--track-width) * 1px)}:host(.vertical) .track{top:calc(var(--track-overhang) * 1px);bottom:calc(var(--track-overhang) * 1px);width:calc(var(--track-width) * 1px);height:100%}.track{background:${neutralFillStrongRest};border:1px solid ${neutralStrokeStrongRest};border-radius:2px;box-sizing:border-box;position:absolute}:host(.vertical){height:100%;min-height:calc(${designUnit} * 60px);min-width:calc(${designUnit} * 20px)}:host(.vertical) .track-start{height:auto;width:100%;top:0}:host(.disabled),:host(.readonly){cursor:${disabledCursor}}:host(.disabled){opacity:${disabledOpacity}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
23559
23564
|
.thumb-cursor{forced-color-adjust:none;border-color:${SystemColors.FieldText};background:${SystemColors.FieldText}}:host(:not(.disabled)) .thumb-cursor:hover,:host(:not(.disabled)) .thumb-cursor:active{background:${SystemColors.Highlight}}.track{forced-color-adjust:none;background:${SystemColors.FieldText}}.thumb-cursor::after,:host(:not(.disabled)) .thumb-cursor:hover::after,:host(:not(.disabled)) .thumb-cursor:active::after{background:${SystemColors.Field}}:host(:${focusVisible}) .thumb-cursor{background:${SystemColors.Highlight};border-color:${SystemColors.Highlight};box-shadow:0 0 0 1px ${SystemColors.Field},0 0 0 3px ${SystemColors.FieldText}}:host(.disabled){opacity:1}:host(.disabled) .track,:host(.disabled) .thumb-cursor{forced-color-adjust:none;background:${SystemColors.GrayText}}`));
|
|
23560
23565
|
|
|
23561
23566
|
/**
|
|
@@ -23610,12 +23615,12 @@ const fluentSliderLabel = SliderLabel.compose({
|
|
|
23610
23615
|
const sliderLabelStyles = sliderLabelStyles$1;
|
|
23611
23616
|
|
|
23612
23617
|
const switchStyles$1 = (context, definition) => css`
|
|
23613
|
-
:host([hidden]){display:none}${display('inline-flex')} :host{align-items:center;outline:none;font-family:${bodyFont}
|
|
23618
|
+
:host([hidden]){display:none}${display('inline-flex')} :host{align-items:center;outline:none;font-family:${bodyFont};${
|
|
23614
23619
|
/*
|
|
23615
23620
|
* Chromium likes to select label text or the default slot when
|
|
23616
23621
|
* the checkbox is clicked. Maybe there is a better solution here?
|
|
23617
23622
|
*/
|
|
23618
|
-
''} 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;outline:none;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{box-shadow:0 0 0 1px ${fillColor},0 0 0 3px ${focusStrokeOuter};background:${neutralFillInputAltFocus};border-color:${focusStrokeOuter}}: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;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight}}.label__hidden{display:none;visibility:hidden}.label{color:${neutralForegroundRest};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};margin-inline-end:calc(${designUnit} * 2px + 2px);cursor:pointer}
|
|
23623
|
+
''} 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;outline:none;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{box-shadow:0 0 0 1px ${fillColor},0 0 0 3px ${focusStrokeOuter};background:${neutralFillInputAltFocus};border-color:${focusStrokeOuter}}: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;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight}}.label__hidden{display:none;visibility:hidden}.label{color:${neutralForegroundRest};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};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}}:host(.checked:${focusVisible}:not(.disabled)) .switch{box-shadow:0 0 0 1px ${fillColor},0 0 0 3px ${focusStrokeOuter};border-color:transparent}.unchecked-message{display:block}.checked-message{display:none}:host(.checked) .unchecked-message{display:none}:host(.checked) .checked-message{display:block}`.withBehaviors(new DirectionalStyleSheetBehavior(css`
|
|
23619
23624
|
slot[name='switch']{left:0}:host(.checked) slot[name='switch']{left:100%;transform:translateX(-100%)}`, css`
|
|
23620
23625
|
slot[name='switch']{right:0}:host(.checked) slot[name='switch']{right:100%;transform:translateX(100%)}`), forcedColorsStylesheetBehavior(css`
|
|
23621
23626
|
: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};box-shadow:0 0 0 1px ${SystemColors.Highlight},0 0 0 3px ${SystemColors.FieldText}}:host(.checked:${focusVisible}:not(.disabled)) .switch{forced-color-adjust:none;background:${SystemColors.Highlight};box-shadow:0 0 0 1px ${SystemColors.Field},0 0 0 3px ${SystemColors.FieldText};border-color:${SystemColors.Field}}: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}}`));
|
|
@@ -23648,7 +23653,7 @@ const fluentSwitch = Switch.compose({
|
|
|
23648
23653
|
const switchStyles = switchStyles$1;
|
|
23649
23654
|
|
|
23650
23655
|
const tabsStyles$1 = (context, definition) => css`
|
|
23651
|
-
${display('grid')} :host{box-sizing:border-box;font-family:${bodyFont};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};color:${neutralForegroundRest};grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}.tablist{display:grid;grid-template-rows:calc(${heightNumber} * 1px);auto;grid-template-columns:auto;position:relative;width:max-content;align-self:end}.start,.end{align-self:center}.activeIndicator{grid-row:2;grid-column:1;width:20px;height:3px;border-radius:calc(${controlCornerRadius} * 1px);justify-self:center;background:${accentFillRest}}.activeIndicatorTransition{transition:transform 0.2s ease-in-out}.tabpanel{grid-row:2;grid-column-start:1;grid-column-end:4;position:relative}:host(.vertical){grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr}:host(.vertical) .tablist{grid-row-start:2;grid-row-end:2;display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;position:relative;width:max-content;justify-self:end;width:100%}:host(.vertical) .tabpanel{grid-column:2;grid-row-start:1;grid-row-end:4}:host(.vertical) .end{grid-row:3}:host(.vertical) .activeIndicator{grid-column:1;grid-row:1;width:3px;height:20px;margin-inline-start:calc(${focusStrokeWidth} * 1px);border-radius:calc(${controlCornerRadius} * 1px);align-self:center;background:${accentFillRest}}:host(.vertical) .activeIndicatorTransition{transition:transform 0.2s linear}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
23656
|
+
${display('grid')} :host{box-sizing:border-box;font-family:${bodyFont};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};color:${neutralForegroundRest};grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}.tablist{display:grid;grid-template-rows:calc(${heightNumber} * 1px);auto;grid-template-columns:auto;position:relative;width:max-content;align-self:end}.start,.end{align-self:center}.activeIndicator{grid-row:2;grid-column:1;width:20px;height:3px;border-radius:calc(${controlCornerRadius} * 1px);justify-self:center;background:${accentFillRest}}.activeIndicatorTransition{transition:transform 0.2s ease-in-out}.tabpanel{grid-row:2;grid-column-start:1;grid-column-end:4;position:relative}:host(.vertical){grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr}:host(.vertical) .tablist{grid-row-start:2;grid-row-end:2;display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;position:relative;width:max-content;justify-self:end;align-self:flex-start;width:100%}:host(.vertical) .tabpanel{grid-column:2;grid-row-start:1;grid-row-end:4}:host(.vertical) .end{grid-row:3}:host(.vertical) .activeIndicator{grid-column:1;grid-row:1;width:3px;height:20px;margin-inline-start:calc(${focusStrokeWidth} * 1px);border-radius:calc(${controlCornerRadius} * 1px);align-self:center;background:${accentFillRest}}:host(.vertical) .activeIndicatorTransition{transition:transform 0.2s linear}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
23652
23657
|
.activeIndicator,:host(.vertical) .activeIndicator{background:${SystemColors.Highlight}}`));
|
|
23653
23658
|
|
|
23654
23659
|
const tabStyles$1 = (context, definition) => css`
|