@fluentui/web-components 3.0.0-beta.15 → 3.0.0-beta.16

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.
Files changed (55) hide show
  1. package/CHANGELOG.md +175 -103
  2. package/dist/dts/menu-item/menu-item.options.d.ts +1 -1
  3. package/dist/dts/theme/design-tokens.d.ts +53 -1
  4. package/dist/esm/anchor-button/anchor-button.js.map +1 -1
  5. package/dist/esm/avatar/avatar.js.map +1 -1
  6. package/dist/esm/menu-list/menu-list.js.map +1 -1
  7. package/dist/esm/theme/design-tokens.js +53 -1
  8. package/dist/esm/theme/design-tokens.js.map +1 -1
  9. package/dist/esm/utils/get-initials.js.map +1 -1
  10. package/dist/fluent-web-components.api.json +1575 -223
  11. package/dist/web-components.d.ts +105 -1
  12. package/dist/web-components.js +1128 -145
  13. package/dist/web-components.min.js +353 -283
  14. package/docs/api-report.md +157 -1
  15. package/package.json +5 -10
  16. package/project.json +6 -0
  17. package/dist/storybook/108.78b731e00015540915a8.manager.bundle.js +0 -1
  18. package/dist/storybook/108.b31ec3a1.iframe.bundle.js +0 -1
  19. package/dist/storybook/289.703b1698.iframe.bundle.js +0 -2
  20. package/dist/storybook/289.703b1698.iframe.bundle.js.LICENSE.txt +0 -51
  21. package/dist/storybook/316.bc4aabd3.iframe.bundle.js +0 -2
  22. package/dist/storybook/316.bc4aabd3.iframe.bundle.js.LICENSE.txt +0 -17
  23. package/dist/storybook/401.7edec720.iframe.bundle.js +0 -2
  24. package/dist/storybook/401.7edec720.iframe.bundle.js.LICENSE.txt +0 -12
  25. package/dist/storybook/401.c9bdfaf0dda8b194127f.manager.bundle.js +0 -2
  26. package/dist/storybook/401.c9bdfaf0dda8b194127f.manager.bundle.js.LICENSE.txt +0 -12
  27. package/dist/storybook/491.77b24750.iframe.bundle.js +0 -1
  28. package/dist/storybook/591.f5bf0d78d2f203de19f5.manager.bundle.js +0 -2
  29. package/dist/storybook/591.f5bf0d78d2f203de19f5.manager.bundle.js.LICENSE.txt +0 -94
  30. package/dist/storybook/709.22096ad4.iframe.bundle.js +0 -2
  31. package/dist/storybook/709.22096ad4.iframe.bundle.js.LICENSE.txt +0 -8
  32. package/dist/storybook/709.b131e33993a6b94d7ad8.manager.bundle.js +0 -2
  33. package/dist/storybook/709.b131e33993a6b94d7ad8.manager.bundle.js.LICENSE.txt +0 -8
  34. package/dist/storybook/721.46fa9f53.iframe.bundle.js +0 -2
  35. package/dist/storybook/721.46fa9f53.iframe.bundle.js.LICENSE.txt +0 -31
  36. package/dist/storybook/721.c225c101a0a55a8f98eb.manager.bundle.js +0 -2
  37. package/dist/storybook/721.c225c101a0a55a8f98eb.manager.bundle.js.LICENSE.txt +0 -31
  38. package/dist/storybook/858.da40ed98.iframe.bundle.js +0 -1
  39. package/dist/storybook/858.e08e25a6901d2e21e9d8.manager.bundle.js +0 -1
  40. package/dist/storybook/950.674e7934b4a26a022608.manager.bundle.js +0 -1
  41. package/dist/storybook/954.630c5748.iframe.bundle.js +0 -1
  42. package/dist/storybook/954.7f985e2fdf9f15a7748b.manager.bundle.js +0 -1
  43. package/dist/storybook/SegoeUI-VF.ttf +0 -0
  44. package/dist/storybook/favicon.ico +0 -0
  45. package/dist/storybook/favicon.png +0 -0
  46. package/dist/storybook/iframe.html +0 -364
  47. package/dist/storybook/index.html +0 -165
  48. package/dist/storybook/main.5d7b916dc1e37293b1d8.manager.bundle.js +0 -1
  49. package/dist/storybook/main.6c75b8cb.iframe.bundle.js +0 -2
  50. package/dist/storybook/main.6c75b8cb.iframe.bundle.js.LICENSE.txt +0 -1
  51. package/dist/storybook/project.json +0 -1
  52. package/dist/storybook/runtime~main.5d918fe7.iframe.bundle.js +0 -1
  53. package/dist/storybook/runtime~main.dbf00b470fe610082919.manager.bundle.js +0 -1
  54. package/dist/storybook/shell.css +0 -83
  55. package/dist/storybook/theme-switch.ts +0 -13
@@ -625,6 +625,18 @@ export const colorBrandBackground = "var(--colorBrandBackground)";
625
625
  // @public (undocumented)
626
626
  export const colorBrandBackground2 = "var(--colorBrandBackground2)";
627
627
 
628
+ // @public (undocumented)
629
+ export const colorBrandBackground2Hover = "var(--colorBrandBackground2Hover)";
630
+
631
+ // @public (undocumented)
632
+ export const colorBrandBackground2Pressed = "var(--colorBrandBackground2Pressed)";
633
+
634
+ // @public (undocumented)
635
+ export const colorBrandBackground3Static = "var(--colorBrandBackground3Static)";
636
+
637
+ // @public (undocumented)
638
+ export const colorBrandBackground4Static = "var(--colorBrandBackground4Static)";
639
+
628
640
  // @public (undocumented)
629
641
  export const colorBrandBackgroundHover = "var(--colorBrandBackgroundHover)";
630
642
 
@@ -655,6 +667,12 @@ export const colorBrandForeground1 = "var(--colorBrandForeground1)";
655
667
  // @public (undocumented)
656
668
  export const colorBrandForeground2 = "var(--colorBrandForeground2)";
657
669
 
670
+ // @public (undocumented)
671
+ export const colorBrandForeground2Hover = "var(--colorBrandForeground2Hover)";
672
+
673
+ // @public (undocumented)
674
+ export const colorBrandForeground2Pressed = "var(--colorBrandForeground2Pressed)";
675
+
658
676
  // @public (undocumented)
659
677
  export const colorBrandForegroundInverted = "var(--colorBrandForegroundInverted)";
660
678
 
@@ -700,6 +718,15 @@ export const colorBrandStroke1 = "var(--colorBrandStroke1)";
700
718
  // @public (undocumented)
701
719
  export const colorBrandStroke2 = "var(--colorBrandStroke2)";
702
720
 
721
+ // @public (undocumented)
722
+ export const colorBrandStroke2Contrast = "var(--colorBrandStroke2Contrast)";
723
+
724
+ // @public (undocumented)
725
+ export const colorBrandStroke2Hover = "var(--colorBrandStroke2Hover)";
726
+
727
+ // @public (undocumented)
728
+ export const colorBrandStroke2Pressed = "var(--colorBrandStroke2Pressed)";
729
+
703
730
  // @public (undocumented)
704
731
  export const colorCompoundBrandBackground = "var(--colorCompoundBrandBackground)";
705
732
 
@@ -790,6 +817,12 @@ export const colorNeutralBackground5Selected = "var(--colorNeutralBackground5Sel
790
817
  // @public (undocumented)
791
818
  export const colorNeutralBackground6 = "var(--colorNeutralBackground6)";
792
819
 
820
+ // @public (undocumented)
821
+ export const colorNeutralBackgroundAlpha = "var(--colorNeutralBackgroundAlpha)";
822
+
823
+ // @public (undocumented)
824
+ export const colorNeutralBackgroundAlpha2 = "var(--colorNeutralBackgroundAlpha2)";
825
+
793
826
  // @public (undocumented)
794
827
  export const colorNeutralBackgroundDisabled = "var(--colorNeutralBackgroundDisabled)";
795
828
 
@@ -802,6 +835,21 @@ export const colorNeutralBackgroundInvertedDisabled = "var(--colorNeutralBackgro
802
835
  // @public (undocumented)
803
836
  export const colorNeutralBackgroundStatic = "var(--colorNeutralBackgroundStatic)";
804
837
 
838
+ // @public (undocumented)
839
+ export const colorNeutralCardBackground = "var(--colorNeutralCardBackground)";
840
+
841
+ // @public (undocumented)
842
+ export const colorNeutralCardBackgroundDisabled = "var(--colorNeutralCardBackgroundDisabled)";
843
+
844
+ // @public (undocumented)
845
+ export const colorNeutralCardBackgroundHover = "var(--colorNeutralCardBackgroundHover)";
846
+
847
+ // @public (undocumented)
848
+ export const colorNeutralCardBackgroundPressed = "var(--colorNeutralCardBackgroundPressed)";
849
+
850
+ // @public (undocumented)
851
+ export const colorNeutralCardBackgroundSelected = "var(--colorNeutralCardBackgroundSelected)";
852
+
805
853
  // @public (undocumented)
806
854
  export const colorNeutralForeground1 = "var(--colorNeutralForeground1)";
807
855
 
@@ -973,6 +1021,12 @@ export const colorNeutralStrokeAccessiblePressed = "var(--colorNeutralStrokeAcce
973
1021
  // @public (undocumented)
974
1022
  export const colorNeutralStrokeAccessibleSelected = "var(--colorNeutralStrokeAccessibleSelected)";
975
1023
 
1024
+ // @public (undocumented)
1025
+ export const colorNeutralStrokeAlpha = "var(--colorNeutralStrokeAlpha)";
1026
+
1027
+ // @public (undocumented)
1028
+ export const colorNeutralStrokeAlpha2 = "var(--colorNeutralStrokeAlpha2)";
1029
+
976
1030
  // @public (undocumented)
977
1031
  export const colorNeutralStrokeDisabled = "var(--colorNeutralStrokeDisabled)";
978
1032
 
@@ -994,6 +1048,9 @@ export const colorNeutralStrokeOnBrand2Pressed = "var(--colorNeutralStrokeOnBran
994
1048
  // @public (undocumented)
995
1049
  export const colorNeutralStrokeOnBrand2Selected = "var(--colorNeutralStrokeOnBrand2Selected)";
996
1050
 
1051
+ // @public (undocumented)
1052
+ export const colorNeutralStrokeSubtle = "var(--colorNeutralStrokeSubtle)";
1053
+
997
1054
  // @public (undocumented)
998
1055
  export const colorPaletteAnchorBackground2 = "var(--colorPaletteAnchorBackground2)";
999
1056
 
@@ -1447,6 +1504,102 @@ export const colorPaletteYellowForegroundInverted = "var(--colorPaletteYellowFor
1447
1504
  // @public (undocumented)
1448
1505
  export const colorScrollbarOverlay = "var(--colorScrollbarOverlay)";
1449
1506
 
1507
+ // @public (undocumented)
1508
+ export const colorStatusDangerBackground1 = "var(--colorStatusDangerBackground1)";
1509
+
1510
+ // @public (undocumented)
1511
+ export const colorStatusDangerBackground2 = "var(--colorStatusDangerBackground2)";
1512
+
1513
+ // @public (undocumented)
1514
+ export const colorStatusDangerBackground3 = "var(--colorStatusDangerBackground3)";
1515
+
1516
+ // @public (undocumented)
1517
+ export const colorStatusDangerBackground3Hover = "var(--colorStatusDangerBackground3Hover)";
1518
+
1519
+ // @public (undocumented)
1520
+ export const colorStatusDangerBackground3Pressed = "var(--colorStatusDangerBackground3Pressed)";
1521
+
1522
+ // @public (undocumented)
1523
+ export const colorStatusDangerBorder1 = "var(--colorStatusDangerBorder1)";
1524
+
1525
+ // @public (undocumented)
1526
+ export const colorStatusDangerBorder2 = "var(--colorStatusDangerBorder2)";
1527
+
1528
+ // @public (undocumented)
1529
+ export const colorStatusDangerBorderActive = "var(--colorStatusDangerBorderActive)";
1530
+
1531
+ // @public (undocumented)
1532
+ export const colorStatusDangerForeground1 = "var(--colorStatusDangerForeground1)";
1533
+
1534
+ // @public (undocumented)
1535
+ export const colorStatusDangerForeground2 = "var(--colorStatusDangerForeground2)";
1536
+
1537
+ // @public (undocumented)
1538
+ export const colorStatusDangerForeground3 = "var(--colorStatusDangerForeground3)";
1539
+
1540
+ // @public (undocumented)
1541
+ export const colorStatusDangerForegroundInverted = "var(--colorStatusDangerForegroundInverted)";
1542
+
1543
+ // @public (undocumented)
1544
+ export const colorStatusSuccessBackground1 = "var(--colorStatusSuccessBackground1)";
1545
+
1546
+ // @public (undocumented)
1547
+ export const colorStatusSuccessBackground2 = "var(--colorStatusSuccessBackground2)";
1548
+
1549
+ // @public (undocumented)
1550
+ export const colorStatusSuccessBackground3 = "var(--colorStatusSuccessBackground3)";
1551
+
1552
+ // @public (undocumented)
1553
+ export const colorStatusSuccessBorder1 = "var(--colorStatusSuccessBorder1)";
1554
+
1555
+ // @public (undocumented)
1556
+ export const colorStatusSuccessBorder2 = "var(--colorStatusSuccessBorder2)";
1557
+
1558
+ // @public (undocumented)
1559
+ export const colorStatusSuccessBorderActive = "var(--colorStatusSuccessBorderActive)";
1560
+
1561
+ // @public (undocumented)
1562
+ export const colorStatusSuccessForeground1 = "var(--colorStatusSuccessForeground1)";
1563
+
1564
+ // @public (undocumented)
1565
+ export const colorStatusSuccessForeground2 = "var(--colorStatusSuccessForeground2)";
1566
+
1567
+ // @public (undocumented)
1568
+ export const colorStatusSuccessForeground3 = "var(--colorStatusSuccessForeground3)";
1569
+
1570
+ // @public (undocumented)
1571
+ export const colorStatusSuccessForegroundInverted = "var(--colorStatusSuccessForegroundInverted)";
1572
+
1573
+ // @public (undocumented)
1574
+ export const colorStatusWarningBackground1 = "var(--colorStatusWarningBackground1)";
1575
+
1576
+ // @public (undocumented)
1577
+ export const colorStatusWarningBackground2 = "var(--colorStatusWarningBackground2)";
1578
+
1579
+ // @public (undocumented)
1580
+ export const colorStatusWarningBackground3 = "var(--colorStatusWarningBackground3)";
1581
+
1582
+ // @public (undocumented)
1583
+ export const colorStatusWarningBorder1 = "var(--colorStatusWarningBorder1)";
1584
+
1585
+ // @public (undocumented)
1586
+ export const colorStatusWarningBorder2 = "var(--colorStatusWarningBorder2)";
1587
+
1588
+ // @public (undocumented)
1589
+ export const colorStatusWarningBorderActive = "var(--colorStatusWarningBorderActive)";
1590
+
1591
+ // @public (undocumented)
1592
+ export const colorStatusWarningForeground1 = "var(--colorStatusWarningForeground1)";
1593
+
1594
+ // @public (undocumented)
1595
+ export const colorStatusWarningForeground2 = "var(--colorStatusWarningForeground2)";
1596
+
1597
+ // @public (undocumented)
1598
+ export const colorStatusWarningForeground3 = "var(--colorStatusWarningForeground3)";
1599
+
1600
+ // @public (undocumented)
1601
+ export const colorStatusWarningForegroundInverted = "var(--colorStatusWarningForegroundInverted)";
1602
+
1450
1603
  // @public (undocumented)
1451
1604
  export const colorStrokeFocus1 = "var(--colorStrokeFocus1)";
1452
1605
 
@@ -1774,6 +1927,9 @@ export const durationFast = "var(--durationFast)";
1774
1927
  // @public (undocumented)
1775
1928
  export const durationFaster = "var(--durationFaster)";
1776
1929
 
1930
+ // @public (undocumented)
1931
+ export const durationGentle = "var(--durationGentle)";
1932
+
1777
1933
  // @public (undocumented)
1778
1934
  export const durationNormal = "var(--durationNormal)";
1779
1935
 
@@ -2320,7 +2476,7 @@ export const RadioTemplate: ElementViewTemplate<Radio>;
2320
2476
  //
2321
2477
  // @internal (undocumented)
2322
2478
  export const roleForMenuItem: {
2323
- [value in keyof typeof MenuItemRole]: typeof MenuItemRole[value];
2479
+ [value in keyof typeof MenuItemRole]: (typeof MenuItemRole)[value];
2324
2480
  };
2325
2481
 
2326
2482
  // @public
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fluentui/web-components",
3
3
  "description": "A library of Fluent Web Components",
4
- "version": "3.0.0-beta.15",
4
+ "version": "3.0.0-beta.16",
5
5
  "author": {
6
6
  "name": "Microsoft",
7
7
  "url": "https://discord.gg/FcSNfg4"
@@ -176,8 +176,7 @@
176
176
  "./dist/esm/toggle-button/define.js"
177
177
  ],
178
178
  "scripts": {
179
- "tsc": "tsc",
180
- "api-extractor": "api-extractor",
179
+ "type-check": "echo 'TODO'",
181
180
  "benchmark": "yarn clean && yarn compile:benchmark && yarn compile && node ./scripts/run-benchmarks",
182
181
  "compile": "node ./scripts/compile",
183
182
  "compile:benchmark": "rollup -c rollup.bench.js",
@@ -192,22 +191,18 @@
192
191
  "start": "yarn start-storybook -p 6006 --docs --no-manager-cache",
193
192
  "start-storybook": "node node_modules/@storybook/html/bin/index",
194
193
  "build-storybook": "node node_modules/@storybook/html/bin/build -o ./dist/storybook --docs",
195
- "pretest": "yarn build-storybook --quiet",
196
- "test": "npx playwright test",
194
+ "e2e": "playwright test",
197
195
  "test:dev": "playwright test"
198
196
  },
199
197
  "devDependencies": {
200
198
  "@types/web": "^0.0.142",
201
- "@microsoft/api-extractor": "7.31.2",
202
199
  "@storybook/html": "6.5.15",
203
- "@tensile-perf/web-components": "~0.1.13",
204
- "rimraf": "^3.0.2",
205
- "typescript": "4.7.4"
200
+ "@tensile-perf/web-components": "~0.1.13"
206
201
  },
207
202
  "dependencies": {
208
203
  "@microsoft/fast-element": "2.0.0-beta.26",
209
204
  "@microsoft/fast-web-utilities": "^6.0.0",
210
- "@fluentui/tokens": "1.0.0-alpha.2",
205
+ "@fluentui/tokens": "1.0.0-alpha.16",
211
206
  "tabbable": "^6.2.0",
212
207
  "tslib": "^2.1.0"
213
208
  },
package/project.json ADDED
@@ -0,0 +1,6 @@
1
+ {
2
+ "name": "@fluentui/web-components",
3
+ "$schema": "../../node_modules/nx/schemas/project-schema.json",
4
+ "projectType": "library",
5
+ "implicitDependencies": []
6
+ }
@@ -1 +0,0 @@
1
- "use strict";(self.webpackChunk_fluentui_web_components=self.webpackChunk_fluentui_web_components||[]).push([[108],{29108:(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>GlobalScrollAreaStyles,getScrollAreaStyles:()=>getScrollAreaStyles});__webpack_require__(32501),__webpack_require__(22144);var _templateObject,react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(2784),_storybook_theming__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(77439);var hsResizeObserverDummyAnimation=(0,_storybook_theming__WEBPACK_IMPORTED_MODULE_3__.F4)(_templateObject||(_templateObject=function _taggedTemplateLiteral(strings,raw){return raw||(raw=strings.slice(0)),Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}))}(["0%{z-index:0}to{z-index:-1}"]))),getScrollAreaStyles=function getScrollAreaStyles(theme){return{"html.os-html, html.os-html>.os-host":{display:"block",overflow:"hidden",boxSizing:"border-box",height:"100%!important",width:"100%!important",minWidth:"100%!important",minHeight:"100%!important",margin:"0!important",position:"absolute!important"},"html.os-html>.os-host>.os-padding":{position:"absolute"},"body.os-dragging, body.os-dragging *":{cursor:"default"},".os-host, .os-host-textarea":{position:"relative",overflow:"visible!important",flexDirection:"column",flexWrap:"nowrap",justifyContent:"flex-start",alignContent:"flex-start",alignItems:"flex-start"},".os-host-flexbox":{overflow:"hidden!important",display:"flex"},".os-host-flexbox>.os-size-auto-observer":{height:"inherit!important"},".os-host-flexbox>.os-content-glue":{flexGrow:1,flexShrink:0},".os-host-flexbox>.os-size-auto-observer, .os-host-flexbox>.os-content-glue":{minHeight:0,minWidth:0,flexGrow:0,flexShrink:1,flexBasis:"auto"},"#os-dummy-scrollbar-size":{position:"fixed",opacity:0,visibility:"hidden",overflow:"scroll",height:500,width:500},"#os-dummy-scrollbar-size>div":{width:"200%",height:"200%",margin:10},"#os-dummy-scrollbar-size, .os-viewport":{},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size, .os-viewport-native-scrollbars-invisible.os-viewport":{scrollbarWidth:"none!important"},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner":{display:"none!important",width:"0!important",height:"0!important",visibility:"hidden!important",background:"0 0!important"},".os-content-glue":{boxSizing:"inherit",maxHeight:"100%",maxWidth:"100%",width:"100%",pointerEvents:"none"},".os-padding":{boxSizing:"inherit",direction:"inherit",position:"absolute",overflow:"visible",padding:0,margin:0,left:0,top:0,bottom:0,right:0,width:"auto!important",height:"auto!important",zIndex:1},".os-host-overflow>.os-padding":{overflow:"hidden"},".os-viewport":{direction:"inherit!important",boxSizing:"inherit!important",resize:"none!important",outline:"0!important",position:"absolute",overflow:"hidden",top:0,left:0,bottom:0,right:0,padding:0,margin:0},".os-content-arrange":{position:"absolute",zIndex:-1,minHeight:1,minWidth:1,pointerEvents:"none"},".os-content":{direction:"inherit",boxSizing:"border-box!important",position:"relative",display:"block",height:"100%",width:"100%",visibility:"visible"},".os-content:before, .os-content:after":{content:"''",display:"table",width:0,height:0,lineHeight:0,fontSize:0},".os-content>.os-textarea":{boxSizing:"border-box!important",direction:"inherit!important",background:"0 0!important",outline:"0 transparent!important",overflow:"hidden!important",position:"absolute!important",display:"block!important",top:"0!important",left:"0!important",margin:"0!important",borderRadius:"0!important",float:"none!important",filter:"none!important",border:"0!important",resize:"none!important",transform:"none!important",maxWidth:"none!important",maxHeight:"none!important",boxShadow:"none!important",perspective:"none!important",opacity:"1!important",zIndex:"1!important",clip:"auto!important",verticalAlign:"baseline!important",padding:0},".os-host-rtl>.os-padding>.os-viewport>.os-content>.os-textarea":{right:"0!important"},".os-content>.os-textarea-cover":{zIndex:-1,pointerEvents:"none"},".os-content>.os-textarea[wrap=off]":{whiteSpace:"pre!important",margin:"0!important"},".os-text-inherit":{fontFamily:"inherit",fontSize:"inherit",fontWeight:"inherit",fontStyle:"inherit",fontVariant:"inherit",textTransform:"inherit",textDecoration:"inherit",textIndent:"inherit",textAlign:"inherit",textShadow:"inherit",textOverflow:"inherit",letterSpacing:"inherit",wordSpacing:"inherit",lineHeight:"inherit",unicodeBidi:"inherit",direction:"inherit",color:"inherit",cursor:"text"},".os-resize-observer, .os-resize-observer-host":{boxSizing:"inherit",display:"block",opacity:0,position:"absolute",top:0,left:0,height:"100%",width:"100%",overflow:"hidden",pointerEvents:"none",zIndex:-1},".os-resize-observer-host":{padding:"inherit",border:"inherit",borderColor:"transparent",borderStyle:"solid",boxSizing:"border-box"},".os-resize-observer-host:after":{content:"''"},".os-resize-observer-host>.os-resize-observer, .os-resize-observer-host:after":{height:"200%",width:"200%",padding:"inherit",border:"inherit",margin:0,display:"block",boxSizing:"content-box"},".os-resize-observer.observed, object.os-resize-observer":{boxSizing:"border-box!important"},".os-size-auto-observer":{boxSizing:"inherit!important",height:"100%",width:"inherit",maxWidth:1,position:"relative",float:"left",maxHeight:1,overflow:"hidden",zIndex:-1,padding:0,margin:0,pointerEvents:"none",flexGrow:"inherit",flexShrink:0,flexBasis:0},".os-size-auto-observer>.os-resize-observer":{width:"1000%",height:"1000%",minHeight:1,minWidth:1},".os-resize-observer-item":{position:"absolute",top:0,right:0,bottom:0,left:0,overflow:"hidden",zIndex:-1,opacity:0,direction:"ltr!important",flex:"none!important"},".os-resize-observer-item-final":{position:"absolute",left:0,top:0,transition:"none!important",flex:"none!important"},".os-resize-observer":{animationDuration:".001s",animationName:"".concat(hsResizeObserverDummyAnimation)},".os-host-transition>.os-scrollbar, .os-host-transition>.os-scrollbar-corner":{transition:"opacity .3s,visibility .3s,top .3s,right .3s,bottom .3s,left .3s"},"html.os-html>.os-host>.os-scrollbar":{position:"absolute",zIndex:999999},".os-scrollbar, .os-scrollbar-corner":{position:"absolute",opacity:1,zIndex:1},".os-scrollbar-corner":{bottom:0,right:0,height:10,width:10,backgroundColor:"transparent"},".os-scrollbar":{pointerEvents:"none",padding:2,boxSizing:"border-box",background:0},".os-scrollbar-track":{pointerEvents:"auto",position:"relative",height:"100%",width:"100%",padding:"0!important",border:"0!important"},".os-scrollbar-handle":{pointerEvents:"auto",position:"absolute",width:"100%",height:"100%"},".os-scrollbar-handle-off, .os-scrollbar-track-off":{pointerEvents:"none"},".os-scrollbar.os-scrollbar-unusable, .os-scrollbar.os-scrollbar-unusable *":{pointerEvents:"none!important"},".os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle":{opacity:"0!important"},".os-scrollbar-horizontal":{bottom:0,left:0,right:10,height:10},".os-scrollbar-vertical":{top:0,right:0,bottom:10,width:10},".os-host-rtl>.os-scrollbar-horizontal":{right:0},".os-host-rtl>.os-scrollbar-vertical":{right:"auto",left:0},".os-host-rtl>.os-scrollbar-corner":{right:"auto",left:0},".os-scrollbar-auto-hidden, .os-padding+.os-scrollbar-corner, .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-corner, .os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal, .os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-corner, .os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical+.os-scrollbar-corner, .os-scrollbar-horizontal+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner":{opacity:0,visibility:"hidden",pointerEvents:"none"},".os-scrollbar-corner-resize-both":{cursor:"nwse-resize"},".os-host-rtl>.os-scrollbar-corner-resize-both":{cursor:"nesw-resize"},".os-scrollbar-corner-resize-horizontal":{cursor:"ew-resize"},".os-scrollbar-corner-resize-vertical":{cursor:"ns-resize"},".os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize":{cursor:"default"},".os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical":{top:0,bottom:0},".os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal, .os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal":{right:0,left:0},".os-scrollbar:hover, .os-scrollbar-corner.os-scrollbar-corner-resize":{opacity:"1!important",visibility:"visible!important"},".os-scrollbar-corner.os-scrollbar-corner-resize":{backgroundImage:"linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 100%)",backgroundRepeat:"no-repeat",backgroundPosition:"100% 100%",pointerEvents:"auto!important"},".os-host-rtl>.os-scrollbar-corner.os-scrollbar-corner-resize":{transform:"scale(-1,1)"},".os-host-overflow":{overflow:"hidden!important"},".os-theme-dark.os-host-rtl>.os-scrollbar-horizontal":{left:10,right:0},".os-scrollbar.os-scrollbar-unusable":{background:0},".os-scrollbar>.os-scrollbar-track":{background:0},".os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle":{minWidth:30},".os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle":{minHeight:30},".os-theme-dark.os-host-transition>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{transition:"background-color .3s"},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle, .os-scrollbar>.os-scrollbar-track":{borderRadius:10},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{background:theme.color.mediumdark,opacity:.5},".os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle":{opacity:.6},".os-scrollbar-horizontal .os-scrollbar-handle:before, .os-scrollbar-vertical .os-scrollbar-handle:before":{content:"''",position:"absolute",left:0,right:0,top:0,bottom:0,display:"block"},".os-theme-dark.os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-theme-dark.os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical .os-scrollbar-handle:before":{display:"none"},".os-scrollbar-horizontal .os-scrollbar-handle:before":{top:-6,bottom:-2},".os-scrollbar-vertical .os-scrollbar-handle:before":{left:-6,right:-2},".os-host-rtl.os-scrollbar-vertical .os-scrollbar-handle:before":{right:-6,left:-2}}},GlobalScrollAreaStyles=function GlobalScrollAreaStyles(){return react__WEBPACK_IMPORTED_MODULE_2__.createElement(_storybook_theming__WEBPACK_IMPORTED_MODULE_3__.xB,{styles:getScrollAreaStyles})}}}]);
@@ -1 +0,0 @@
1
- "use strict";(self.webpackChunk_fluentui_web_components=self.webpackChunk_fluentui_web_components||[]).push([[108],{"../../node_modules/@storybook/components/dist/esm/GlobalScrollAreaStyles-8793ce4a.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>GlobalScrollAreaStyles,getScrollAreaStyles:()=>getScrollAreaStyles});__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.freeze.js");var _templateObject,react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/index.js"),_storybook_theming__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/@storybook/theming/dist/esm/index.js");var hsResizeObserverDummyAnimation=(0,_storybook_theming__WEBPACK_IMPORTED_MODULE_3__.F4)(_templateObject||(_templateObject=function _taggedTemplateLiteral(strings,raw){return raw||(raw=strings.slice(0)),Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}))}(["0%{z-index:0}to{z-index:-1}"]))),getScrollAreaStyles=function getScrollAreaStyles(theme){return{"html.os-html, html.os-html>.os-host":{display:"block",overflow:"hidden",boxSizing:"border-box",height:"100%!important",width:"100%!important",minWidth:"100%!important",minHeight:"100%!important",margin:"0!important",position:"absolute!important"},"html.os-html>.os-host>.os-padding":{position:"absolute"},"body.os-dragging, body.os-dragging *":{cursor:"default"},".os-host, .os-host-textarea":{position:"relative",overflow:"visible!important",flexDirection:"column",flexWrap:"nowrap",justifyContent:"flex-start",alignContent:"flex-start",alignItems:"flex-start"},".os-host-flexbox":{overflow:"hidden!important",display:"flex"},".os-host-flexbox>.os-size-auto-observer":{height:"inherit!important"},".os-host-flexbox>.os-content-glue":{flexGrow:1,flexShrink:0},".os-host-flexbox>.os-size-auto-observer, .os-host-flexbox>.os-content-glue":{minHeight:0,minWidth:0,flexGrow:0,flexShrink:1,flexBasis:"auto"},"#os-dummy-scrollbar-size":{position:"fixed",opacity:0,visibility:"hidden",overflow:"scroll",height:500,width:500},"#os-dummy-scrollbar-size>div":{width:"200%",height:"200%",margin:10},"#os-dummy-scrollbar-size, .os-viewport":{},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size, .os-viewport-native-scrollbars-invisible.os-viewport":{scrollbarWidth:"none!important"},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner":{display:"none!important",width:"0!important",height:"0!important",visibility:"hidden!important",background:"0 0!important"},".os-content-glue":{boxSizing:"inherit",maxHeight:"100%",maxWidth:"100%",width:"100%",pointerEvents:"none"},".os-padding":{boxSizing:"inherit",direction:"inherit",position:"absolute",overflow:"visible",padding:0,margin:0,left:0,top:0,bottom:0,right:0,width:"auto!important",height:"auto!important",zIndex:1},".os-host-overflow>.os-padding":{overflow:"hidden"},".os-viewport":{direction:"inherit!important",boxSizing:"inherit!important",resize:"none!important",outline:"0!important",position:"absolute",overflow:"hidden",top:0,left:0,bottom:0,right:0,padding:0,margin:0},".os-content-arrange":{position:"absolute",zIndex:-1,minHeight:1,minWidth:1,pointerEvents:"none"},".os-content":{direction:"inherit",boxSizing:"border-box!important",position:"relative",display:"block",height:"100%",width:"100%",visibility:"visible"},".os-content:before, .os-content:after":{content:"''",display:"table",width:0,height:0,lineHeight:0,fontSize:0},".os-content>.os-textarea":{boxSizing:"border-box!important",direction:"inherit!important",background:"0 0!important",outline:"0 transparent!important",overflow:"hidden!important",position:"absolute!important",display:"block!important",top:"0!important",left:"0!important",margin:"0!important",borderRadius:"0!important",float:"none!important",filter:"none!important",border:"0!important",resize:"none!important",transform:"none!important",maxWidth:"none!important",maxHeight:"none!important",boxShadow:"none!important",perspective:"none!important",opacity:"1!important",zIndex:"1!important",clip:"auto!important",verticalAlign:"baseline!important",padding:0},".os-host-rtl>.os-padding>.os-viewport>.os-content>.os-textarea":{right:"0!important"},".os-content>.os-textarea-cover":{zIndex:-1,pointerEvents:"none"},".os-content>.os-textarea[wrap=off]":{whiteSpace:"pre!important",margin:"0!important"},".os-text-inherit":{fontFamily:"inherit",fontSize:"inherit",fontWeight:"inherit",fontStyle:"inherit",fontVariant:"inherit",textTransform:"inherit",textDecoration:"inherit",textIndent:"inherit",textAlign:"inherit",textShadow:"inherit",textOverflow:"inherit",letterSpacing:"inherit",wordSpacing:"inherit",lineHeight:"inherit",unicodeBidi:"inherit",direction:"inherit",color:"inherit",cursor:"text"},".os-resize-observer, .os-resize-observer-host":{boxSizing:"inherit",display:"block",opacity:0,position:"absolute",top:0,left:0,height:"100%",width:"100%",overflow:"hidden",pointerEvents:"none",zIndex:-1},".os-resize-observer-host":{padding:"inherit",border:"inherit",borderColor:"transparent",borderStyle:"solid",boxSizing:"border-box"},".os-resize-observer-host:after":{content:"''"},".os-resize-observer-host>.os-resize-observer, .os-resize-observer-host:after":{height:"200%",width:"200%",padding:"inherit",border:"inherit",margin:0,display:"block",boxSizing:"content-box"},".os-resize-observer.observed, object.os-resize-observer":{boxSizing:"border-box!important"},".os-size-auto-observer":{boxSizing:"inherit!important",height:"100%",width:"inherit",maxWidth:1,position:"relative",float:"left",maxHeight:1,overflow:"hidden",zIndex:-1,padding:0,margin:0,pointerEvents:"none",flexGrow:"inherit",flexShrink:0,flexBasis:0},".os-size-auto-observer>.os-resize-observer":{width:"1000%",height:"1000%",minHeight:1,minWidth:1},".os-resize-observer-item":{position:"absolute",top:0,right:0,bottom:0,left:0,overflow:"hidden",zIndex:-1,opacity:0,direction:"ltr!important",flex:"none!important"},".os-resize-observer-item-final":{position:"absolute",left:0,top:0,transition:"none!important",flex:"none!important"},".os-resize-observer":{animationDuration:".001s",animationName:"".concat(hsResizeObserverDummyAnimation)},".os-host-transition>.os-scrollbar, .os-host-transition>.os-scrollbar-corner":{transition:"opacity .3s,visibility .3s,top .3s,right .3s,bottom .3s,left .3s"},"html.os-html>.os-host>.os-scrollbar":{position:"absolute",zIndex:999999},".os-scrollbar, .os-scrollbar-corner":{position:"absolute",opacity:1,zIndex:1},".os-scrollbar-corner":{bottom:0,right:0,height:10,width:10,backgroundColor:"transparent"},".os-scrollbar":{pointerEvents:"none",padding:2,boxSizing:"border-box",background:0},".os-scrollbar-track":{pointerEvents:"auto",position:"relative",height:"100%",width:"100%",padding:"0!important",border:"0!important"},".os-scrollbar-handle":{pointerEvents:"auto",position:"absolute",width:"100%",height:"100%"},".os-scrollbar-handle-off, .os-scrollbar-track-off":{pointerEvents:"none"},".os-scrollbar.os-scrollbar-unusable, .os-scrollbar.os-scrollbar-unusable *":{pointerEvents:"none!important"},".os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle":{opacity:"0!important"},".os-scrollbar-horizontal":{bottom:0,left:0,right:10,height:10},".os-scrollbar-vertical":{top:0,right:0,bottom:10,width:10},".os-host-rtl>.os-scrollbar-horizontal":{right:0},".os-host-rtl>.os-scrollbar-vertical":{right:"auto",left:0},".os-host-rtl>.os-scrollbar-corner":{right:"auto",left:0},".os-scrollbar-auto-hidden, .os-padding+.os-scrollbar-corner, .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-corner, .os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal, .os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-corner, .os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical+.os-scrollbar-corner, .os-scrollbar-horizontal+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner":{opacity:0,visibility:"hidden",pointerEvents:"none"},".os-scrollbar-corner-resize-both":{cursor:"nwse-resize"},".os-host-rtl>.os-scrollbar-corner-resize-both":{cursor:"nesw-resize"},".os-scrollbar-corner-resize-horizontal":{cursor:"ew-resize"},".os-scrollbar-corner-resize-vertical":{cursor:"ns-resize"},".os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize":{cursor:"default"},".os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical":{top:0,bottom:0},".os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal, .os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal":{right:0,left:0},".os-scrollbar:hover, .os-scrollbar-corner.os-scrollbar-corner-resize":{opacity:"1!important",visibility:"visible!important"},".os-scrollbar-corner.os-scrollbar-corner-resize":{backgroundImage:"linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 100%)",backgroundRepeat:"no-repeat",backgroundPosition:"100% 100%",pointerEvents:"auto!important"},".os-host-rtl>.os-scrollbar-corner.os-scrollbar-corner-resize":{transform:"scale(-1,1)"},".os-host-overflow":{overflow:"hidden!important"},".os-theme-dark.os-host-rtl>.os-scrollbar-horizontal":{left:10,right:0},".os-scrollbar.os-scrollbar-unusable":{background:0},".os-scrollbar>.os-scrollbar-track":{background:0},".os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle":{minWidth:30},".os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle":{minHeight:30},".os-theme-dark.os-host-transition>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{transition:"background-color .3s"},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle, .os-scrollbar>.os-scrollbar-track":{borderRadius:10},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{background:theme.color.mediumdark,opacity:.5},".os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle":{opacity:.6},".os-scrollbar-horizontal .os-scrollbar-handle:before, .os-scrollbar-vertical .os-scrollbar-handle:before":{content:"''",position:"absolute",left:0,right:0,top:0,bottom:0,display:"block"},".os-theme-dark.os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-theme-dark.os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical .os-scrollbar-handle:before":{display:"none"},".os-scrollbar-horizontal .os-scrollbar-handle:before":{top:-6,bottom:-2},".os-scrollbar-vertical .os-scrollbar-handle:before":{left:-6,right:-2},".os-host-rtl.os-scrollbar-vertical .os-scrollbar-handle:before":{right:-6,left:-2}}},GlobalScrollAreaStyles=function GlobalScrollAreaStyles(){return react__WEBPACK_IMPORTED_MODULE_2__.createElement(_storybook_theming__WEBPACK_IMPORTED_MODULE_3__.xB,{styles:getScrollAreaStyles})}}}]);