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

package/docs/api-report.md

@@ -17,6 +17,7 @@ import { HTMLDirective } from '@microsoft/fast-element';
 import { Orientation } from '@microsoft/fast-web-utilities';
 import type { SyntheticViewTemplate } from '@microsoft/fast-element';
 import type { Theme } from '@fluentui/tokens';
+import { ViewTemplate } from '@microsoft/fast-element';
 
 // @public
 export class Accordion extends FASTElement {
@@ -625,6 +626,18 @@ export const colorBrandBackground = "var(--colorBrandBackground)";
 // @public (undocumented)
 export const colorBrandBackground2 = "var(--colorBrandBackground2)";
 
+// @public (undocumented)
+export const colorBrandBackground2Hover = "var(--colorBrandBackground2Hover)";
+
+// @public (undocumented)
+export const colorBrandBackground2Pressed = "var(--colorBrandBackground2Pressed)";
+
+// @public (undocumented)
+export const colorBrandBackground3Static = "var(--colorBrandBackground3Static)";
+
+// @public (undocumented)
+export const colorBrandBackground4Static = "var(--colorBrandBackground4Static)";
+
 // @public (undocumented)
 export const colorBrandBackgroundHover = "var(--colorBrandBackgroundHover)";
 
@@ -655,6 +668,12 @@ export const colorBrandForeground1 = "var(--colorBrandForeground1)";
 // @public (undocumented)
 export const colorBrandForeground2 = "var(--colorBrandForeground2)";
 
+// @public (undocumented)
+export const colorBrandForeground2Hover = "var(--colorBrandForeground2Hover)";
+
+// @public (undocumented)
+export const colorBrandForeground2Pressed = "var(--colorBrandForeground2Pressed)";
+
 // @public (undocumented)
 export const colorBrandForegroundInverted = "var(--colorBrandForegroundInverted)";
 
@@ -700,6 +719,15 @@ export const colorBrandStroke1 = "var(--colorBrandStroke1)";
 // @public (undocumented)
 export const colorBrandStroke2 = "var(--colorBrandStroke2)";
 
+// @public (undocumented)
+export const colorBrandStroke2Contrast = "var(--colorBrandStroke2Contrast)";
+
+// @public (undocumented)
+export const colorBrandStroke2Hover = "var(--colorBrandStroke2Hover)";
+
+// @public (undocumented)
+export const colorBrandStroke2Pressed = "var(--colorBrandStroke2Pressed)";
+
 // @public (undocumented)
 export const colorCompoundBrandBackground = "var(--colorCompoundBrandBackground)";
 
@@ -790,6 +818,12 @@ export const colorNeutralBackground5Selected = "var(--colorNeutralBackground5Sel
 // @public (undocumented)
 export const colorNeutralBackground6 = "var(--colorNeutralBackground6)";
 
+// @public (undocumented)
+export const colorNeutralBackgroundAlpha = "var(--colorNeutralBackgroundAlpha)";
+
+// @public (undocumented)
+export const colorNeutralBackgroundAlpha2 = "var(--colorNeutralBackgroundAlpha2)";
+
 // @public (undocumented)
 export const colorNeutralBackgroundDisabled = "var(--colorNeutralBackgroundDisabled)";
 
@@ -802,6 +836,21 @@ export const colorNeutralBackgroundInvertedDisabled = "var(--colorNeutralBackgro
 // @public (undocumented)
 export const colorNeutralBackgroundStatic = "var(--colorNeutralBackgroundStatic)";
 
+// @public (undocumented)
+export const colorNeutralCardBackground = "var(--colorNeutralCardBackground)";
+
+// @public (undocumented)
+export const colorNeutralCardBackgroundDisabled = "var(--colorNeutralCardBackgroundDisabled)";
+
+// @public (undocumented)
+export const colorNeutralCardBackgroundHover = "var(--colorNeutralCardBackgroundHover)";
+
+// @public (undocumented)
+export const colorNeutralCardBackgroundPressed = "var(--colorNeutralCardBackgroundPressed)";
+
+// @public (undocumented)
+export const colorNeutralCardBackgroundSelected = "var(--colorNeutralCardBackgroundSelected)";
+
 // @public (undocumented)
 export const colorNeutralForeground1 = "var(--colorNeutralForeground1)";
 
@@ -973,6 +1022,12 @@ export const colorNeutralStrokeAccessiblePressed = "var(--colorNeutralStrokeAcce
 // @public (undocumented)
 export const colorNeutralStrokeAccessibleSelected = "var(--colorNeutralStrokeAccessibleSelected)";
 
+// @public (undocumented)
+export const colorNeutralStrokeAlpha = "var(--colorNeutralStrokeAlpha)";
+
+// @public (undocumented)
+export const colorNeutralStrokeAlpha2 = "var(--colorNeutralStrokeAlpha2)";
+
 // @public (undocumented)
 export const colorNeutralStrokeDisabled = "var(--colorNeutralStrokeDisabled)";
 
@@ -994,6 +1049,9 @@ export const colorNeutralStrokeOnBrand2Pressed = "var(--colorNeutralStrokeOnBran
 // @public (undocumented)
 export const colorNeutralStrokeOnBrand2Selected = "var(--colorNeutralStrokeOnBrand2Selected)";
 
+// @public (undocumented)
+export const colorNeutralStrokeSubtle = "var(--colorNeutralStrokeSubtle)";
+
 // @public (undocumented)
 export const colorPaletteAnchorBackground2 = "var(--colorPaletteAnchorBackground2)";
 
@@ -1447,6 +1505,102 @@ export const colorPaletteYellowForegroundInverted = "var(--colorPaletteYellowFor
 // @public (undocumented)
 export const colorScrollbarOverlay = "var(--colorScrollbarOverlay)";
 
+// @public (undocumented)
+export const colorStatusDangerBackground1 = "var(--colorStatusDangerBackground1)";
+
+// @public (undocumented)
+export const colorStatusDangerBackground2 = "var(--colorStatusDangerBackground2)";
+
+// @public (undocumented)
+export const colorStatusDangerBackground3 = "var(--colorStatusDangerBackground3)";
+
+// @public (undocumented)
+export const colorStatusDangerBackground3Hover = "var(--colorStatusDangerBackground3Hover)";
+
+// @public (undocumented)
+export const colorStatusDangerBackground3Pressed = "var(--colorStatusDangerBackground3Pressed)";
+
+// @public (undocumented)
+export const colorStatusDangerBorder1 = "var(--colorStatusDangerBorder1)";
+
+// @public (undocumented)
+export const colorStatusDangerBorder2 = "var(--colorStatusDangerBorder2)";
+
+// @public (undocumented)
+export const colorStatusDangerBorderActive = "var(--colorStatusDangerBorderActive)";
+
+// @public (undocumented)
+export const colorStatusDangerForeground1 = "var(--colorStatusDangerForeground1)";
+
+// @public (undocumented)
+export const colorStatusDangerForeground2 = "var(--colorStatusDangerForeground2)";
+
+// @public (undocumented)
+export const colorStatusDangerForeground3 = "var(--colorStatusDangerForeground3)";
+
+// @public (undocumented)
+export const colorStatusDangerForegroundInverted = "var(--colorStatusDangerForegroundInverted)";
+
+// @public (undocumented)
+export const colorStatusSuccessBackground1 = "var(--colorStatusSuccessBackground1)";
+
+// @public (undocumented)
+export const colorStatusSuccessBackground2 = "var(--colorStatusSuccessBackground2)";
+
+// @public (undocumented)
+export const colorStatusSuccessBackground3 = "var(--colorStatusSuccessBackground3)";
+
+// @public (undocumented)
+export const colorStatusSuccessBorder1 = "var(--colorStatusSuccessBorder1)";
+
+// @public (undocumented)
+export const colorStatusSuccessBorder2 = "var(--colorStatusSuccessBorder2)";
+
+// @public (undocumented)
+export const colorStatusSuccessBorderActive = "var(--colorStatusSuccessBorderActive)";
+
+// @public (undocumented)
+export const colorStatusSuccessForeground1 = "var(--colorStatusSuccessForeground1)";
+
+// @public (undocumented)
+export const colorStatusSuccessForeground2 = "var(--colorStatusSuccessForeground2)";
+
+// @public (undocumented)
+export const colorStatusSuccessForeground3 = "var(--colorStatusSuccessForeground3)";
+
+// @public (undocumented)
+export const colorStatusSuccessForegroundInverted = "var(--colorStatusSuccessForegroundInverted)";
+
+// @public (undocumented)
+export const colorStatusWarningBackground1 = "var(--colorStatusWarningBackground1)";
+
+// @public (undocumented)
+export const colorStatusWarningBackground2 = "var(--colorStatusWarningBackground2)";
+
+// @public (undocumented)
+export const colorStatusWarningBackground3 = "var(--colorStatusWarningBackground3)";
+
+// @public (undocumented)
+export const colorStatusWarningBorder1 = "var(--colorStatusWarningBorder1)";
+
+// @public (undocumented)
+export const colorStatusWarningBorder2 = "var(--colorStatusWarningBorder2)";
+
+// @public (undocumented)
+export const colorStatusWarningBorderActive = "var(--colorStatusWarningBorderActive)";
+
+// @public (undocumented)
+export const colorStatusWarningForeground1 = "var(--colorStatusWarningForeground1)";
+
+// @public (undocumented)
+export const colorStatusWarningForeground2 = "var(--colorStatusWarningForeground2)";
+
+// @public (undocumented)
+export const colorStatusWarningForeground3 = "var(--colorStatusWarningForeground3)";
+
+// @public (undocumented)
+export const colorStatusWarningForegroundInverted = "var(--colorStatusWarningForegroundInverted)";
+
 // @public (undocumented)
 export const colorStrokeFocus1 = "var(--colorStrokeFocus1)";
 
@@ -1774,6 +1928,9 @@ export const durationFast = "var(--durationFast)";
 // @public (undocumented)
 export const durationFaster = "var(--durationFaster)";
 
+// @public (undocumented)
+export const durationGentle = "var(--durationGentle)";
+
 // @public (undocumented)
 export const durationNormal = "var(--durationNormal)";
 
@@ -2320,7 +2477,7 @@ export const RadioTemplate: ElementViewTemplate<Radio>;
 //
 // @internal (undocumented)
 export const roleForMenuItem: {
-    [value in keyof typeof MenuItemRole]: typeof MenuItemRole[value];
+    [value in keyof typeof MenuItemRole]: (typeof MenuItemRole)[value];
 };
 
 // @public
@@ -2553,8 +2710,11 @@ export const spacingVerticalXXS = "var(--spacingVerticalXXS)";
 export const spacingVerticalXXXL = "var(--spacingVerticalXXXL)";
 
 // @public
-export class Spinner extends BaseProgress {
+export class Spinner extends FASTElement {
+    constructor();
     appearance?: SpinnerAppearance;
+    // @internal
+    protected elementInternals: ElementInternals;
     size?: SpinnerSize;
 }
 
@@ -2570,11 +2730,6 @@ export type SpinnerAppearance = ValuesOf<typeof SpinnerAppearance>;
 // @public (undocumented)
 export const SpinnerDefinition: FASTElementDefinition<typeof Spinner>;
 
-// @public
-export type SpinnerOptions = {
-    indeterminateIndicator?: StaticallyComposableHTML<Spinner>;
-};
-
 // @public
 export const SpinnerSize: {
     readonly tiny: "tiny";
@@ -2593,7 +2748,7 @@ export type SpinnerSize = ValuesOf<typeof SpinnerSize>;
 export const SpinnerStyles: ElementStyles;
 
 // @public (undocumented)
-export const SpinnerTemplate: ElementViewTemplate<Spinner>;
+export const SpinnerTemplate: ViewTemplate<Spinner, any>;
 
 // @public (undocumented)
 export const strokeWidthThick = "var(--strokeWidthThick)";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
-  "version": "3.0.0-beta.15",
+  "version": "3.0.0-beta.17",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -176,8 +176,7 @@
     "./dist/esm/toggle-button/define.js"
   ],
   "scripts": {
-    "tsc": "tsc",
-    "api-extractor": "api-extractor",
+    "type-check": "echo 'TODO'",
     "benchmark": "yarn clean && yarn compile:benchmark && yarn compile && node ./scripts/run-benchmarks",
     "compile": "node ./scripts/compile",
     "compile:benchmark": "rollup -c rollup.bench.js",
@@ -192,22 +191,18 @@
     "start": "yarn start-storybook -p 6006 --docs --no-manager-cache",
     "start-storybook": "node node_modules/@storybook/html/bin/index",
     "build-storybook": "node node_modules/@storybook/html/bin/build -o ./dist/storybook --docs",
-    "pretest": "yarn build-storybook --quiet",
-    "test": "npx playwright test",
+    "e2e": "playwright test",
     "test:dev": "playwright test"
   },
   "devDependencies": {
     "@types/web": "^0.0.142",
-    "@microsoft/api-extractor": "7.31.2",
     "@storybook/html": "6.5.15",
-    "@tensile-perf/web-components": "~0.1.13",
-    "rimraf": "^3.0.2",
-    "typescript": "4.7.4"
+    "@tensile-perf/web-components": "~0.1.13"
   },
   "dependencies": {
     "@microsoft/fast-element": "2.0.0-beta.26",
     "@microsoft/fast-web-utilities": "^6.0.0",
-    "@fluentui/tokens": "1.0.0-alpha.2",
+    "@fluentui/tokens": "1.0.0-alpha.16",
     "tabbable": "^6.2.0",
     "tslib": "^2.1.0"
   },

package/project.json

@@ -0,0 +1,6 @@
+{
+  "name": "@fluentui/web-components",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "implicitDependencies": []
+}

package/dist/storybook/108.78b731e00015540915a8.manager.bundle.js

@@ -1 +0,0 @@
-"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})}}}]);

package/dist/storybook/108.b31ec3a1.iframe.bundle.js

@@ -1 +0,0 @@
-"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})}}}]);