@fluentui/web-components 2.0.2 → 2.1.0
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 +16 -1
- package/CHANGELOG.md +11 -2
- 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 +0 -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/web-components.js +14 -14
- package/dist/web-components.min.js +13 -13
- package/package.json +1 -1
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,22 @@
|
|
|
2
2
|
"name": "@fluentui/web-components",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Tue,
|
|
5
|
+
"date": "Tue, 23 Nov 2021 07:26:04 GMT",
|
|
6
|
+
"tag": "@fluentui/web-components_v2.1.0",
|
|
7
|
+
"version": "2.1.0",
|
|
8
|
+
"comments": {
|
|
9
|
+
"minor": [
|
|
10
|
+
{
|
|
11
|
+
"author": "jes@microsoft.com",
|
|
12
|
+
"package": "@fluentui/web-components",
|
|
13
|
+
"commit": "2dbe9eadd8ae071bbb056ad15461c1c7ea8d9430",
|
|
14
|
+
"comment": "fix: remove margins from host elements"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Tue, 09 Nov 2021 07:38:11 GMT",
|
|
6
21
|
"tag": "@fluentui/web-components_v2.0.2",
|
|
7
22
|
"version": "2.0.2",
|
|
8
23
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/web-components
|
|
2
2
|
|
|
3
|
-
This log was last generated on Tue,
|
|
3
|
+
This log was last generated on Tue, 23 Nov 2021 07:26:04 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [2.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.1.0)
|
|
8
|
+
|
|
9
|
+
Tue, 23 Nov 2021 07:26:04 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.0.2..@fluentui/web-components_v2.1.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- fix: remove margins from host elements ([PR #20710](https://github.com/microsoft/fluentui/pull/20710) by jes@microsoft.com)
|
|
15
|
+
|
|
7
16
|
## [2.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.0.2)
|
|
8
17
|
|
|
9
|
-
Tue, 09 Nov 2021 07:
|
|
18
|
+
Tue, 09 Nov 2021 07:38:11 GMT
|
|
10
19
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.0.1..@fluentui/web-components_v2.0.2)
|
|
11
20
|
|
|
12
21
|
### Patches
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
|
-
import {
|
|
3
|
+
import { neutralStrokeDividerRest, strokeWidth } from '../design-tokens';
|
|
4
4
|
export const dividerStyles = (context, definition) => css `
|
|
5
5
|
${display('block')} :host {
|
|
6
6
|
box-sizing: content-box;
|
|
7
7
|
height: 0;
|
|
8
|
-
margin: calc(${designUnit} * 1px) 0;
|
|
9
8
|
border: none;
|
|
10
9
|
border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest};
|
|
11
10
|
}
|
|
@@ -8,7 +8,6 @@ export const flipperStyles = (context, definition) => css `
|
|
|
8
8
|
height: calc((${heightNumber} + ${designUnit}) * 1px);
|
|
9
9
|
justify-content: center;
|
|
10
10
|
align-items: center;
|
|
11
|
-
margin: 0;
|
|
12
11
|
fill: currentcolor;
|
|
13
12
|
color: ${neutralFillStrongRest};
|
|
14
13
|
background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
|
-
import { display, } from '@microsoft/fast-foundation';
|
|
2
|
+
import { display, ListboxOption } from '@microsoft/fast-foundation';
|
|
3
3
|
import { controlCornerRadius, designUnit, focusStrokeOuter, neutralStrokeRest, strokeWidth, } from '../design-tokens';
|
|
4
4
|
export const listboxStyles = (context, definition) => css `
|
|
5
5
|
${display('inline-flex')} :host {
|
|
@@ -11,6 +11,10 @@ export const listboxStyles = (context, definition) => css `
|
|
|
11
11
|
outline: none;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
+
::slotted(${context.tagFor(ListboxOption)}) {
|
|
15
|
+
margin: 0 calc(${designUnit} * 1px);
|
|
16
|
+
}
|
|
17
|
+
|
|
14
18
|
:host(:focus-within:not([disabled])) {
|
|
15
19
|
border-color: ${focusStrokeOuter};
|
|
16
20
|
box-shadow: 0 0 0 1px ${focusStrokeOuter} inset;
|
|
@@ -17,7 +17,6 @@ export const optionStyles = (context, definition) => css `
|
|
|
17
17
|
font-size: ${typeRampBaseFontSize};
|
|
18
18
|
height: calc(${heightNumber} * 1px);
|
|
19
19
|
line-height: ${typeRampBaseLineHeight};
|
|
20
|
-
margin: 0 calc(${designUnit} * 1px);
|
|
21
20
|
outline: none;
|
|
22
21
|
overflow: hidden;
|
|
23
22
|
align-items: center;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
|
-
import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
|
|
2
|
+
import { display, Divider, forcedColorsStylesheetBehavior, MenuItem } from '@microsoft/fast-foundation';
|
|
3
3
|
import { SystemColors } from "@microsoft/fast-web-utilities";
|
|
4
4
|
import { elevationShadowFlyout } from '../styles/index';
|
|
5
5
|
import { designUnit, layerCornerRadius, neutralLayerFloating, neutralStrokeDividerRest, strokeWidth, } from '../design-tokens';
|
|
@@ -9,7 +9,6 @@ export const menuStyles = (context, definition) => css `
|
|
|
9
9
|
border: calc(${strokeWidth} * 1px) solid transparent;
|
|
10
10
|
border-radius: calc(${layerCornerRadius} * 1px);
|
|
11
11
|
box-shadow: ${elevationShadowFlyout};
|
|
12
|
-
margin: 0;
|
|
13
12
|
padding: calc(${designUnit} * 1px) 0;
|
|
14
13
|
max-width: 368px;
|
|
15
14
|
min-width: 64px;
|
|
@@ -20,6 +19,14 @@ export const menuStyles = (context, definition) => css `
|
|
|
20
19
|
margin: 0 calc(${designUnit} * 2px);
|
|
21
20
|
}
|
|
22
21
|
|
|
22
|
+
::slotted(${context.tagFor(MenuItem)}) {
|
|
23
|
+
margin: 0 calc(${designUnit} * 1px);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
::slotted(${context.tagFor(Divider)}) {
|
|
27
|
+
margin: calc(${designUnit} * 1px) 0;
|
|
28
|
+
}
|
|
29
|
+
|
|
23
30
|
::slotted(hr) {
|
|
24
31
|
box-sizing: content-box;
|
|
25
32
|
height: 0;
|
|
@@ -2,7 +2,7 @@ import { css } from '@microsoft/fast-element';
|
|
|
2
2
|
import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
|
|
3
3
|
import { SystemColors } from '@microsoft/fast-web-utilities';
|
|
4
4
|
import { DirectionalStyleSheetBehavior, heightNumber } from '../styles/index';
|
|
5
|
-
import { bodyFont, controlCornerRadius,
|
|
5
|
+
import { bodyFont, controlCornerRadius, disabledOpacity, focusStrokeOuter, focusStrokeWidth, neutralFillStealthActive, neutralFillStealthHover, neutralForegroundHint, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
|
|
6
6
|
export const menuItemStyles = (context, definition) => css `
|
|
7
7
|
${display('grid')} :host {
|
|
8
8
|
contain: layout;
|
|
@@ -16,7 +16,6 @@ export const menuItemStyles = (context, definition) => css `
|
|
|
16
16
|
justify-items: center;
|
|
17
17
|
align-items: center;
|
|
18
18
|
padding: 0;
|
|
19
|
-
margin: 0 calc(${designUnit} * 1px);
|
|
20
19
|
white-space: nowrap;
|
|
21
20
|
color: ${neutralForegroundRest};
|
|
22
21
|
fill: currentcolor;
|
|
@@ -8,7 +8,6 @@ export const radioStyles = (context, definition) => css `
|
|
|
8
8
|
--input-size: calc((${heightNumber} / 2) + ${designUnit});
|
|
9
9
|
align-items: center;
|
|
10
10
|
outline: none;
|
|
11
|
-
margin: calc(${designUnit} * 1px) 0;
|
|
12
11
|
${
|
|
13
12
|
/*
|
|
14
13
|
* Chromium likes to select label text or the default slot when
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
|
-
import { designUnit } from '../design-tokens';
|
|
4
3
|
export const radioGroupStyles = (context, definition) => css `
|
|
5
4
|
${display('flex')} :host {
|
|
6
5
|
align-items: flex-start;
|
|
7
|
-
margin: calc(${designUnit} * 1px) 0;
|
|
8
6
|
flex-direction: column;
|
|
9
7
|
}
|
|
10
8
|
|
|
@@ -11,7 +11,6 @@ export const sliderStyles = (context, definition) => css `
|
|
|
11
11
|
--track-width: ${designUnit};
|
|
12
12
|
align-items: center;
|
|
13
13
|
width: 100%;
|
|
14
|
-
margin: calc(${designUnit} * 1px) 0;
|
|
15
14
|
user-select: none;
|
|
16
15
|
box-sizing: border-box;
|
|
17
16
|
border-radius: calc(${controlCornerRadius} * 1px);
|
|
@@ -12,7 +12,6 @@ export const switchStyles = (context, definition) => css `
|
|
|
12
12
|
align-items: center;
|
|
13
13
|
outline: none;
|
|
14
14
|
font-family: ${bodyFont};
|
|
15
|
-
margin: calc(${designUnit} * 1px) 0;
|
|
16
15
|
${
|
|
17
16
|
/*
|
|
18
17
|
* Chromium likes to select label text or the default slot when
|
|
@@ -104,8 +103,9 @@ export const switchStyles = (context, definition) => css `
|
|
|
104
103
|
cursor: pointer;
|
|
105
104
|
}
|
|
106
105
|
|
|
107
|
-
|
|
108
|
-
|
|
106
|
+
::slotted([slot="checked-message"]),
|
|
107
|
+
::slotted([slot="unchecked-message"]) {
|
|
108
|
+
margin-inline-start: calc(${designUnit} * 2px + 2px);
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
:host(.checked) .switch {
|
package/dist/web-components.js
CHANGED
|
@@ -22361,7 +22361,7 @@ const fluentCard = Card.compose({
|
|
|
22361
22361
|
const cardStyles = cardStyles$1;
|
|
22362
22362
|
|
|
22363
22363
|
const checkboxStyles$1 = (context, definition) => css`
|
|
22364
|
-
${display('inline-flex')} :host{align-items:center;outline:none
|
|
22364
|
+
${display('inline-flex')} :host{align-items:center;outline:none;${
|
|
22365
22365
|
/*
|
|
22366
22366
|
* Chromium likes to select label text or the default slot when
|
|
22367
22367
|
* the checkbox is clicked. Maybe there is a better solution here?
|
|
@@ -22974,7 +22974,7 @@ const fluentDialog = Dialog.compose({
|
|
|
22974
22974
|
const dialogStyles = dialogStyles$1;
|
|
22975
22975
|
|
|
22976
22976
|
const dividerStyles$1 = (context, definition) => css`
|
|
22977
|
-
${display('block')} :host{box-sizing:content-box;height:0;
|
|
22977
|
+
${display('block')} :host{box-sizing:content-box;height:0;border:none;border-top:calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest}}`;
|
|
22978
22978
|
|
|
22979
22979
|
/**
|
|
22980
22980
|
* The Fluent Divider Element. Implements {@link @microsoft/fast-foundation#Divider},
|
|
@@ -22999,7 +22999,7 @@ const fluentDivider = Divider.compose({
|
|
|
22999
22999
|
const dividerStyles = dividerStyles$1;
|
|
23000
23000
|
|
|
23001
23001
|
const flipperStyles$1 = (context, definition) => css`
|
|
23002
|
-
${display('inline-flex')} :host{height:calc((${heightNumber} + ${designUnit}) * 1px);justify-content:center;align-items:center;
|
|
23002
|
+
${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}}.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
23003
|
: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
23004
|
|
|
23005
23005
|
/**
|
|
@@ -23096,7 +23096,7 @@ const fluentHorizontalScroll = HorizontalScroll.compose({
|
|
|
23096
23096
|
const horizontalScrollStyles = horizontalScrollStyles$1;
|
|
23097
23097
|
|
|
23098
23098
|
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}`;
|
|
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}::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
23100
|
|
|
23101
23101
|
/**
|
|
23102
23102
|
* The Fluent listbox Custom Element. Implements, {@link @microsoft/fast-foundation#Listbox}
|
|
@@ -23122,7 +23122,7 @@ const fluentListbox = Listbox.compose({
|
|
|
23122
23122
|
const listboxStyles = listboxStyles$1;
|
|
23123
23123
|
|
|
23124
23124
|
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};
|
|
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};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
23126
|
: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
23127
|
|
|
23128
23128
|
/**
|
|
@@ -23149,7 +23149,7 @@ const fluentOption = ListboxOption.compose({
|
|
|
23149
23149
|
const OptionStyles = optionStyles;
|
|
23150
23150
|
|
|
23151
23151
|
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};
|
|
23152
|
+
${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
23153
|
:host([slot='submenu']){background:${SystemColors.Canvas};border-color:${SystemColors.CanvasText}}`));
|
|
23154
23154
|
|
|
23155
23155
|
/**
|
|
@@ -23191,7 +23191,7 @@ const fluentMenu = Menu.compose({
|
|
|
23191
23191
|
const menuStyles = menuStyles$1;
|
|
23192
23192
|
|
|
23193
23193
|
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;
|
|
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;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
23195
|
: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
23196
|
.expand-collapse-glyph-container{transform:rotate(0deg)}`, css`
|
|
23197
23197
|
.expand-collapse-glyph-container{transform:rotate(180deg)}`));
|
|
@@ -23309,7 +23309,7 @@ const fluentNumberField = NumberField.compose({
|
|
|
23309
23309
|
});
|
|
23310
23310
|
|
|
23311
23311
|
const progressStyles$1 = (context, definition) => css`
|
|
23312
|
-
${display('flex')} :host{align-items:center;outline:none;height:calc((${strokeWidth} * 3) * 1px)
|
|
23312
|
+
${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
23313
|
.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
23314
|
|
|
23315
23315
|
/**
|
|
@@ -23347,7 +23347,7 @@ const fluentProgress = Progress.compose({
|
|
|
23347
23347
|
const progressStyles = progressStyles$1;
|
|
23348
23348
|
|
|
23349
23349
|
const progressRingStyles$1 = (context, definition) => css`
|
|
23350
|
-
${display('flex')} :host{align-items:center;outline:none;height:calc(${heightNumber} * 1px);width:calc(${heightNumber} * 1px)
|
|
23350
|
+
${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
23351
|
.background{stroke:${SystemColors.Field}}.determinate,.indeterminate-indicator-1{stroke:${SystemColors.ButtonText}}:host(.paused) .determinate,:host(.paused) .indeterminate-indicator-1{stroke:${SystemColors.GrayText}}`));
|
|
23352
23352
|
|
|
23353
23353
|
/**
|
|
@@ -23397,7 +23397,7 @@ const fluentProgressRing = ProgressRing.compose({
|
|
|
23397
23397
|
const progressRingStyles = progressRingStyles$1;
|
|
23398
23398
|
|
|
23399
23399
|
const radioStyles = (context, definition) => css`
|
|
23400
|
-
${display('inline-flex')} :host{--input-size:calc((${heightNumber} / 2) + ${designUnit});align-items:center;outline:none
|
|
23400
|
+
${display('inline-flex')} :host{--input-size:calc((${heightNumber} / 2) + ${designUnit});align-items:center;outline:none;${
|
|
23401
23401
|
/*
|
|
23402
23402
|
* Chromium likes to select label text or the default slot when
|
|
23403
23403
|
* the radio button is clicked. Maybe there is a better solution here?
|
|
@@ -23435,7 +23435,7 @@ const fluentRadio = Radio.compose({
|
|
|
23435
23435
|
const RadioStyles = radioStyles;
|
|
23436
23436
|
|
|
23437
23437
|
const radioGroupStyles$1 = (context, definition) => css`
|
|
23438
|
-
${display('flex')} :host{align-items:flex-start;
|
|
23438
|
+
${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
23439
|
|
|
23440
23440
|
/**
|
|
23441
23441
|
* The Fluent Radio Group Element. Implements {@link @microsoft/fast-foundation#RadioGroup},
|
|
@@ -23555,7 +23555,7 @@ const fluentSkeleton = Skeleton.compose({
|
|
|
23555
23555
|
const skeletonStyles = skeletonStyles$1;
|
|
23556
23556
|
|
|
23557
23557
|
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%;
|
|
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%;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
23559
|
.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
23560
|
|
|
23561
23561
|
/**
|
|
@@ -23610,12 +23610,12 @@ const fluentSliderLabel = SliderLabel.compose({
|
|
|
23610
23610
|
const sliderLabelStyles = sliderLabelStyles$1;
|
|
23611
23611
|
|
|
23612
23612
|
const switchStyles$1 = (context, definition) => css`
|
|
23613
|
-
:host([hidden]){display:none}${display('inline-flex')} :host{align-items:center;outline:none;font-family:${bodyFont}
|
|
23613
|
+
:host([hidden]){display:none}${display('inline-flex')} :host{align-items:center;outline:none;font-family:${bodyFont};${
|
|
23614
23614
|
/*
|
|
23615
23615
|
* Chromium likes to select label text or the default slot when
|
|
23616
23616
|
* the checkbox is clicked. Maybe there is a better solution here?
|
|
23617
23617
|
*/
|
|
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}
|
|
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}::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
23619
|
slot[name='switch']{left:0}:host(.checked) slot[name='switch']{left:100%;transform:translateX(-100%)}`, css`
|
|
23620
23620
|
slot[name='switch']{right:0}:host(.checked) slot[name='switch']{right:100%;transform:translateX(100%)}`), forcedColorsStylesheetBehavior(css`
|
|
23621
23621
|
: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}}`));
|
|
@@ -80,7 +80,7 @@ ${eo("inline-block")} :host{--calendar-cell-size:calc((${zn} + 2 + ${Pn}) * ${Mn
|
|
|
80
80
|
.day.selected{color:${Ns.Highlight}}.today .date{background:${Ns.Highlight};color:${Ns.HighlightText}}`),new bh(xd,$d)),title:Ei}),Cd=(t,e)=>Dt`
|
|
81
81
|
${eo("block")} :host{display:block;contain:content;height:var(--card-height,100%);width:var(--card-width,100%);box-sizing:border-box;background:${ka};color:${Dl};border:calc(${jn} * 1px) solid ${Zl};border-radius:calc(${Nn} * 1px);box-shadow:${Th}}:host{content-visibility:auto}`.withBehaviors(Ji(Dt`
|
|
82
82
|
:host{background:${Ns.Canvas};color:${Ns.CanvasText}}`));class Fd extends Li{cardFillColorChanged(t,e){if(e){const t=rn(e);null!==t&&(this.neutralPaletteSource=e,ka.setValueFor(this,ln.create(t.r,t.g,t.b)))}}neutralPaletteSourceChanged(t,e){if(e){const t=rn(e),i=ln.create(t.r,t.g,t.b);la.setValueFor(this,gn.create(i))}}handleChange(t,e){this.cardFillColor||ka.setValueFor(this,e=>rl.getValueFor(e).evaluate(e,ka.getValueFor(t)).rest)}connectedCallback(){super.connectedCallback();const t=Qi(this);if(t){const e=C.getNotifier(t);e.subscribe(this,"fillColor"),e.subscribe(this,"neutralPalette"),this.handleChange(t,"fillColor")}}}mh([ft({attribute:"card-fill-color",mode:"fromView"})],Fd.prototype,"cardFillColor",void 0),mh([ft({attribute:"neutral-palette-source",mode:"fromView"})],Fd.prototype,"neutralPaletteSource",void 0);const Id=Fd.compose({baseName:"card",baseClass:Li,template:(t,e)=>nt`<slot></slot>`,styles:Cd}),Td=Cd,Dd=(t,e)=>Dt`
|
|
83
|
-
${eo("inline-flex")} :host{align-items:center;outline:none
|
|
83
|
+
${eo("inline-flex")} :host{align-items:center;outline:none;${""} user-select:none}.control{position:relative;width:calc((${ah} / 2 + ${Mn}) * 1px);height:calc((${ah} / 2 + ${Mn}) * 1px);box-sizing:border-box;border-radius:calc(${Bn} * 1px);border:calc(${jn} * 1px) solid ${ic};background:${il};outline:none;cursor:pointer}.label__hidden{display:none;visibility:hidden}.label{font-family:${qn};color:${Dl};${""} padding-inline-start:calc(${Mn} * 2px + 2px);margin-inline-end:calc(${Mn} * 2px + 2px);cursor:pointer;font-size:${_n};line-height:${Gn}}slot[name='checked-indicator'],slot[name='indeterminate-indicator']{display:flex;align-items:center;justify-content:center;width:100%;height:100%;fill:${Dl};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:${Ra}}:host(:not(.disabled):hover) .control{background:${ol};border-color:${oc}}:host(:not(.disabled):active) .control{background:${sl};border-color:${sc}}:host(:${io}) .control{box-shadow:0 0 0 1px ${ka},0 0 0 3px ${ac};background:${nl};border-color:${ac}}:host(.checked) .control{background:${Ia};border-color:transparent}:host(.checked:not(.disabled):hover) .control{background:${Ta};border-color:transparent}:host(.checked:not(.disabled):active) .control{background:${Da};border-color:transparent}:host(.disabled) .label,:host(.readonly) .label,:host(.readonly) .control,:host(.disabled) .control{cursor:${"not-allowed"}}:host(.checked:not(.indeterminate)) slot[name='checked-indicator'],:host(.indeterminate) slot[name='indeterminate-indicator']{opacity:1}:host(.disabled){opacity:${Ln}}`.withBehaviors(Ji(Dt`
|
|
84
84
|
.control{border-color:${Ns.FieldText};background:${Ns.Field}}:host(:not(.disabled):hover) .control,:host(:not(.disabled):active) .control{border-color:${Ns.Highlight};background:${Ns.Field}}slot[name='checked-indicator'],slot[name='indeterminate-indicator']{fill:${Ns.FieldText}}:host(:${io}) .control{forced-color-adjust:none;box-shadow:0 0 0 1px ${Ns.Field},0 0 0 3px ${Ns.FieldText};background:${Ns.Field};border-color:${Ns.Highlight}}:host(.checked) .control{background:${Ns.Highlight};border-color:${Ns.Highlight}}:host(.checked:not(.disabled):hover) .control,:host(.checked:not(.disabled):active) .control{background:${Ns.HighlightText};border-color:${Ns.Highlight}}:host(.checked:${io}) .control{box-shadow:0 0 0 1px ${Ns.Field},0 0 0 3px ${Ns.FieldText}}:host(.checked) slot[name='checked-indicator'],:host(.checked) slot[name='indeterminate-indicator']{fill:${Ns.HighlightText}}:host(.checked:hover ) .control slot[name='checked-indicator'],:host(.checked:hover ) .control slot[name='indeterminate-indicator']{fill:${Ns.Highlight}}:host(.disabled){opacity:1}:host(.disabled) .control{border-color:${Ns.GrayText};background:${Ns.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:${Ns.GrayText}}`)),Vd=Pi.compose({baseName:"checkbox",template:(t,e)=>nt`<template role="checkbox" aria-checked="${t=>t.checked}" aria-required="${t=>t.required}" aria-disabled="${t=>t.disabled}" aria-readonly="${t=>t.readOnly}" tabindex="${t=>t.disabled?null:0}" @keypress="${(t,e)=>t.keypressHandler(e.event)}" @click="${(t,e)=>t.clickHandler(e.event)}" class="${t=>t.readOnly?"readonly":""} ${t=>t.checked?"checked":""} ${t=>t.indeterminate?"indeterminate":""}"><div part="control" class="control"><slot name="checked-indicator">${e.checkedIndicator||""}</slot><slot name="indeterminate-indicator">${e.indeterminateIndicator||""}</slot></div><label part="label" class="${t=>t.defaultSlottedNodes&&t.defaultSlottedNodes.length?"label":"label label__hidden"}"><slot ${Qt("defaultSlottedNodes")}></slot></label></template>`,styles:Dd,checkedIndicator:'\n <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n <path d="M13.86 3.66a.5.5 0 01-.02.7l-7.93 7.48a.6.6 0 01-.84-.02L2.4 9.1a.5.5 0 01.72-.7l2.4 2.44 7.65-7.2a.5.5 0 01.7.02z"/>\n </svg>\n ',indeterminateIndicator:'\n <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n <path d="M3 8c0-.28.22-.5.5-.5h9a.5.5 0 010 1h-9A.5.5 0 013 8z"/>\n </svg>\n '}),Sd=Dd,Rd=(t,e)=>Dt`
|
|
85
85
|
:host{background:${pl};border-color:transparent}:host(:not([disabled]):not([open]):hover){background:${gl};border-color:transparent}:host(:not([disabled]):not([open]):active){background:${fl};border-color:transparent}`.withBehaviors(Ji(Dt`
|
|
86
86
|
:host(:not([disabled]):not([open]):hover){background:transparent}:host(:not([disabled]):not([open]):hover),:host(:not([disabled]):not([open]):active){border-color:${Ns.Highlight}}:host(:${io}){forced-color-adjust:none;background:transparent;border-color:${Ns.Highlight};box-shadow:0 0 0 1px inset ${Ns.Highlight}}`)),Ed=(t,e)=>Dt`
|
|
@@ -100,19 +100,19 @@ ${eo("inline-block")} :host{--calendar-cell-size:calc((${zn} + 2 + ${Pn}) * ${Mn
|
|
|
100
100
|
${eo("block")}
|
|
101
101
|
`}),Qd=(t,e)=>Dt`
|
|
102
102
|
:host([hidden]){display:none}:host{--dialog-height:480px;--dialog-width:640px;display:block}.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.3);touch-action:none}.positioning-region{display:flex;justify-content:center;position:fixed;top:0;bottom:0;left:0;right:0;overflow:auto}.control{box-shadow:${zh};margin-top:auto;margin-bottom:auto;border-radius:calc(${Nn} * 1px);width:var(--dialog-width);height:var(--dialog-height);background:${ka};z-index:1;border:calc(${jn} * 1px) solid transparent}`,Zd=Bo.compose({baseName:"dialog",template:(t,e)=>nt`<div class="positioning-region" part="positioning-region">${Nt(t=>t.modal,nt`<div class="overlay" part="overlay" role="presentation" @click="${t=>t.dismiss()}"></div>`)}<div role="dialog" tabindex="-1" class="control" part="control" aria-modal="${t=>t.modal}" aria-describedby="${t=>t.ariaDescribedby}" aria-labelledby="${t=>t.ariaLabelledby}" aria-label="${t=>t.ariaLabel}" ${Bt("dialog")}><slot></slot></div></div>`,styles:Qd}),Jd=Qd,tu=(t,e)=>Dt`
|
|
103
|
-
${eo("block")} :host{box-sizing:content-box;height:0;
|
|
104
|
-
${eo("inline-flex")} :host{height:calc((${ah} + ${Mn}) * 1px);justify-content:center;align-items:center;
|
|
103
|
+
${eo("block")} :host{box-sizing:content-box;height:0;border:none;border-top:calc(${jn} * 1px) solid ${_l}}`,eu=Uo.compose({baseName:"divider",template:(t,e)=>nt`<template role="${t=>t.role}"></template>`,styles:tu}),iu=tu,ou=(t,e)=>Dt`
|
|
104
|
+
${eo("inline-flex")} :host{height:calc((${ah} + ${Mn}) * 1px);justify-content:center;align-items:center;fill:currentcolor;color:${kl};background:padding-box linear-gradient(${Ga},${Ga}),border-box ${Bl};box-sizing:border-box;border:calc(${Un} * 1px) solid transparent;border-radius:calc(${Bn} * 1px);outline:none;padding:0}:host(.disabled){opacity:${Ln};cursor:${"not-allowed"}}.next,.previous{display:flex}:host(:not(.disabled):hover){cursor:pointer}:host(:not(.disabled):hover){color:${Cl}}:host(:not(.disabled):active){color:${Fl}}:host(:${io}){border-color:${ac}}:host::-moz-focus-inner{border:0}`.withBehaviors(Ji(Dt`
|
|
105
105
|
:host{background:${Ns.ButtonFace};border-color:${Ns.ButtonText}}:host .next,:host .previous{color:${Ns.ButtonText};fill:currentcolor}:host(:not(.disabled):hover){background:${Ns.Highlight}}:host(:not(.disabled):hover) .next,:host(:not(.disabled):hover) .previous{color:${Ns.HighlightText};fill:currentcolor}:host(.disabled){opacity:1}:host(.disabled),:host(.disabled) .next,:host(.disabled) .previous{border-color:${Ns.GrayText};color:${Ns.GrayText};fill:currentcolor}:host(:${io}){forced-color-adjust:none;border-color:${Ns.Highlight};box-shadow:0 0 0 2px ${Ns.ButtonFace},0 0 0 4px ${Ns.ButtonText}}`)),su=qo.compose({baseName:"flipper",template:(t,e)=>nt`<template role="button" aria-disabled="${t=>!!t.disabled||void 0}" tabindex="${t=>t.hiddenFromAT?-1:0}" class="${t=>t.direction} ${t=>t.disabled?"disabled":""}" @keyup="${(t,e)=>t.keyupHandler(e.event)}">${Nt(t=>t.direction===jo.next,nt`<span part="next" class="next"><slot name="next">${e.next||""}</slot></span>`)} ${Nt(t=>t.direction===jo.previous,nt`<span part="previous" class="previous"><slot name="previous">${e.previous||""}</slot></span>`)}</template>`,styles:ou,next:'\n <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n <path d="M7.57 11.84A1 1 0 016 11.02V4.98a1 1 0 011.57-.82l3.79 2.62c.85.59.85 1.85 0 2.44l-3.79 2.62z"/>\n </svg>\n ',previous:'\n <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n <path d="M9.43 11.84a1 1 0 001.57-.82V4.98a1 1 0 00-1.57-.82L5.64 6.78c-.85.59-.85 1.85 0 2.44l3.79 2.62z"/>\n </svg>\n '}),nu=ou,ru=Dt`
|
|
106
106
|
.scroll-prev{right:auto;left:0}.scroll.scroll-next::before,.scroll-next .scroll-action{left:auto;right:0}.scroll.scroll-next::before{background:linear-gradient(to right,transparent,var(--scroll-fade-next))}.scroll-next .scroll-action{transform:translate(50%,-50%)}`,au=Dt`
|
|
107
107
|
.scroll.scroll-next{right:auto;left:0}.scroll.scroll-next::before{background:linear-gradient(to right,var(--scroll-fade-next),transparent);left:auto;right:0}.scroll.scroll-prev::before{background:linear-gradient(to right,transparent,var(--scroll-fade-previous))}.scroll-prev .scroll-action{left:auto;right:0;transform:translate(50%,-50%)}`,lu=Dt`
|
|
108
108
|
.scroll-area{position:relative}div.scroll-view{overflow-x:hidden}.scroll{bottom:0;pointer-events:none;position:absolute;right:0;top:0;user-select:none;width:100px}.scroll.disabled{display:none}.scroll::before,.scroll-action{left:0;position:absolute}.scroll::before{background:linear-gradient(to right,var(--scroll-fade-previous),transparent);content:'';display:block;height:100%;width:100%}.scroll-action{pointer-events:auto;right:auto;top:50%;transform:translate(-50%,-50%)}::slotted(fluent-flipper){opacity:0;transition:opacity 0.2s ease-in-out}.scroll-area:hover ::slotted(fluent-flipper){opacity:1}`.withBehaviors(new bh(ru,au)),cu=(t,e)=>Dt`
|
|
109
109
|
${eo("block")} :host{--scroll-align:center;--scroll-item-spacing:4px;contain:layout;position:relative}.scroll-view{overflow-x:auto;scrollbar-width:none}::-webkit-scrollbar{display:none}.content-container{align-items:var(--scroll-align);display:inline-flex;flex-wrap:nowrap;position:relative}.content-container ::slotted(*){margin-right:var(--scroll-item-spacing)}.content-container ::slotted(*:last-child){margin-right:0}`;class hu extends ls{connectedCallback(){super.connectedCallback(),"mobile"!==this.view&&this.$fastController.addStyles(lu)}}const du=hu.compose({baseName:"horizontal-scroll",baseClass:ls,template:(t,e)=>{var i,o;return nt`<template class="horizontal-scroll" @keyup="${(t,e)=>t.keyupHandler(e.event)}">${ie(0,e)}<div class="scroll-area" part="scroll-area"><div class="scroll-view" part="scroll-view" @scroll="${t=>t.scrolled()}" ${Bt("scrollContainer")}><div class="content-container" part="content-container" ${Bt("content")}><slot ${Qt({property:"scrollItems",filter:Kt()})}></slot></div></div>${Nt(t=>"mobile"!==t.view,nt`<div class="scroll scroll-prev" part="scroll-prev" ${Bt("previousFlipperContainer")}><div class="scroll-action" part="scroll-action-previous"><slot name="previous-flipper">${e.previousFlipper instanceof Function?e.previousFlipper(t,e):null!==(i=e.previousFlipper)&&void 0!==i?i:""}</slot></div></div><div class="scroll scroll-next" part="scroll-next" ${Bt("nextFlipperContainer")}><div class="scroll-action" part="scroll-action-next"><slot name="next-flipper">${e.nextFlipper instanceof Function?e.nextFlipper(t,e):null!==(o=e.nextFlipper)&&void 0!==o?o:""}</slot></div></div>`)}</div>${ee(0,e)}</template>`},styles:cu,nextFlipper:nt`<fluent-flipper @click="${t=>t.scrollToNext()}" aria-hidden="${t=>t.flippersHiddenFromAT}"></fluent-flipper>`,previousFlipper:nt`<fluent-flipper @click="${t=>t.scrollToPrevious()}" direction="previous" aria-hidden="${t=>t.flippersHiddenFromAT}"></fluent-flipper>`}),uu=cu,pu=(t,e)=>Dt`
|
|
110
|
-
${eo("inline-flex")} :host{border:calc(${jn} * 1px) solid ${Ll};border-radius:calc(${Bn} * 1px);box-sizing:border-box;flex-direction:column;padding:calc(${Mn} * 1px) 0;outline:none}:host(:focus-within:not([disabled])){border-color:${ac};box-shadow:0 0 0 1px ${ac} inset}`,gu=_i.compose({baseName:"listbox",template:(t,e)=>nt`<template aria-activedescendant="${t=>t.ariaActiveDescendant}" class="listbox" role="${t=>t.role}" tabindex="${t=>t.disabled?null:"0"}" @click="${(t,e)=>t.clickHandler(e.event)}" @focusin="${(t,e)=>t.focusinHandler(e.event)}" @keydown="${(t,e)=>t.keydownHandler(e.event)}" @mousedown="${(t,e)=>t.mousedownHandler(e.event)}"><slot ${Qt({filter:_i.slottedOptionFilter,flatten:!0,property:"slottedOptions"})}></slot></template>`,styles:pu}),fu=pu,mu=(t,e)=>Dt`
|
|
111
|
-
${eo("inline-flex")} :host{position:relative;font-family:${qn};background:${vl};border-radius:calc(${Bn} * 1px);border:calc(${Un} * 1px) solid transparent;box-sizing:border-box;color:${Dl};cursor:pointer;fill:currentcolor;font-size:${_n};height:calc(${ah} * 1px);line-height:${Gn};
|
|
110
|
+
${eo("inline-flex")} :host{border:calc(${jn} * 1px) solid ${Ll};border-radius:calc(${Bn} * 1px);box-sizing:border-box;flex-direction:column;padding:calc(${Mn} * 1px) 0;outline:none}::slotted(${t.tagFor(qi)}){margin:0 calc(${Mn} * 1px)}:host(:focus-within:not([disabled])){border-color:${ac};box-shadow:0 0 0 1px ${ac} inset}`,gu=_i.compose({baseName:"listbox",template:(t,e)=>nt`<template aria-activedescendant="${t=>t.ariaActiveDescendant}" class="listbox" role="${t=>t.role}" tabindex="${t=>t.disabled?null:"0"}" @click="${(t,e)=>t.clickHandler(e.event)}" @focusin="${(t,e)=>t.focusinHandler(e.event)}" @keydown="${(t,e)=>t.keydownHandler(e.event)}" @mousedown="${(t,e)=>t.mousedownHandler(e.event)}"><slot ${Qt({filter:_i.slottedOptionFilter,flatten:!0,property:"slottedOptions"})}></slot></template>`,styles:pu}),fu=pu,mu=(t,e)=>Dt`
|
|
111
|
+
${eo("inline-flex")} :host{position:relative;font-family:${qn};background:${vl};border-radius:calc(${Bn} * 1px);border:calc(${Un} * 1px) solid transparent;box-sizing:border-box;color:${Dl};cursor:pointer;fill:currentcolor;font-size:${_n};height:calc(${ah} * 1px);line-height:${Gn};outline:none;overflow:hidden;align-items:center;padding:0 calc(${Mn} * 2.25px);user-select:none;white-space:nowrap}:host::before{content:'';display:block;position:absolute;left:0;top:calc((${ah} / 4) - ${Un} * 1px);width:3px;height:calc((${ah} / 2) * 1px);background:transparent;border-radius:calc(${Bn} * 1px)}:host(:not([disabled]):hover){background:${yl}}:host(:not([disabled]):active){background:${xl}}:host(:not([disabled]):active)::before{background:${Ia};height:calc(((${ah} / 2) - 6) * 1px)}:host([aria-selected='true'])::before{background:${Ia}}:host(:${io}){border-color:${ac};background:${$l}}:host([aria-selected='true']){background:${pl}}:host(:not([disabled])[aria-selected='true']:hover){background:${gl}}:host(:not([disabled])[aria-selected='true']:active){background:${fl}}:host(:not([disabled]):not([aria-selected='true']):hover){background:${yl}}:host(:not([disabled]):not([aria-selected='true']):active){background:${xl}}:host([disabled]){cursor:${"not-allowed"};opacity:${Ln}}.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(Ji(Dt`
|
|
112
112
|
:host{background:${Ns.ButtonFace};border-color:${Ns.ButtonFace};color:${Ns.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:${Ns.Highlight};color:${Ns.HighlightText}}:host(:not([disabled]):active)::before,:host([aria-selected='true'])::before{background:${Ns.HighlightText}}:host([disabled]),:host([disabled]:not([aria-selected='true']):hover){background:${Ns.Canvas};color:${Ns.GrayText};fill:currentcolor;opacity:1}`)),bu=qi.compose({baseName:"option",template:(t,e)=>nt`<template aria-selected="${t=>t.selected}" class="${t=>t.selected?"selected":""} ${t=>t.disabled?"disabled":""}" role="option">${ie(0,e)}<span class="content" part="content"><slot></slot></span>${ee(0,e)}</template>`,styles:mu}),vu=mu,yu=(t,e)=>Dt`
|
|
113
|
-
${eo("block")} :host{background:${ga};border:calc(${jn} * 1px) solid transparent;border-radius:calc(${Nn} * 1px);box-shadow:${Ah};
|
|
113
|
+
${eo("block")} :host{background:${ga};border:calc(${jn} * 1px) solid transparent;border-radius:calc(${Nn} * 1px);box-shadow:${Ah};padding:calc(${Mn} * 1px) 0;max-width:368px;min-width:64px}:host([slot='submenu']){width:max-content;margin:0 calc(${Mn} * 2px)}::slotted(${t.tagFor(Wo)}){margin:0 calc(${Mn} * 1px)}::slotted(${t.tagFor(Uo)}){margin:calc(${Mn} * 1px) 0}::slotted(hr){box-sizing:content-box;height:0;margin:calc(${Mn} * 1px) 0;border:none;border-top:calc(${jn} * 1px) solid ${_l}}`.withBehaviors(Ji(Dt`
|
|
114
114
|
:host([slot='submenu']){background:${Ns.Canvas};border-color:${Ns.CanvasText}}`));class xu extends Ko{connectedCallback(){super.connectedCallback(),ka.setValueFor(this,ga)}}const $u=xu.compose({baseName:"menu",baseClass:Ko,template:(t,e)=>nt`<template slot="${t=>t.slot?t.slot:t.isNestedMenu()?"submenu":void 0}" role="menu" @keydown="${(t,e)=>t.handleMenuKeyDown(e.event)}" @focusout="${(t,e)=>t.handleFocusOut(e.event)}"><slot ${Qt("items")}></slot></template>`,styles:yu}),wu=yu,ku=(t,e)=>Dt`
|
|
115
|
-
${eo("grid")} :host{contain:layout;overflow:visible;font-family:${qn};outline:none;box-sizing:border-box;height:calc(${ah} * 1px);grid-template-columns:minmax(32px,auto) 1fr minmax(32px,auto);grid-template-rows:auto;justify-items:center;align-items:center;padding:0;
|
|
115
|
+
${eo("grid")} :host{contain:layout;overflow:visible;font-family:${qn};outline:none;box-sizing:border-box;height:calc(${ah} * 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:${Dl};fill:currentcolor;cursor:pointer;font-size:${_n};line-height:${Gn};border-radius:calc(${Bn} * 1px);border:calc(${jn} * 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(:${io}){border:calc(${jn} * 1px) solid ${ac};box-shadow:0 0 0 calc((${Un} - ${jn}) * 1px) ${ac}}:host(:not([disabled]):hover){background:${yl}}:host(:not([disabled]):active),:host(.expanded){background:${xl};color:${Dl}}:host([disabled]){cursor:${"not-allowed"};opacity:${Ln}}.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:${Ol}}: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(Ji(Dt`
|
|
116
116
|
:host,::slotted([slot='end']:not(svg)){forced-color-adjust:none;color:${Ns.ButtonText};fill:currentcolor}:host(:not([disabled]):hover){background:${Ns.Highlight};color:${Ns.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(:${io}) ::slotted([slot='end']:not(svg)){color:${Ns.HighlightText};fill:currentcolor}:host(.expanded){background:${Ns.Highlight};border-color:${Ns.Highlight};color:${Ns.HighlightText}}:host(:${io}){background:${Ns.Highlight};border-color:${Ns.ButtonText};box-shadow:0 0 0 calc(${jn} * 1px) inset ${Ns.HighlightText};color:${Ns.HighlightText};fill:currentcolor}:host([disabled]),:host([disabled]:hover),:host([disabled]:hover) .start,:host([disabled]:hover) .end,:host([disabled]:hover)::slotted(svg),:host([disabled]:${io}){background:${Ns.ButtonFace};color:${Ns.GrayText};fill:currentcolor;opacity:1}:host([disabled]:${io}){border-color:${Ns.GrayText}}:host .expanded-toggle,:host .checkbox,:host .radio{border-color:${Ns.ButtonText};background:${Ns.HighlightText}}:host([checked]) .checkbox,:host([checked]) .radio{background:${Ns.HighlightText};border-color:${Ns.HighlightText}}:host(:hover) .expanded-toggle,:host(:hover) .checkbox,:host(:hover) .radio,:host(:${io}) .expanded-toggle,:host(:${io}) .checkbox,:host(:${io}) .radio,:host([checked]:hover) .checkbox,:host([checked]:hover) .radio,:host([checked]:${io}) .checkbox,:host([checked]:${io}) .radio{border-color:${Ns.HighlightText}}:host([aria-checked='true']){background:${Ns.Highlight};color:${Ns.HighlightText}}:host([aria-checked='true']) .checkbox-indicator,:host([aria-checked='true']) ::slotted([slot='checkbox-indicator']),:host([aria-checked='true']) ::slotted([slot='radio-indicator']){fill:${Ns.Highlight}}:host([aria-checked='true']) .radio-indicator{background:${Ns.Highlight}}`),new bh(Dt`
|
|
117
117
|
.expand-collapse-glyph-container{transform:rotate(0deg)}`,Dt`
|
|
118
118
|
.expand-collapse-glyph-container{transform:rotate(180deg)}`)),Cu=Wo.compose({baseName:"menu-item",template:(t,e)=>nt`<template role="${t=>t.role}" aria-haspopup="${t=>t.hasSubmenu?"menu":void 0}" aria-checked="${t=>t.role!==_o.menuitem?t.checked:void 0}" aria-disabled="${t=>t.disabled}" aria-expanded="${t=>t.expanded}" @keydown="${(t,e)=>t.handleMenuItemKeyDown(e.event)}" @click="${(t,e)=>t.handleMenuItemClick(e.event)}" @mouseover="${(t,e)=>t.handleMouseOver(e.event)}" @mouseout="${(t,e)=>t.handleMouseOut(e.event)}" class="${t=>t.disabled?"disabled":""} ${t=>t.expanded?"expanded":""} ${t=>"indent-"+t.startColumnCount}">${Nt(t=>t.role===_o.menuitemcheckbox,nt`<div part="input-container" class="input-container"><span part="checkbox" class="checkbox"><slot name="checkbox-indicator">${e.checkboxIndicator||""}</slot></span></div>`)} ${Nt(t=>t.role===_o.menuitemradio,nt`<div part="input-container" class="input-container"><span part="radio" class="radio"><slot name="radio-indicator">${e.radioIndicator||""}</slot></span></div>`)}</div>${ie(0,e)}<span class="content" part="content"><slot></slot></span>${ee(0,e)} ${Nt(t=>t.hasSubmenu,nt`<div part="expand-collapse-glyph-container" class="expand-collapse-glyph-container"><span part="expand-collapse" class="expand-collapse"><slot name="expand-collapse-indicator">${e.expandCollapseGlyph||""}</slot></span></div>`)} ${Nt(t=>t.expanded,nt`<${t.tagFor(hi)} :anchorElement="${t=>t}" vertical-positioning-mode="dynamic" vertical-default-position="bottom" vertical-inset="true" horizontal-positioning-mode="dynamic" horizontal-default-position="end" class="submenu-region" dir="${t=>t.currentDirection}" @loaded="${t=>t.submenuLoaded()}" ${Bt("submenuRegion")} part="submenu-region"><slot name="submenu"></slot></${t.tagFor(hi)}>`)}</template>`,styles:ku,checkboxIndicator:'\n <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n <path d="M13.86 3.66a.5.5 0 01-.02.7l-7.93 7.48a.6.6 0 01-.84-.02L2.4 9.1a.5.5 0 01.72-.7l2.4 2.44 7.65-7.2a.5.5 0 01.7.02z"/>\n </svg>\n ',expandCollapseGlyph:'\n <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n <path d="M5.65 3.15a.5.5 0 000 .7L9.79 8l-4.14 4.15a.5.5 0 00.7.7l4.5-4.5a.5.5 0 000-.7l-4.5-4.5a.5.5 0 00-.7 0z"/>\n </svg>\n ',radioIndicator:'\n <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n <circle cx="8" cy="8" r="2"/>\n </svg>\n '}),Fu=ku,Iu=(t,e)=>Dt`
|
|
@@ -129,22 +129,22 @@ ${eo("inline-block")} :host{--calendar-cell-size:calc((${zn} + 2 + ${Pn}) * ${Mn
|
|
|
129
129
|
`))),Ji(Dt`
|
|
130
130
|
${Yh(0,0,".root")}
|
|
131
131
|
.step-up,.step-down{fill:${Ns.FieldText}}`));class Tu extends is{connectedCallback(){super.connectedCallback(),this.appearance||(this.appearance="outline")}}mh([ft],Tu.prototype,"appearance",void 0);const Du=Iu,Vu=Tu.compose({baseName:"number-field",baseClass:is,styles:Iu,template:(t,e)=>nt`<template class="${t=>t.readOnly?"readonly":""}"><label part="label" for="control" class="${t=>t.defaultSlottedNodes&&t.defaultSlottedNodes.length?"label":"label label__hidden"}"><slot ${Qt("defaultSlottedNodes")}></slot></label><div class="root" part="root">${ie(0,e)}<input class="control" part="control" id="control" @input="${t=>t.handleTextInput()}" @change="${t=>t.handleChange()}" @keydown="${(t,e)=>t.handleKeyDown(e.event)}" @blur="${(t,e)=>t.handleBlur()}" ?autofocus="${t=>t.autofocus}" ?disabled="${t=>t.disabled}" list="${t=>t.list}" maxlength="${t=>t.maxlength}" minlength="${t=>t.minlength}" placeholder="${t=>t.placeholder}" ?readonly="${t=>t.readOnly}" ?required="${t=>t.required}" size="${t=>t.size}" type="text" inputmode="numeric" min="${t=>t.min}" max="${t=>t.max}" step="${t=>t.step}" aria-atomic="${t=>t.ariaAtomic}" aria-busy="${t=>t.ariaBusy}" aria-controls="${t=>t.ariaControls}" aria-current="${t=>t.ariaCurrent}" aria-describedby="${t=>t.ariaDescribedby}" aria-details="${t=>t.ariaDetails}" aria-disabled="${t=>t.ariaDisabled}" aria-errormessage="${t=>t.ariaErrormessage}" aria-flowto="${t=>t.ariaFlowto}" aria-haspopup="${t=>t.ariaHaspopup}" aria-hidden="${t=>t.ariaHidden}" aria-invalid="${t=>t.ariaInvalid}" aria-keyshortcuts="${t=>t.ariaKeyshortcuts}" aria-label="${t=>t.ariaLabel}" aria-labelledby="${t=>t.ariaLabelledby}" aria-live="${t=>t.ariaLive}" aria-owns="${t=>t.ariaOwns}" aria-relevant="${t=>t.ariaRelevant}" aria-roledescription="${t=>t.ariaRoledescription}" ${Bt("control")} />${Nt(t=>!t.hideStep&&!t.readOnly&&!t.disabled,nt`<div class="controls" part="controls"><div class="step-up" part="step-up" @click="${t=>t.stepUp()}"><slot name="step-up-glyph">${e.stepUpGlyph||""}</slot></div><div class="step-down" part="step-down" @click="${t=>t.stepDown()}"><slot name="step-down-glyph">${e.stepDownGlyph||""}</slot></div></div>`)} ${ee(0,e)}</div></template>`,shadowOptions:{delegatesFocus:!0},stepDownGlyph:'\n <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">\n <path d="M2.15 4.65c.2-.2.5-.2.7 0L6 7.79l3.15-3.14a.5.5 0 11.7.7l-3.5 3.5a.5.5 0 01-.7 0l-3.5-3.5a.5.5 0 010-.7z"/>\n </svg>\n ',stepUpGlyph:'\n <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">\n <path d="M2.15 7.35c.2.2.5.2.7 0L6 4.21l3.15 3.14a.5.5 0 10.7-.7l-3.5-3.5a.5.5 0 00-.7 0l-3.5 3.5a.5.5 0 000 .7z"/>\n </svg>\n'}),Su=(t,e)=>Dt`
|
|
132
|
-
${eo("flex")} :host{align-items:center;outline:none;height:calc((${jn} * 3) * 1px)
|
|
132
|
+
${eo("flex")} :host{align-items:center;outline:none;height:calc((${jn} * 3) * 1px)}.progress{background-color:${ic};border-radius:calc(${Mn} * 1px);width:100%;height:calc(${jn} * 1px);display:flex;align-items:center;position:relative}.determinate{background-color:${Ia};border-radius:calc(${Mn} * 1px);height:calc((${jn} * 3) * 1px);transition:all 0.2s ease-in-out;display:flex}.indeterminate{height:calc((${jn} * 3) * 1px);border-radius:calc(${Mn} * 1px);display:flex;width:100%;position:relative;overflow:hidden}.indeterminate-indicator-1{position:absolute;opacity:0;height:100%;background-color:${Ia};border-radius:calc(${Mn} * 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:${Ia};border-radius:calc(${Mn} * 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:${Ol};width:100%;opacity:1}:host(.paused) .determinate{background-color:${Ol}}@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(Ji(Dt`
|
|
133
133
|
.indeterminate-indicator-1,.indeterminate-indicator-2,.determinate,.progress{background-color:${Ns.ButtonText}}:host(.paused) .indeterminate-indicator-1,:host(.paused) .indeterminate-indicator-2,:host(.paused) .determinate{background-color:${Ns.GrayText}}`));class Ru extends os{}const Eu=Ru.compose({baseName:"progress",template:(t,e)=>nt`<template role="progressbar" aria-valuenow="${t=>t.value}" aria-valuemin="${t=>t.min}" aria-valuemax="${t=>t.max}" class="${t=>t.paused?"paused":""}">${Nt(t=>"number"==typeof t.value,nt`<div class="progress" part="progress" slot="determinate"><div class="determinate" part="determinate" style="width: ${t=>t.percentComplete}%"></div></div>`)} ${Nt(t=>"number"!=typeof t.value,nt`<div class="progress" part="progress" slot="indeterminate"><slot class="indeterminate" name="indeterminate">${e.indeterminateIndicator1||""} ${e.indeterminateIndicator2||""}</slot></div>`)}</template>`,styles:Su,indeterminateIndicator1:'\n <span class="indeterminate-indicator-1" part="indeterminate-indicator-1"></span>\n ',indeterminateIndicator2:'\n <span class="indeterminate-indicator-2" part="indeterminate-indicator-2"></span>\n '}),Ou=Su,Au=(t,e)=>Dt`
|
|
134
|
-
${eo("flex")} :host{align-items:center;outline:none;height:calc(${ah} * 1px);width:calc(${ah} * 1px)
|
|
134
|
+
${eo("flex")} :host{align-items:center;outline:none;height:calc(${ah} * 1px);width:calc(${ah} * 1px)}.progress{height:100%;width:100%}.background{fill:none;stroke-width:2px}.determinate{stroke:${Ia};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:${Ia};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:${Ol}}:host(.paused) .determinate{stroke:${Ol}}@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(Ji(Dt`
|
|
135
135
|
.background{stroke:${Ns.Field}}.determinate,.indeterminate-indicator-1{stroke:${Ns.ButtonText}}:host(.paused) .determinate,:host(.paused) .indeterminate-indicator-1{stroke:${Ns.GrayText}}`));class Lu extends os{}const zu=Lu.compose({baseName:"progress-ring",template:(t,e)=>nt`<template role="progressbar" aria-valuenow="${t=>t.value}" aria-valuemin="${t=>t.min}" aria-valuemax="${t=>t.max}" class="${t=>t.paused?"paused":""}">${Nt(t=>"number"==typeof t.value,nt`<svg class="progress" part="progress" viewBox="0 0 16 16" slot="determinate"><circle class="background" part="background" cx="8px" cy="8px" r="7px"></circle><circle class="determinate" part="determinate" style="stroke-dasharray: ${t=>44*t.percentComplete/100}px ${44}px" cx="8px" cy="8px" r="7px"></circle></svg>`)} ${Nt(t=>"number"!=typeof t.value,nt`<slot name="indeterminate" slot="indeterminate">${e.indeterminateIndicator||""}</slot>`)}</template>`,styles:Au,indeterminateIndicator:'\n <svg class="progress" part="progress" viewBox="0 0 16 16">\n <circle\n class="background"\n part="background"\n cx="8px"\n cy="8px"\n r="7px"\n ></circle>\n <circle\n class="indeterminate-indicator-1"\n part="indeterminate-indicator-1"\n cx="8px"\n cy="8px"\n r="7px"\n ></circle>\n </svg>\n '}),Hu=Au,Pu=(t,e)=>Dt`
|
|
136
|
-
${eo("inline-flex")} :host{--input-size:calc((${ah} / 2) + ${Mn});align-items:center;outline:none
|
|
136
|
+
${eo("inline-flex")} :host{--input-size:calc((${ah} / 2) + ${Mn});align-items:center;outline:none;${""} 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(${jn} * 1px) solid ${ic};background:${il};outline:none;cursor:pointer}.label__hidden{display:none;visibility:hidden}.label{font-family:${qn};color:${Dl};${""} padding-inline-start:calc(${Mn} * 2px + 2px);margin-inline-end:calc(${Mn} * 2px + 2px);cursor:pointer;font-size:${_n};line-height:${Gn}}.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:${Ra};opacity:0;pointer-events:none}:host(:not(.disabled):hover) .control{background:${ol};border-color:${oc}}:host(:not(.disabled):active) .control{background:${sl};border-color:${sc}}:host(:not(.disabled):active) slot[name='checked-indicator']{opacity:1}:host(:${io}) .control{box-shadow:0 0 0 1px ${ka},0 0 0 3px ${ac};background:${nl};border-color:${ac}}:host(.checked) .control{background:${Ia};border-color:transparent}:host(.checked:not(.disabled):hover) .control{background:${Ta};border-color:transparent}:host(.checked:not(.disabled):active) .control{background:${Da};border-color:transparent}:host(.disabled) .label,:host(.readonly) .label,:host(.readonly) .control,:host(.disabled) .control{cursor:${"not-allowed"}}:host(.checked) slot[name='checked-indicator']{opacity:1}:host(.disabled){opacity:${Ln}}`.withBehaviors(Ji(Dt`
|
|
137
137
|
.control{background:${Ns.Field};border-color:${Ns.FieldText}}:host(:not(.disabled):hover) .control,:host(:not(.disabled):active) .control{border-color:${Ns.Highlight}}:host(:${io}) .control{forced-color-adjust:none;box-shadow:0 0 0 1px ${Ns.Field},0 0 0 3px ${Ns.FieldText};background:${Ns.Field};border-color:${Ns.Highlight}}:host(.checked:not(.disabled):hover) .control,:host(.checked:not(.disabled):active) .control{border-color:${Ns.Highlight};background:${Ns.Highlight}}:host(.checked:${io}) .control{box-shadow:0 0 0 1px ${Ns.Field},0 0 0 3px ${Ns.FieldText}}:host(.checked) slot[name='checked-indicator']{fill:${Ns.Highlight}}:host(.checked:hover) .control slot[name='checked-indicator']{fill:${Ns.HighlightText}}:host(.disabled){opacity:1}:host(.disabled) .label{color:${Ns.GrayText}}:host(.disabled) .control,:host(.checked.disabled) .control{background:${Ns.Field};border-color:${Ns.GrayText}}:host(.disabled) slot[name='checked-indicator'],:host(.checked.disabled) slot[name='checked-indicator']{fill:${Ns.GrayText}}`)),Mu=as.compose({baseName:"radio",template:(t,e)=>nt`<template role="radio" class="${t=>t.checked?"checked":""} ${t=>t.readOnly?"readonly":""}" aria-checked="${t=>t.checked}" aria-required="${t=>t.required}" aria-disabled="${t=>t.disabled}" aria-readonly="${t=>t.readOnly}" @keypress="${(t,e)=>t.keypressHandler(e.event)}" @click="${(t,e)=>t.clickHandler(e.event)}"><div part="control" class="control"><slot name="checked-indicator">${e.checkedIndicator||""}</slot></div><label part="label" class="${t=>t.defaultSlottedNodes&&t.defaultSlottedNodes.length?"label":"label label__hidden"}"><slot ${Qt("defaultSlottedNodes")}></slot></label></template>`,styles:Pu,checkedIndicator:'\n <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n <circle cx="8" cy="8" r="4"/>\n </svg>\n '}),Bu=Pu,Nu=(t,e)=>Dt`
|
|
138
|
-
${eo("flex")} :host{align-items:flex-start;
|
|
138
|
+
${eo("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}`,ju=ss.compose({baseName:"radio-group",template:(t,e)=>nt`<template role="radiogroup" aria-disabled="${t=>t.disabled}" aria-readonly="${t=>t.readOnly}" @click="${(t,e)=>t.clickHandler(e.event)}" @keydown="${(t,e)=>t.keydownHandler(e.event)}" @focusout="${(t,e)=>t.focusOutHandler(e.event)}"><slot name="label"></slot><div class="positioning-region ${t=>t.orientation===We.horizontal?"horizontal":"vertical"}" part="positioning-region"><slot ${Qt({property:"slottedRadioButtons",filter:Kt("[role=radio]")})}></slot></div></template>`,styles:Nu}),Uu=Nu;class qu extends ds{appearanceChanged(t,e){t!==e&&(this.classList.add(e),this.classList.remove(t))}connectedCallback(){super.connectedCallback(),this.appearance||(this.appearance="outline"),this.listbox&&ka.setValueFor(this.listbox,ga)}}mh([ft({mode:"fromView"})],qu.prototype,"appearance",void 0);const _u=qu.compose({baseName:"select",baseClass:ds,template:(t,e)=>nt`<template class="${t=>t.open?"open":""} ${t=>t.disabled?"disabled":""} ${t=>t.position}" role="${t=>t.role}" tabindex="${t=>t.disabled?null:"0"}" aria-disabled="${t=>t.ariaDisabled}" aria-expanded="${t=>t.ariaExpanded}" @click="${(t,e)=>t.clickHandler(e.event)}" @focusout="${(t,e)=>t.focusoutHandler(e.event)}" @keydown="${(t,e)=>t.keydownHandler(e.event)}"><div aria-activedescendant="${t=>t.open?t.ariaActiveDescendant:null}" aria-controls="listbox" aria-expanded="${t=>t.ariaExpanded}" aria-haspopup="listbox" class="control" part="control" role="button" ?disabled="${t=>t.disabled}">${ie(0,e)}<slot name="button-container"><div class="selected-value" part="selected-value"><slot name="selected-value">${t=>t.displayValue}</slot></div><div class="indicator" part="indicator"><slot name="indicator">${e.indicator||""}</slot></div></slot>${ee(0,e)}</div><div aria-disabled="${t=>t.disabled}" class="listbox" id="listbox" part="listbox" role="listbox" ?disabled="${t=>t.disabled}" ?hidden="${t=>!t.open}" ${Bt("listbox")}><slot ${Qt({filter:_i.slottedOptionFilter,flatten:!0,property:"slottedOptions"})}></slot></div></template>`,styles:Ed,indicator:'\n <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">\n <path d="M2.15 4.65c.2-.2.5-.2.7 0L6 7.79l3.15-3.14a.5.5 0 11.7.7l-3.5 3.5a.5.5 0 01-.7 0l-3.5-3.5a.5.5 0 010-.7z"/>\n </svg>\n '}),Gu=Ed,Wu=(t,e)=>Dt`
|
|
139
139
|
${eo("block")} :host{--skeleton-fill-default:${pl};overflow:hidden;width:100%;position:relative;background-color:var(--skeleton-fill,var(--skeleton-fill-default));--skeleton-animation-gradient-default:linear-gradient(
|
|
140
140
|
270deg,var(--skeleton-fill,var(--skeleton-fill-default)) 0%,${gl} 51%,var(--skeleton-fill,var(--skeleton-fill-default)) 100%
|
|
141
141
|
);--skeleton-animation-timing-default:ease-in-out}:host(.rect){border-radius:calc(${Bn} * 1px)}:host(.circle){border-radius:100%;overflow:hidden}object{position:absolute;width:100%;height:auto;z-index:2}object img{width:100%;height:auto}${eo("block")} span.shimmer{position:absolute;width:100%;height:100%;background-image:var(--skeleton-animation-gradient,var(--skeleton-animation-gradient-default));background-size:0px 0px / 90% 100%;background-repeat:no-repeat;background-color:var(--skeleton-animation-fill,${pl});animation:shimmer 2s infinite;animation-timing-function:var(--skeleton-animation-timing,var(--skeleton-timing-default));animation-direction:normal;z-index:1}::slotted(svg){z-index:2}::slotted(.pattern){width:100%;height:100%}@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}`.withBehaviors(Ji(Dt`
|
|
142
142
|
:host{background-color:${Ns.CanvasText}}`)),Ku=ps.compose({baseName:"skeleton",template:(t,e)=>nt`<template class="${t=>"circle"===t.shape?"circle":"rect"}" pattern="${t=>t.pattern}" ?shimmer="${t=>t.shimmer}">${Nt(t=>!0===t.shimmer,nt`<span class="shimmer"></span>`)}<object type="image/svg+xml" data="${t=>t.pattern}"><img class="pattern" src="${t=>t.pattern}" /></object><slot></slot></template>`,styles:Wu}),Xu=Wu,Yu=(t,e)=>Dt`
|
|
143
|
-
${eo("inline-grid")} :host{--thumb-size:calc((${ah} / 2) + ${Mn} + (${jn} * 2));--thumb-translate:calc(var(--thumb-size) * -0.5 + var(--track-width) / 2);--track-overhang:calc((${Mn} / 2) * -1);--track-width:${Mn};align-items:center;width:100%;
|
|
143
|
+
${eo("inline-grid")} :host{--thumb-size:calc((${ah} / 2) + ${Mn} + (${jn} * 2));--thumb-translate:calc(var(--thumb-size) * -0.5 + var(--track-width) / 2);--track-overhang:calc((${Mn} / 2) * -1);--track-width:${Mn};align-items:center;width:100%;user-select:none;box-sizing:border-box;border-radius:calc(${Bn} * 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(:${io}) .thumb-cursor{box-shadow:0 0 0 2px ${ka},0 0 0 4px ${ac}}.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(${Ga},${Ga}),border-box ${Bl};border:calc(${jn} * 1px) solid transparent;border-radius:50%;box-sizing:border-box}.thumb-cursor::after{content:'';display:block;border-radius:50%;width:100%;margin:4px;background:${Ia}}:host(:not(.disabled)) .thumb-cursor:hover::after{background:${Ta};margin:3px}:host(:not(.disabled)) .thumb-cursor:active::after{background:${Da};margin:5px}:host(:not(.disabled)) .thumb-cursor:hover{background:padding-box linear-gradient(${Ga},${Ga}),border-box ${Nl}}:host(:not(.disabled)) .thumb-cursor:active{background:padding-box linear-gradient(${Ga},${Ga}),border-box ${jl}}.track-start{background:${Ia};position:absolute;height:100%;left:0;border-radius:calc(${Bn} * 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:${kl};border:1px solid ${ic};border-radius:2px;box-sizing:border-box;position:absolute}:host(.vertical){height:100%;min-height:calc(${Mn} * 60px);min-width:calc(${Mn} * 20px)}:host(.vertical) .track-start{height:auto;width:100%;top:0}:host(.disabled),:host(.readonly){cursor:${"not-allowed"}}:host(.disabled){opacity:${Ln}}`.withBehaviors(Ji(Dt`
|
|
144
144
|
.thumb-cursor{forced-color-adjust:none;border-color:${Ns.FieldText};background:${Ns.FieldText}}:host(:not(.disabled)) .thumb-cursor:hover,:host(:not(.disabled)) .thumb-cursor:active{background:${Ns.Highlight}}.track{forced-color-adjust:none;background:${Ns.FieldText}}.thumb-cursor::after,:host(:not(.disabled)) .thumb-cursor:hover::after,:host(:not(.disabled)) .thumb-cursor:active::after{background:${Ns.Field}}:host(:${io}) .thumb-cursor{background:${Ns.Highlight};border-color:${Ns.Highlight};box-shadow:0 0 0 1px ${Ns.Field},0 0 0 3px ${Ns.FieldText}}:host(.disabled){opacity:1}:host(.disabled) .track,:host(.disabled) .thumb-cursor{forced-color-adjust:none;background:${Ns.GrayText}}`)),Qu=xs.compose({baseName:"slider",template:(t,e)=>nt`<template role="slider" class="${t=>t.readOnly?"readonly":""} ${t=>t.orientation||We.horizontal}" tabindex="${t=>t.disabled?null:0}" aria-valuetext="${t=>t.valueTextFormatter(t.value)}" aria-valuenow="${t=>t.value}" aria-valuemin="${t=>t.min}" aria-valuemax="${t=>t.max}" aria-disabled="${t=>!!t.disabled||void 0}" aria-readonly="${t=>!!t.readOnly||void 0}" aria-orientation="${t=>t.orientation}" class="${t=>t.orientation}"><div part="positioning-region" class="positioning-region"><div ${Bt("track")} part="track-container" class="track"><slot name="track"></slot></div><slot></slot><div ${Bt("thumb")} part="thumb-container" class="thumb-container" style="${t=>t.position}"><slot name="thumb">${e.thumb||""}</slot></div></div></template>`,styles:Yu,thumb:'\n <div class="thumb-cursor"></div>\n '}),Zu=Yu,Ju=(t,e)=>Dt`
|
|
145
145
|
${eo("block")} :host{font-family:${qn}}.root{position:absolute;display:grid}:host(.horizontal){align-self:start;grid-row:2;margin-top:-4px}:host(.vertical){justify-self:start;grid-column:2;margin-left:2px}.container{display:grid;justify-self:center}:host(.horizontal) .container{grid-template-rows:auto auto;grid-template-columns:0}:host(.vertical) .container{grid-template-columns:auto auto;grid-template-rows:0;min-width:calc(var(--thumb-size) * 1px);height:calc(var(--thumb-size) * 1px)}.label{justify-self:center;align-self:center;white-space:nowrap;max-width:30px;margin:2px 0}.mark{width:calc(${jn} * 1px);height:calc(${Mn} * 1px);background:${ic};justify-self:center}:host(.vertical) .mark{transform:rotate(90deg);align-self:center}:host(.vertical) .label{margin-left:calc((${Mn} / 2) * 2px);align-self:center}:host(.disabled){opacity:${Ln}}`.withBehaviors(Ji(Dt`
|
|
146
146
|
.mark{forced-color-adjust:none;background:${Ns.FieldText}}:host(.disabled){forced-color-adjust:none;opacity:1}:host(.disabled) .label{color:${Ns.GrayText}}:host(.disabled) .mark{background:${Ns.GrayText}}`)),tp=ms.compose({baseName:"slider-label",template:(t,e)=>nt`<template aria-disabled="${t=>t.disabled}" class="${t=>t.sliderOrientation||We.horizontal} ${t=>t.disabled?"disabled":""}"><div ${Bt("root")} part="root" class="root" style="${t=>t.positionStyle}"><div class="container">${Nt(t=>!t.hideMark,nt`<div class="mark"></div>`)}<div class="label"><slot></slot></div></div></div></template>`,styles:Ju}),ep=Ju,ip=(t,e)=>Dt`
|
|
147
|
-
:host([hidden]){display:none}${eo("inline-flex")} :host{align-items:center;outline:none;font-family:${qn}
|
|
147
|
+
:host([hidden]){display:none}${eo("inline-flex")} :host{align-items:center;outline:none;font-family:${qn};${""} user-select:none}:host(.disabled){opacity:${Ln}}:host(.disabled) .label,:host(.readonly) .label,:host(.disabled) .switch,:host(.readonly) .switch,:host(.disabled) .status-message,:host(.readonly) .status-message{cursor:${"not-allowed"}}.switch{position:relative;outline:none;box-sizing:border-box;width:calc(((${ah} / 2) + ${Mn}) * 2px);height:calc(((${ah} / 2) + ${Mn}) * 1px);background:${il};border-radius:calc(${ah} * 1px);border:calc(${jn} * 1px) solid ${ic};cursor:pointer}:host(:not(.disabled):hover) .switch{background:${ol};border-color:${oc}}:host(:not(.disabled):active) .switch{background:${sl};border-color:${sc}}:host(:${io}) .switch{box-shadow:0 0 0 1px ${ka},0 0 0 3px ${ac};background:${nl};border-color:${ac}}:host(.checked) .switch{background:${Ia};border-color:transparent}:host(.checked:not(.disabled):hover) .switch{background:${Ta};border-color:transparent}:host(.checked:not(.disabled):active) .switch{background:${Da};border-color:transparent}slot[name='switch']{position:absolute;display:flex;border:1px solid transparent;fill:${Dl};transition:all 0.2s ease-in-out}.status-message{color:${Dl};cursor:pointer;font-size:${_n};line-height:${Gn}}.label__hidden{display:none;visibility:hidden}.label{color:${Dl};font-size:${_n};line-height:${Gn};margin-inline-end:calc(${Mn} * 2px + 2px);cursor:pointer}::slotted([slot="checked-message"]),::slotted([slot="unchecked-message"]){margin-inline-start:calc(${Mn} * 2px + 2px)}:host(.checked) .switch{background:${Ia}}:host(.checked) .switch slot[name='switch']{fill:${Ra};filter:drop-shadow(0px 1px 1px rgba(0,0,0,0.15))}:host(.checked:not(.disabled)) .switch:hover{background:${Ta}}:host(.checked:not(.disabled)) .switch:hover slot[name='switch']{fill:${Ea}}:host(.checked:not(.disabled)) .switch:active{background:${Da}}:host(.checked:not(.disabled)) .switch:active slot[name='switch']{fill:${Oa}}:host(.checked:${io}:not(.disabled)) .switch{box-shadow:0 0 0 1px ${ka},0 0 0 3px ${ac};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 bh(Dt`
|
|
148
148
|
slot[name='switch']{left:0}:host(.checked) slot[name='switch']{left:100%;transform:translateX(-100%)}`,Dt`
|
|
149
149
|
slot[name='switch']{right:0}:host(.checked) slot[name='switch']{right:100%;transform:translateX(100%)}`),Ji(Dt`
|
|
150
150
|
:host(:not(.disabled)) .switch slot[name='switch']{forced-color-adjust:none;fill:${Ns.FieldText}}.switch{background:${Ns.Field};border-color:${Ns.FieldText}}:host(.checked) .switch{background:${Ns.Highlight};border-color:${Ns.Highlight}}:host(:not(.disabled):hover) .switch,:host(:not(.disabled):active) .switch,:host(.checked:not(.disabled):hover) .switch{background:${Ns.HighlightText};border-color:${Ns.Highlight}}:host(.checked:not(.disabled)) .switch slot[name="switch"]{fill:${Ns.HighlightText}}:host(.checked:not(.disabled):hover) .switch slot[name='switch']{fill:${Ns.Highlight}}:host(:${io}) .switch{forced-color-adjust:none;background:${Ns.Field};border-color:${Ns.Highlight};box-shadow:0 0 0 1px ${Ns.Highlight},0 0 0 3px ${Ns.FieldText}}:host(.checked:${io}:not(.disabled)) .switch{forced-color-adjust:none;background:${Ns.Highlight};box-shadow:0 0 0 1px ${Ns.Field},0 0 0 3px ${Ns.FieldText};border-color:${Ns.Field}}:host(.disabled){opacity:1}:host(.disabled) slot[name='switch']{forced-color-adjust:none;fill:${Ns.GrayText}}:host(.disabled) .switch{background:${Ns.Field};border-color:${Ns.GrayText}}.status-message,.label{color:${Ns.FieldText}}`)),op=ks.compose({baseName:"switch",template:(t,e)=>nt`<template role="switch" aria-checked="${t=>t.checked}" aria-disabled="${t=>t.disabled}" aria-readonly="${t=>t.readOnly}" tabindex="${t=>t.disabled?null:0}" @keypress="${(t,e)=>t.keypressHandler(e.event)}" @click="${(t,e)=>t.clickHandler(e.event)}" class="${t=>t.checked?"checked":""}"><label part="label" class="${t=>t.defaultSlottedNodes&&t.defaultSlottedNodes.length?"label":"label label__hidden"}"><slot ${Qt("defaultSlottedNodes")}></slot></label><div part="switch" class="switch"><slot name="switch">${e.switch||""}</slot></div><span class="status-message" part="status-message"><span class="checked-message" part="checked-message"><slot name="checked-message"></slot></span><span class="unchecked-message" part="unchecked-message"><slot name="unchecked-message"></slot></span></span></template>`,styles:ip,switch:'\n <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">\n <rect x="2" y="2" width="12" height="12" rx="6"/>\n </svg>\n '}),sp=ip,np=(t,e)=>Dt`
|