@fabric-msft/fabric-web 7.2.0 → 7.4.0

package/esm/components/rating-display/rating-display.definition.js

@@ -1,6 +1,7 @@
 import { RatingDisplay } from './rating-display.js';
-import { RatingDisplayStyles, RatingDisplayTemplate } from '@fluentui/web-components';
 import { DesignSystem } from '../design-system.js';
+import { RatingDisplayTemplate } from '@fluentui/web-components';
+import { styles } from './rating-display.styles.js';
 
 /**
  * @public
@@ -10,7 +11,7 @@ import { DesignSystem } from '../design-system.js';
 const definition = RatingDisplay.compose({
   name: `${DesignSystem.prefix}-rating-display`,
   template: RatingDisplayTemplate,
-  styles: RatingDisplayStyles,
+  styles,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }

package/esm/components/rating-display/rating-display.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating-display.definition.js","sourceRoot":"","sources":["../../../../src/components/rating-display/rating-display.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EACL,mBAAmB,EACnB,qBAAqB,EACtB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC;IAC9C,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,iBAAiB;IAC7C,QAAQ,EAAE,qBAAqB;IAC/B,MAAM,EAAE,mBAAmB;IAC3B,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}
+{"version":3,"file":"rating-display.definition.js","sourceRoot":"","sources":["../../../../src/components/rating-display/rating-display.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEpD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC;IAC9C,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,iBAAiB;IAC7C,QAAQ,EAAE,qBAAqB;IAC/B,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/esm/components/rating-display/rating-display.styles.js

@@ -0,0 +1,9 @@
+import { RatingDisplayStyles } from '@fluentui/web-components';
+import { css } from '@microsoft/fast-element';
+
+const styles = css`
+  ${RatingDisplayStyles}
+
+  :host{white-space:normal}`;
+
+export { styles };

package/esm/components/rating-display/rating-display.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating-display.styles.js","sourceRoot":"","sources":["../../../../src/components/rating-display/rating-display.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,mBAAmB;;;;;CAKtB,CAAC"}

package/esm/components/search-box/search-box.styles.js

@@ -6,6 +6,6 @@ import { sizeHorizontalXL } from '@fabric-msft/theme';
 const styles = css`
   ${styles$1}
 
-  .root{padding-inline:${spacingHorizontalS};padding-inline-end:0px}:host([control-size="small"]) .root{padding-inline-end:0px}:host([control-size="large"]) .root{padding-inline:${spacingHorizontalMNudge};padding-inline-end:0px}.search-icon{display:flex;box-sizing:border-box;color:${colorNeutralForeground3}}fabric-button.clear-button{min-width:${sizeHorizontalXL};min-height:${sizeHorizontalXL};margin-inline-end:${spacingHorizontalXS};padding:0px 2px;display:none}`;
+  :host{white-space:normal}.root{padding-inline:${spacingHorizontalS};padding-inline-end:0px}:host([control-size="small"]) .root{padding-inline-end:0px}:host([control-size="large"]) .root{padding-inline:${spacingHorizontalMNudge};padding-inline-end:0px}.search-icon{display:flex;box-sizing:border-box;color:${colorNeutralForeground3}}fabric-button.clear-button{min-width:${sizeHorizontalXL};min-height:${sizeHorizontalXL};margin-inline-end:${spacingHorizontalXS};padding:0px 2px;display:none}`;
 
 export { styles };

package/esm/components/search-box/search-box.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-box.styles.js","sourceRoot":"","sources":["../../../../src/components/search-box/search-box.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,eAAe;;;sBAGG,kBAAkB;;;;;;;;;sBASlB,uBAAuB;;;;;;;aAOhC,uBAAuB;;;;iBAInB,gBAAgB;kBACf,gBAAgB;yBACT,mBAAmB;;;;CAI3C,CAAC"}
+{"version":3,"file":"search-box.styles.js","sourceRoot":"","sources":["../../../../src/components/search-box/search-box.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,eAAe;;;;;;;sBAOG,kBAAkB;;;;;;;;;sBASlB,uBAAuB;;;;;;;aAOhC,uBAAuB;;;;iBAInB,gBAAgB;kBACf,gBAAgB;yBACT,mBAAmB;;;;CAI3C,CAAC"}

package/esm/components/simple-table/simple-table.styles.js

@@ -1,5 +1,6 @@
 import { fontFamilyBase, fontSizeBase300, lineHeightBase300, colorNeutralForeground1, strokeWidthThin, colorNeutralStroke2, fontWeightSemibold, spacingVerticalM, spacingHorizontalS } from '@fluentui/web-components';
 import { css } from '@microsoft/fast-element';
+import '../../util/carousel-controller.js';
 import '../../util/debug.js';
 import '@microsoft/fast-web-utilities';
 import '../../util/support.js';
@@ -8,7 +9,7 @@ import { forcedColorsStylesheetBehavior } from '../../util/match-media-styleshee
 import '../../util/platform.js';
 
 const styles = css`
-  fabric-simple-table{display:block;font-family:${fontFamilyBase}}.microsoft-fabric-ux-fabric-simple-table{border-collapse:collapse;width:100%;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.microsoft-fabric-ux-fabric-simple-table tr{box-sizing:border-box;color:${colorNeutralForeground1}}.microsoft-fabric-ux-fabric-simple-table tbody tr{border-block-end:${strokeWidthThin} solid ${colorNeutralStroke2}}.microsoft-fabric-ux-fabric-simple-table th{color:${colorNeutralForeground1};text-align:start;font-weight:${fontWeightSemibold};vertical-align:middle;padding-block:${spacingVerticalM};padding-inline:${spacingHorizontalS}}.microsoft-fabric-ux-fabric-simple-table td{padding-block:${spacingVerticalM};padding-inline:${spacingHorizontalS};vertical-align:middle;color:${colorNeutralForeground1}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :host{white-space:normal}fabric-simple-table{display:block;font-family:${fontFamilyBase}}.microsoft-fabric-ux-fabric-simple-table{border-collapse:collapse;width:100%;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.microsoft-fabric-ux-fabric-simple-table tr{box-sizing:border-box;color:${colorNeutralForeground1}}.microsoft-fabric-ux-fabric-simple-table tbody tr{border-block-end:${strokeWidthThin} solid ${colorNeutralStroke2}}.microsoft-fabric-ux-fabric-simple-table th{color:${colorNeutralForeground1};text-align:start;font-weight:${fontWeightSemibold};vertical-align:middle;padding-block:${spacingVerticalM};padding-inline:${spacingHorizontalS}}.microsoft-fabric-ux-fabric-simple-table td{padding-block:${spacingVerticalM};padding-inline:${spacingHorizontalS};vertical-align:middle;color:${colorNeutralForeground1}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     .microsoft-fabric-ux-fabric-simple-table{color:CanvasText;background-color:Canvas}.microsoft-fabric-ux-fabric-simple-table tr{border-color:CanvasText}.microsoft-fabric-ux-fabric-simple-table th{color:CanvasText;border-color:CanvasText}.microsoft-fabric-ux-fabric-simple-table td{color:CanvasText}`));
 
 export { styles };

package/esm/components/simple-table/simple-table.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"simple-table.styles.js","sourceRoot":"","sources":["../../../../src/components/simple-table/simple-table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,8BAA8B,EAAE,MAAM,qBAAqB,CAAC;AAErE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;mBAGN,cAAc;;;;;;iBAMhB,eAAe;mBACb,iBAAiB;;;;;aAKvB,uBAAuB;;;;wBAIZ,eAAe,UAAU,mBAAmB;;;;aAIvD,uBAAuB;;mBAEjB,kBAAkB;;qBAEhB,gBAAgB;sBACf,kBAAkB;;;;qBAInB,gBAAgB;sBACf,kBAAkB;;aAE3B,uBAAuB;;CAEnC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;GAkBjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"simple-table.styles.js","sourceRoot":"","sources":["../../../../src/components/simple-table/simple-table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,8BAA8B,EAAE,MAAM,qBAAqB,CAAC;AAErE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;mBAON,cAAc;;;;;;iBAMhB,eAAe;mBACb,iBAAiB;;;;;aAKvB,uBAAuB;;;;wBAIZ,eAAe,UAAU,mBAAmB;;;;aAIvD,uBAAuB;;mBAEjB,kBAAkB;;qBAEhB,gBAAgB;sBACf,kBAAkB;;;;qBAInB,gBAAgB;sBACf,kBAAkB;;aAE3B,uBAAuB;;CAEnC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;GAkBjC,CAAC,CACH,CAAC"}

package/esm/components/slider/slider.styles.js

@@ -11,7 +11,7 @@ import { sizeVerticalXL, sizeVerticalXXXL, sizeVerticalL, sizeVerticalXXL } from
  * @public
  */
 const styles = css`
-  :host([hidden]){display:none}:host{--thumb-size:${sizeVerticalXL};--track-margin-inline:calc(var(--thumb-size) / 2);--track-size:4px;--track-overhang:calc(var(--track-size) / -2);--rail-color:${colorCompoundBrandBackground};--track-color:${colorNeutralStrokeAccessible};--slider-direction:90deg;--border-radius:${borderRadiusMedium};--step-marker-inset:var(--track-overhang) -1px;display:inline-flex;align-items:center;gap:${spacingHorizontalS};position:relative;box-sizing:border-box;outline:none;user-select:none;touch-action:none;min-width:calc(${sizeVerticalXL} * 6);min-height:${sizeVerticalXXXL}}:host(:hover){--rail-color:${colorCompoundBrandBackgroundHover}}:host(:active){--rail-color:${colorCompoundBrandBackgroundPressed}}:host(:disabled){--rail-color:${colorNeutralForegroundDisabled};--track-color:${colorNeutralBackgroundDisabled}}:host(:not(:disabled)){cursor:pointer}:host(:dir(rtl)){--slider-direction:-90deg}:host([size="small"]){--thumb-size:${sizeVerticalL};--track-overhang:-1px;--track-size:2px;--border-radius:${borderRadiusSmall};min-height:${sizeVerticalXXL}}:host([orientation="vertical"]){--slider-direction:0deg;--step-marker-inset:-1px var(--track-overhang);flex-direction:column;min-height:unset;min-width:${sizeVerticalXXXL}}:host(:not([slot="input"]):focus-visible){box-shadow:0 0 0 2pt ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}.root{display:inline-grid;position:relative;align-items:center;justify-content:center;flex:1 1 auto;min-width:calc(${sizeVerticalXL} * 6);min-height:${sizeVerticalXXXL};grid-template-rows:1fr var(--thumb-size) 1fr;grid-template-columns:var(--track-margin-inline) 1fr
+  :host([hidden]){display:none}:host{--thumb-size:${sizeVerticalXL};--track-margin-inline:calc(var(--thumb-size) / 2);--track-size:4px;--track-overhang:calc(var(--track-size) / -2);--rail-color:${colorCompoundBrandBackground};--track-color:${colorNeutralStrokeAccessible};--slider-direction:90deg;--border-radius:${borderRadiusMedium};--step-marker-inset:var(--track-overhang) -1px;white-space:normal;display:inline-flex;align-items:center;gap:${spacingHorizontalS};position:relative;box-sizing:border-box;outline:none;user-select:none;touch-action:none;min-width:calc(${sizeVerticalXL} * 6);min-height:${sizeVerticalXXXL}}:host(:hover){--rail-color:${colorCompoundBrandBackgroundHover}}:host(:active){--rail-color:${colorCompoundBrandBackgroundPressed}}:host(:disabled){--rail-color:${colorNeutralForegroundDisabled};--track-color:${colorNeutralBackgroundDisabled}}:host(:not(:disabled)){cursor:pointer}:host(:dir(rtl)){--slider-direction:-90deg}:host([size="small"]){--thumb-size:${sizeVerticalL};--track-overhang:-1px;--track-size:2px;--border-radius:${borderRadiusSmall};min-height:${sizeVerticalXXL}}:host([orientation="vertical"]){--slider-direction:0deg;--step-marker-inset:-1px var(--track-overhang);flex-direction:column;min-height:unset;min-width:${sizeVerticalXXXL}}:host(:not([slot="input"]):focus-visible){box-shadow:0 0 0 2pt ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}.root{display:inline-grid;position:relative;align-items:center;justify-content:center;flex:1 1 auto;min-width:calc(${sizeVerticalXL} * 6);min-height:${sizeVerticalXXXL};grid-template-rows:1fr var(--thumb-size) 1fr;grid-template-columns:var(--track-margin-inline) 1fr
       var(--track-margin-inline)}:host([orientation="vertical"]) .root{min-height:calc(${sizeVerticalXL} * 6);min-width:${sizeVerticalXXXL};grid-template-rows:var(--track-margin-inline) 1fr
       var(--track-margin-inline);grid-template-columns:1fr var(--thumb-size) 1fr;justify-items:center;flex:1 1 auto;width:unset}:host([size="small"]) .root{min-height:${sizeVerticalXXL}}.root::after{background-image:linear-gradient(
       var(--slider-direction),var(--rail-color) 0%,var(--rail-color) 50%,var(--track-color) 50.1%,var(--track-color) 100%

package/esm/components/slider/slider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.styles.js","sourceRoot":"","sources":["../../../../src/components/slider/slider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,uBAAuB,EACvB,mBAAmB,EACnB,4BAA4B,EAC5B,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,eAAe,EACf,8BAA8B,EAC9B,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,aAAa,EACb,cAAc,EACd,eAAe,EACf,gBAAgB,EACjB,MAAM,oBAAoB,CAAC;AAE5B;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;oBAML,cAAc;;;;oBAId,4BAA4B;qBAC3B,4BAA4B;;uBAE1B,kBAAkB;;;;;WAK9B,kBAAkB;;;;;;sBAMP,cAAc;kBAClB,gBAAgB;;;;oBAId,iCAAiC;;;;oBAIjC,mCAAmC;;;;oBAInC,8BAA8B;qBAC7B,8BAA8B;;;;;;;;;;;;oBAY/B,aAAa;;;uBAGV,iBAAiB;kBACtB,eAAe;;;;;;;;iBAQhB,gBAAgB;;;;4BAIL,iBAAiB;yBACpB,iBAAiB;;;;;;;;;;;sBAWpB,cAAc;kBAClB,gBAAgB;;;;;;;;uBAQX,cAAc;iBACpB,gBAAgB;;;;;;;;;;;kBAWf,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAoEzB,0BAA0B;QAC1B,0BAA0B;QAC1B,uBAAuB;QACvB,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAiCV,oBAAoB;sDACa,uBAAuB;;mDAE1B,mBAAmB;;;;;;;;;;;;;iBAarD,eAAe;mBACb,iBAAiB;aACvB,uBAAuB;;;;CAInC,CAAC,aAAa,CACb,8BAA8B,CAC5B,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBF,CACF,CACF,CAAC"}
+{"version":3,"file":"slider.styles.js","sourceRoot":"","sources":["../../../../src/components/slider/slider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,uBAAuB,EACvB,mBAAmB,EACnB,4BAA4B,EAC5B,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,eAAe,EACf,8BAA8B,EAC9B,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,aAAa,EACb,cAAc,EACd,eAAe,EACf,gBAAgB,EACjB,MAAM,oBAAoB,CAAC;AAE5B;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;oBAML,cAAc;;;;oBAId,4BAA4B;qBAC3B,4BAA4B;;uBAE1B,kBAAkB;;;;;;WAM9B,kBAAkB;;;;;;sBAMP,cAAc;kBAClB,gBAAgB;;;;oBAId,iCAAiC;;;;oBAIjC,mCAAmC;;;;oBAInC,8BAA8B;qBAC7B,8BAA8B;;;;;;;;;;;;oBAY/B,aAAa;;;uBAGV,iBAAiB;kBACtB,eAAe;;;;;;;;iBAQhB,gBAAgB;;;;4BAIL,iBAAiB;yBACpB,iBAAiB;;;;;;;;;;;sBAWpB,cAAc;kBAClB,gBAAgB;;;;;;;;uBAQX,cAAc;iBACpB,gBAAgB;;;;;;;;;;;kBAWf,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAoEzB,0BAA0B;QAC1B,0BAA0B;QAC1B,uBAAuB;QACvB,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAiCV,oBAAoB;sDACa,uBAAuB;;mDAE1B,mBAAmB;;;;;;;;;;;;;iBAarD,eAAe;mBACb,iBAAiB;aACvB,uBAAuB;;;;CAInC,CAAC,aAAa,CACb,8BAA8B,CAC5B,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBF,CACF,CACF,CAAC"}

package/esm/components/spin-button/spin-button.styles.js

@@ -10,6 +10,6 @@ import { sizeVerticalXXXL, sizeVerticalXXL } from '@fabric-msft/theme';
 const styles = css`
   ${display("block")}
 
-  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px;}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{align-items:center;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};box-sizing:border-box;height:${sizeVerticalXXXL};display:inline-flex;flex-direction:row;gap:${spacingHorizontalXXS};padding:0 0 0 ${spacingHorizontalMNudge};position:relative;width:100%}.root::after{box-sizing:border-box;content:"";position:absolute;inset-inline-start:-1px;bottom:0px;inset-inline-end:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{flex:1;min-width:0;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};line-height:${lineHeightBase300};border:none;padding:0;text-align:start}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot="start"]),:host ::slotted([slot="end"]){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3}}:host ::slotted([slot="start"]){padding-inline-end:${spacingHorizontalXXS}}:host ::slotted([slot="end"]){padding-inline-start:${spacingHorizontalXXS}}.buttons{display:flex;flex-direction:column;height:100%;flex-shrink:0}.increment-button,.decrement-button{display:flex;flex-direction:column;align-items:center;justify-content:center;border:none;background:${colorTransparentBackground};color:${colorNeutralForeground3};cursor:pointer;padding:0 ${spacingHorizontalSNudge};flex:1;min-height:0;box-sizing:border-box}.increment-button{justify-content:flex-end;border-start-end-radius:${borderRadiusMedium}}.decrement-button{justify-content:flex-start;border-end-end-radius:${borderRadiusMedium}}.increment-button:hover,.decrement-button:hover{background:${colorNeutralBackground3}}.increment-button:active,.increment-button.pressed,.decrement-button:active,.decrement-button.pressed{color:${colorNeutralForeground1};background:${colorNeutralBackground3Pressed}}.increment-button:disabled,.decrement-button:disabled{color:${colorNeutralForegroundDisabled};cursor:not-allowed;background:${colorTransparentBackground}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root::after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host(:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control,:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot="start"]),:host([disabled]) ::slotted([slot="end"]){color:${colorNeutralForegroundDisabled}}:host([control-size="small"]) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host([control-size="small"]) .root{height:${sizeVerticalXXL};gap:${spacingHorizontalXXS};padding:0 0 0 ${spacingHorizontalSNudge}}.root.error,:host(:hover) .root.error,:host(:active) .root.error,:host(:focus-within) .root.error{border:${strokeWidthThin} solid ${colorStatusDangerBorder2}}:host(:has(.control:user-invalid)) .root{border:${strokeWidthThin} solid ${colorStatusDangerBorder2}}:host([appearance="underline"]) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host([appearance="underline"]:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host([appearance="underline"]:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance="underline"]:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance="underline"][disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host([appearance="filled-lighter"]) .root,:host([appearance="filled-darker"]) .root{border:${strokeWidthThin} solid ${colorTransparentStroke}}:host([appearance="filled-lighter"]) .root{background:${colorNeutralBackground1}}:host([appearance="filled-darker"]) .root{background:${colorNeutralBackground3}}:host([appearance="filled-lighter"]:hover) .root,:host([appearance="filled-darker"]:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host([appearance="filled-lighter"]:active) .root,:host([appearance="filled-darker"]:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
+  :host{white-space:normal;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px;}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{align-items:center;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};box-sizing:border-box;height:${sizeVerticalXXXL};display:inline-flex;flex-direction:row;gap:${spacingHorizontalXXS};padding:0 0 0 ${spacingHorizontalMNudge};position:relative;width:100%}.root::after{box-sizing:border-box;content:"";position:absolute;inset-inline-start:-1px;bottom:0px;inset-inline-end:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{flex:1;min-width:0;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};line-height:${lineHeightBase300};border:none;padding:0;text-align:start}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot="start"]),:host ::slotted([slot="end"]){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3}}:host ::slotted([slot="start"]){padding-inline-end:${spacingHorizontalXXS}}:host ::slotted([slot="end"]){padding-inline-start:${spacingHorizontalXXS}}.buttons{display:flex;flex-direction:column;height:100%;flex-shrink:0}.increment-button,.decrement-button{display:flex;flex-direction:column;align-items:center;justify-content:center;border:none;background:${colorTransparentBackground};color:${colorNeutralForeground3};cursor:pointer;padding:0 ${spacingHorizontalSNudge};flex:1;min-height:0;box-sizing:border-box}.increment-button{justify-content:flex-end;border-start-end-radius:${borderRadiusMedium}}.decrement-button{justify-content:flex-start;border-end-end-radius:${borderRadiusMedium}}.increment-button:hover,.decrement-button:hover{background:${colorNeutralBackground3}}.increment-button:active,.increment-button.pressed,.decrement-button:active,.decrement-button.pressed{color:${colorNeutralForeground1};background:${colorNeutralBackground3Pressed}}.increment-button:disabled,.decrement-button:disabled{color:${colorNeutralForegroundDisabled};cursor:not-allowed;background:${colorTransparentBackground}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root::after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host(:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control,:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot="start"]),:host([disabled]) ::slotted([slot="end"]){color:${colorNeutralForegroundDisabled}}:host([control-size="small"]) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host([control-size="small"]) .root{height:${sizeVerticalXXL};gap:${spacingHorizontalXXS};padding:0 0 0 ${spacingHorizontalSNudge}}.root.error,:host(:hover) .root.error,:host(:active) .root.error,:host(:focus-within) .root.error{border:${strokeWidthThin} solid ${colorStatusDangerBorder2}}:host(:has(.control:user-invalid)) .root{border:${strokeWidthThin} solid ${colorStatusDangerBorder2}}:host([appearance="underline"]) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host([appearance="underline"]:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host([appearance="underline"]:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance="underline"]:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance="underline"][disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host([appearance="filled-lighter"]) .root,:host([appearance="filled-darker"]) .root{border:${strokeWidthThin} solid ${colorTransparentStroke}}:host([appearance="filled-lighter"]) .root{background:${colorNeutralBackground1}}:host([appearance="filled-darker"]) .root{background:${colorNeutralBackground3}}:host([appearance="filled-lighter"]:hover) .root,:host([appearance="filled-darker"]:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host([appearance="filled-lighter"]:active) .root,:host([appearance="filled-darker"]:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
 
 export { styles };

package/esm/components/spin-button/spin-button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"spin-button.styles.js","sourceRoot":"","sources":["../../../../src/components/spin-button/spin-button.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,EACf,OAAO,EACR,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEvE;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;IACpC,OAAO,CAAC,OAAO,CAAC;;;mBAGD,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;aAMvB,uBAAuB;sBACd,iBAAiB;;0BAEb,mBAAmB;;;;;;;;;;wBAUrB,uBAAuB;cACjC,eAAe,UAAU,mBAAmB;2BAC/B,4BAA4B;qBAClC,kBAAkB;;cAEzB,gBAAgB;;;WAGnB,oBAAoB;qBACV,uBAAuB;;;;;;;;;;;;uBAYrB,kBAAkB;yBAChB,kBAAkB,IAAI,kBAAkB;+BAClC,wBAAwB;;;;2BAI5B,iBAAiB;wBACpB,kBAAkB;;;;;;;;aAQ7B,uBAAuB;qBACf,kBAAkB;kBACrB,0BAA0B;mBACzB,cAAc;mBACd,iBAAiB;iBACnB,eAAe;mBACb,iBAAiB;;;;;;;;;;;;aAYvB,uBAAuB;;;;;;;;aAQvB,uBAAuB;;;;0BAIV,oBAAoB;;;;4BAIlB,oBAAoB;;;;;;;;;;;;;;;;;kBAiB9B,0BAA0B;aAC/B,uBAAuB;;iBAEnB,uBAAuB;;;;;;;;+BAQT,kBAAkB;;;;;6BAKpB,kBAAkB;;;;;kBAK7B,uBAAuB;;;;;;;aAO5B,uBAAuB;kBAClB,8BAA8B;;;;;aAKnC,8BAA8B;;kBAEzB,0BAA0B;;;;;;oBAMxB,wBAAwB;2BACjB,iCAAiC;;;;oBAIxC,0BAA0B;;;;;;;;;;;2BAWnB,cAAc;wBACjB,kBAAkB;;;;2BAIf,+BAA+B;;;;cAI5C,eAAe,UAAU,mBAAmB;;;;;;kBAMxC,0BAA0B;cAC9B,eAAe,UAAU,0BAA0B;;;;;;;aAOpD,8BAA8B;;;;;;iBAM1B,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;cAItB,eAAe;WAClB,oBAAoB;qBACV,uBAAuB;;;;;;;;;cAS9B,eAAe,UAAU,wBAAwB;;;;cAIjD,eAAe,UAAU,wBAAwB;;;;;;kBAM7C,0BAA0B;;;qBAGvB,eAAe,UAAU,4BAA4B;;;;2BAI/C,iCAAiC;;;;2BAIjC,mCAAmC;;;;;2BAKnC,mCAAmC;;;;2BAInC,0BAA0B;;;;;;;cAOvC,eAAe,UAAU,sBAAsB;;;;kBAI3C,uBAAuB;;;;kBAIvB,uBAAuB;;;;;oBAKrB,iCAAiC;;;;;oBAKjC,iCAAiC;kBACnC,uBAAuB;;CAExC,CAAC"}
+{"version":3,"file":"spin-button.styles.js","sourceRoot":"","sources":["../../../../src/components/spin-button/spin-button.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,EACf,OAAO,EACR,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEvE;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;IACpC,OAAO,CAAC,OAAO,CAAC;;;;mBAID,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;aAMvB,uBAAuB;sBACd,iBAAiB;;0BAEb,mBAAmB;;;;;;;;;;wBAUrB,uBAAuB;cACjC,eAAe,UAAU,mBAAmB;2BAC/B,4BAA4B;qBAClC,kBAAkB;;cAEzB,gBAAgB;;;WAGnB,oBAAoB;qBACV,uBAAuB;;;;;;;;;;;;uBAYrB,kBAAkB;yBAChB,kBAAkB,IAAI,kBAAkB;+BAClC,wBAAwB;;;;2BAI5B,iBAAiB;wBACpB,kBAAkB;;;;;;;;aAQ7B,uBAAuB;qBACf,kBAAkB;kBACrB,0BAA0B;mBACzB,cAAc;mBACd,iBAAiB;iBACnB,eAAe;mBACb,iBAAiB;;;;;;;;;;;;aAYvB,uBAAuB;;;;;;;;aAQvB,uBAAuB;;;;0BAIV,oBAAoB;;;;4BAIlB,oBAAoB;;;;;;;;;;;;;;;;;kBAiB9B,0BAA0B;aAC/B,uBAAuB;;iBAEnB,uBAAuB;;;;;;;;+BAQT,kBAAkB;;;;;6BAKpB,kBAAkB;;;;;kBAK7B,uBAAuB;;;;;;;aAO5B,uBAAuB;kBAClB,8BAA8B;;;;;aAKnC,8BAA8B;;kBAEzB,0BAA0B;;;;;;oBAMxB,wBAAwB;2BACjB,iCAAiC;;;;oBAIxC,0BAA0B;;;;;;;;;;;2BAWnB,cAAc;wBACjB,kBAAkB;;;;2BAIf,+BAA+B;;;;cAI5C,eAAe,UAAU,mBAAmB;;;;;;kBAMxC,0BAA0B;cAC9B,eAAe,UAAU,0BAA0B;;;;;;;aAOpD,8BAA8B;;;;;;iBAM1B,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;cAItB,eAAe;WAClB,oBAAoB;qBACV,uBAAuB;;;;;;;;;cAS9B,eAAe,UAAU,wBAAwB;;;;cAIjD,eAAe,UAAU,wBAAwB;;;;;;kBAM7C,0BAA0B;;;qBAGvB,eAAe,UAAU,4BAA4B;;;;2BAI/C,iCAAiC;;;;2BAIjC,mCAAmC;;;;;2BAKnC,mCAAmC;;;;2BAInC,0BAA0B;;;;;;;cAOvC,eAAe,UAAU,sBAAsB;;;;kBAI3C,uBAAuB;;;;kBAIvB,uBAAuB;;;;;oBAKrB,iCAAiC;;;;;oBAKjC,iCAAiC;kBACnC,uBAAuB;;CAExC,CAAC"}

package/esm/components/spinner/spinner.definition.js

@@ -1,6 +1,7 @@
 import { Spinner } from './spinner.js';
-import { SpinnerStyles, SpinnerTemplate } from '@fluentui/web-components';
 import { DesignSystem } from '../design-system.js';
+import { SpinnerTemplate } from '@fluentui/web-components';
+import { styles } from './spinner.styles.js';
 
 /**
  * The Fabric Spinner component.
@@ -10,7 +11,7 @@ import { DesignSystem } from '../design-system.js';
 const definition = Spinner.compose({
   name: `${DesignSystem.prefix}-spinner`,
   template: SpinnerTemplate,
-  styles: SpinnerStyles,
+  styles,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }

package/esm/components/spinner/spinner.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.definition.js","sourceRoot":"","sources":["../../../../src/components/spinner/spinner.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC;IACxC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,UAAU;IACtC,QAAQ,EAAE,eAAe;IACzB,MAAM,EAAE,aAAa;IACrB,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}
+{"version":3,"file":"spinner.definition.js","sourceRoot":"","sources":["../../../../src/components/spinner/spinner.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC;IACxC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,UAAU;IACtC,QAAQ,EAAE,eAAe;IACzB,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/esm/components/spinner/spinner.styles.js

@@ -0,0 +1,9 @@
+import { SpinnerStyles } from '@fluentui/web-components';
+import { css } from '@microsoft/fast-element';
+
+const styles = css`
+  ${SpinnerStyles}
+
+  :host{white-space:normal}`;
+
+export { styles };

package/esm/components/spinner/spinner.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.styles.js","sourceRoot":"","sources":["../../../../src/components/spinner/spinner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,aAAa;;;;;CAKhB,CAAC"}

package/esm/components/styles/patterns/patterns.js

@@ -0,0 +1,11 @@
+import { css } from '@microsoft/fast-element';
+
+/**
+ * Hides an element visually while keeping it accessible to screen readers.
+ * Apply the `visually-hidden` class to elements that should be announced
+ * by assistive technology but not rendered on screen.
+ * @public
+ */
+const visuallyHidden = css`.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}`;
+
+export { visuallyHidden };

package/esm/components/styles/patterns/patterns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"patterns.js","sourceRoot":"","sources":["../../../../../src/components/styles/patterns/patterns.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;CAahC,CAAC"}

package/esm/components/svg-icon/svg-icon.styles.js

@@ -5,6 +5,6 @@ import { sizeHorizontalXL } from '@fabric-msft/theme';
 const styles = css`
   ${display("inline-flex")}
 
-  :host,:host svg{height:var(--icon-height,${sizeHorizontalXL});width:var(--icon-width,${sizeHorizontalXL})}:host svg:not([role="img"]){fill:currentcolor}`;
+  :host{white-space:normal}:host,:host svg{height:var(--icon-height,${sizeHorizontalXL});width:var(--icon-width,${sizeHorizontalXL})}:host svg:not([role="img"]){fill:currentcolor}`;
 
 export { styles };

package/esm/components/svg-icon/svg-icon.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"svg-icon.styles.js","sourceRoot":"","sources":["../../../../src/components/svg-icon/svg-icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;iCAIO,gBAAgB;+BAClB,gBAAgB;;;;;;CAM9C,CAAC"}
+{"version":3,"file":"svg-icon.styles.js","sourceRoot":"","sources":["../../../../src/components/svg-icon/svg-icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;;;;iCAQO,gBAAgB;+BAClB,gBAAgB;;;;;;CAM9C,CAAC"}

package/esm/components/switch/switch.definition.js

@@ -1,6 +1,7 @@
 import { Switch } from './switch.js';
-import { SwitchStyles, SwitchTemplate } from '@fluentui/web-components';
 import { DesignSystem } from '../design-system.js';
+import { SwitchTemplate } from '@fluentui/web-components';
+import { styles } from './switch.styles.js';
 
 /**
  * The Fabric Switch component.
@@ -10,7 +11,7 @@ import { DesignSystem } from '../design-system.js';
 const definition = Switch.compose({
   name: `${DesignSystem.prefix}-switch`,
   template: SwitchTemplate,
-  styles: SwitchStyles,
+  styles,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }

package/esm/components/switch/switch.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.definition.js","sourceRoot":"","sources":["../../../../src/components/switch/switch.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;IACvC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,SAAS;IACrC,QAAQ,EAAE,cAAc;IACxB,MAAM,EAAE,YAAY;IACpB,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}
+{"version":3,"file":"switch.definition.js","sourceRoot":"","sources":["../../../../src/components/switch/switch.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;IACvC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,SAAS;IACrC,QAAQ,EAAE,cAAc;IACxB,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/esm/components/switch/switch.styles.js

@@ -0,0 +1,9 @@
+import { SwitchStyles } from '@fluentui/web-components';
+import { css } from '@microsoft/fast-element';
+
+const styles = css`
+  ${SwitchStyles}
+
+  :host{white-space:normal}`;
+
+export { styles };

package/esm/components/switch/switch.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.styles.js","sourceRoot":"","sources":["../../../../src/components/switch/switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;;;CAKf,CAAC"}

package/esm/components/tab/tab.definition.js

@@ -1,6 +1,7 @@
-import { TabStyles, TabTemplate } from '@fluentui/web-components';
 import { Tab } from './tab.js';
 import { DesignSystem } from '../design-system.js';
+import { TabTemplate } from '@fluentui/web-components';
+import { styles } from './tab.styles.js';
 
 /**
  * The Fabric Tab component
@@ -10,7 +11,7 @@ import { DesignSystem } from '../design-system.js';
 const definition = Tab.compose({
   name: `${DesignSystem.prefix}-tab`,
   template: TabTemplate,
-  styles: TabStyles,
+  styles,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }

package/esm/components/tab/tab.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.definition.js","sourceRoot":"","sources":["../../../../src/components/tab/tab.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAC;IACpC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,MAAM;IAClC,QAAQ,EAAE,WAAW;IACrB,MAAM,EAAE,SAAS;IACjB,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}
+{"version":3,"file":"tab.definition.js","sourceRoot":"","sources":["../../../../src/components/tab/tab.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAC;IACpC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,MAAM;IAClC,QAAQ,EAAE,WAAW;IACrB,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/esm/components/tab/tab.styles.js

@@ -0,0 +1,9 @@
+import { TabStyles } from '@fluentui/web-components';
+import { css } from '@microsoft/fast-element';
+
+const styles = css`
+  ${TabStyles}
+
+  :host{white-space:normal}`;
+
+export { styles };

package/esm/components/tab/tab.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.styles.js","sourceRoot":"","sources":["../../../../src/components/tab/tab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,SAAS;;;;;CAKZ,CAAC"}

package/esm/components/table/table.styles.js

@@ -5,6 +5,6 @@ import { css } from '@microsoft/fast-element';
 const styles = css`
   ${display("table")}
 
-  table{border-collapse:collapse;min-width:510px;table-layout:fixed;display:table;width:100%;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.table-sort-button{all:unset;align-items:center;cursor:pointer;font:inherit;color:inherit;outline-style:none;min-height:${sizeVerticalXXXL};box-sizing:content-box;display:flex;justify-content:space-between;align-items:center;color:${colorNeutralForeground1};font-weight:${fontWeightRegular};text-align:start}tr{display:table-row;box-sizing:border-box;color:${colorNeutralForeground1};border-bottom:${strokeWidthThin} solid ${colorNeutralStroke2}}tbody tr:hover{color:${colorNeutralForeground1Hover};background-color:${colorSubtleBackgroundHover}}th{color:${colorNeutralForeground1};text-align:start;font-weight:${fontWeightRegular};vertical-align:middle;padding:0px ${spacingHorizontalS};border-collapse:collapse}th div{outline-style:none;min-height:32px;box-sizing:content-box;display:flex;align-items:center}th[data-table-cell-focus="true"]{outline:-webkit-focus-ring-color auto 1px}:host([sortable]) th:hover{cursor:pointer;background-color:${colorNeutralBackground1Hover}}td,fabric-table-cell{height:44px;padding:0px ${spacingHorizontalS};vertical-align:middle;color:${colorNeutralForeground1}}.visually-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important}`;
+  :host{white-space:normal}table{border-collapse:collapse;min-width:510px;table-layout:fixed;display:table;width:100%;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.table-sort-button{all:unset;align-items:center;cursor:pointer;font:inherit;color:inherit;outline-style:none;min-height:${sizeVerticalXXXL};box-sizing:content-box;display:flex;justify-content:space-between;align-items:center;color:${colorNeutralForeground1};font-weight:${fontWeightRegular};text-align:start}tr{display:table-row;box-sizing:border-box;color:${colorNeutralForeground1};border-bottom:${strokeWidthThin} solid ${colorNeutralStroke2}}tbody tr:hover{color:${colorNeutralForeground1Hover};background-color:${colorSubtleBackgroundHover}}th{color:${colorNeutralForeground1};text-align:start;font-weight:${fontWeightRegular};vertical-align:middle;padding:0px ${spacingHorizontalS};border-collapse:collapse}th div{outline-style:none;min-height:32px;box-sizing:content-box;display:flex;align-items:center}th[data-table-cell-focus="true"]{outline:-webkit-focus-ring-color auto 1px}:host([sortable]) th:hover{cursor:pointer;background-color:${colorNeutralBackground1Hover}}td,fabric-table-cell{height:44px;padding:0px ${spacingHorizontalS};vertical-align:middle;color:${colorNeutralForeground1}}.visually-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important}`;
 
 export { styles };

package/esm/components/table/table.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.styles.js","sourceRoot":"","sources":["../../../../src/components/table/table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,4BAA4B,EAC5B,uBAAuB,EACvB,4BAA4B,EAC5B,mBAAmB,EACnB,0BAA0B,EAC1B,OAAO,EACP,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EAChB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;;;;;iBAQH,eAAe;mBACb,iBAAiB;;;;;;;;;;kBAUlB,gBAAgB;;;;;aAKrB,uBAAuB;mBACjB,iBAAiB;;;;;;;aAOvB,uBAAuB;qBACf,eAAe,UAAU,mBAAmB;;;;aAIpD,4BAA4B;wBACjB,0BAA0B;;;;aAIrC,uBAAuB;;mBAEjB,iBAAiB;;mBAEjB,kBAAkB;;;;;;;;;;;;;;;;;;wBAkBb,4BAA4B;;;;;;mBAMjC,kBAAkB;;aAExB,uBAAuB;;;;;;;;;;;;;;CAcnC,CAAC"}
+{"version":3,"file":"table.styles.js","sourceRoot":"","sources":["../../../../src/components/table/table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,4BAA4B,EAC5B,uBAAuB,EACvB,4BAA4B,EAC5B,mBAAmB,EACnB,0BAA0B,EAC1B,OAAO,EACP,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EAChB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;;;;iBAYH,eAAe;mBACb,iBAAiB;;;;;;;;;;kBAUlB,gBAAgB;;;;;aAKrB,uBAAuB;mBACjB,iBAAiB;;;;;;;aAOvB,uBAAuB;qBACf,eAAe,UAAU,mBAAmB;;;;aAIpD,4BAA4B;wBACjB,0BAA0B;;;;aAIrC,uBAAuB;;mBAEjB,iBAAiB;;mBAEjB,kBAAkB;;;;;;;;;;;;;;;;;;wBAkBb,4BAA4B;;;;;;mBAMjC,kBAAkB;;aAExB,uBAAuB;;;;;;;;;;;;;;CAcnC,CAAC"}

package/esm/components/table-cell/table-cell.styles.js

@@ -4,6 +4,6 @@ import { css } from '@microsoft/fast-element';
 const styles = css`
   ${display("table-cell")}
 
-  :host{vertical-align:inherit;unicode-bidi:isolate}.cell-content{display:flex;align-items:center}::slotted([slot="before"]){margin-inline-end:${spacingHorizontalS}}`;
+  :host{white-space:normal;vertical-align:inherit;unicode-bidi:isolate}.cell-content{display:flex;align-items:center}::slotted([slot="before"]){margin-inline-end:${spacingHorizontalS}}`;
 
 export { styles };

package/esm/components/table-cell/table-cell.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-cell.styles.js","sourceRoot":"","sources":["../../../../src/components/table-cell/table-cell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,YAAY,CAAC;;;;;;;;;;;;;yBAaA,kBAAkB;;CAE1C,CAAC"}
+{"version":3,"file":"table-cell.styles.js","sourceRoot":"","sources":["../../../../src/components/table-cell/table-cell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,YAAY,CAAC;;;;;;;;;;;;;;yBAcA,kBAAkB;;CAE1C,CAAC"}

package/esm/components/tablist/tablist.definition.js

@@ -1,6 +1,7 @@
-import { TablistStyles, TablistTemplate } from '@fluentui/web-components';
 import { DesignSystem } from '../design-system.js';
 import { Tablist } from './tablist.js';
+import { TablistTemplate } from '@fluentui/web-components';
+import { styles } from './tablist.styles.js';
 
 /**
  * The Fabric Tablist component.
@@ -10,7 +11,7 @@ import { Tablist } from './tablist.js';
 const definition = Tablist.compose({
   name: `${DesignSystem.prefix}-tablist`,
   template: TablistTemplate,
-  styles: TablistStyles,
+  styles,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }

package/esm/components/tablist/tablist.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"tablist.definition.js","sourceRoot":"","sources":["../../../../src/components/tablist/tablist.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC;IACxC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,UAAU;IACtC,QAAQ,EAAE,eAAe;IACzB,MAAM,EAAE,aAAa;IACrB,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}
+{"version":3,"file":"tablist.definition.js","sourceRoot":"","sources":["../../../../src/components/tablist/tablist.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC;IACxC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,UAAU;IACtC,QAAQ,EAAE,eAAe;IACzB,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/esm/components/tablist/tablist.styles.js

@@ -0,0 +1,9 @@
+import { TablistStyles } from '@fluentui/web-components';
+import { css } from '@microsoft/fast-element';
+
+const styles = css`
+  ${TablistStyles}
+
+  :host{white-space:normal}`;
+
+export { styles };

package/esm/components/tablist/tablist.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tablist.styles.js","sourceRoot":"","sources":["../../../../src/components/tablist/tablist.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,aAAa;;;;;CAKhB,CAAC"}

package/esm/components/tag/tag.styles.js

@@ -4,6 +4,6 @@ import { sizeVerticalXXXL, sizeVerticalXL, sizeVerticalXXL, sizeHorizontalM, siz
 
 const styles = css`
   ${display("block")}
-  .caption1{${typographyCaption1Styles}}.caption2{${typographyCaption2Styles}}.body1{${typographyBody1Styles}}:host{height:${sizeVerticalXXXL};width:fit-content;display:inline-flex;align-items:center;background-color:${colorNeutralBackground3};color:${colorNeutralForeground2};border-radius:${borderRadiusMedium};border:none}:host([size="extraSmall"]){height:${sizeVerticalXL}}:host([size="small"]){height:${sizeVerticalXXL}}:host([shape="circular"]){border-radius:${borderRadiusCircular}}:host([appearance="outline"]){border:${strokeWidthThin} solid ${colorNeutralStroke1};background-color:unset}:host([appearance="brand"]){background-color:${colorBrandBackground2};color:${colorBrandForeground1}}:host([appearance="brand"]) fluent-button.dismissButton{color:${colorBrandForeground1}}:host([disabled]){color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(*){color:${colorNeutralForegroundDisabled}}fluent-button.dismissButton{min-width:unset;padding:${spacingHorizontalNone};min-height:unset;margin-inline-start:${spacingHorizontalNone};margin-inline-end:${spacingHorizontalSNudge}}:host([disabled]) fluent-button.dismissButton{color:${colorNeutralForegroundDisabled}}:host([size="extraSmall"]) fluent-button.dismissButton{width:${sizeHorizontalM}}:host([size="extraSmall"]) fluent-button.dismissButton svg{height:${sizeVerticalM}}:host([size="small"]) fluent-button.dismissButton{width:${sizeHorizontalL}}:host([size="small"]) fluent-button.dismissButton svg{height:${sizeVerticalL}}.container{display:flex;align-items:center}.content{display:flex;flex-direction:row;align-items:center}.textContent{display:flex;flex-direction:column;padding:0 ${spacingHorizontalXXS};padding-bottom:${spacingVerticalXXS};margin:${spacingVerticalXXS} ${spacingHorizontalS}}:host(.hasLeadingIcon) .textContent{margin-inline-start:${spacingHorizontalXS}}:host([dismissButton]) .textContent{margin-inline-end:${spacingHorizontalXS}}::slotted([slot="leadingIcon"]){margin-inline-end:${spacingHorizontalNone};margin-inline-start:${spacingHorizontalS};display:flex;align-items:center}:host([size="small"]) ::slotted([slot="leadingIcon"]),:host([size="extraSmall"]) ::slotted([slot="leadingIcon"]){margin-inline-start:${spacingHorizontalSNudge}}::slotted([slot="image"]){margin:${spacingHorizontalXXS};margin-inline-end:${spacingHorizontalNone};display:flex;align-items:center;height:calc(${spacingVerticalXXL} + ${spacingVerticalXS})}:host([size="small"]) ::slotted([slot="image"]){height:${sizeVerticalXL}}:host([size="extraSmall"]) ::slotted([slot="image"]){height:${sizeVerticalL}}:host([appearance="brand"]) ::slotted([slot="image"]){background-color:${colorBrandForeground1};color:${colorNeutralBackground1}}:host([disabled][appearance="brand"]) ::slotted([slot="image"]){background-color:${colorNeutralForegroundDisabled};color:${colorNeutralBackgroundDisabled}}`;
+  .caption1{${typographyCaption1Styles}}.caption2{${typographyCaption2Styles}}.body1{${typographyBody1Styles}}:host{white-space:normal;height:${sizeVerticalXXXL};width:fit-content;display:inline-flex;align-items:center;background-color:${colorNeutralBackground3};color:${colorNeutralForeground2};border-radius:${borderRadiusMedium};border:none}:host([size="extraSmall"]){height:${sizeVerticalXL}}:host([size="small"]){height:${sizeVerticalXXL}}:host([shape="circular"]){border-radius:${borderRadiusCircular}}:host([appearance="outline"]){border:${strokeWidthThin} solid ${colorNeutralStroke1};background-color:unset}:host([appearance="brand"]){background-color:${colorBrandBackground2};color:${colorBrandForeground1}}:host([appearance="brand"]) fluent-button.dismissButton{color:${colorBrandForeground1}}:host([disabled]){color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(*){color:${colorNeutralForegroundDisabled}}fluent-button.dismissButton{min-width:unset;padding:${spacingHorizontalNone};min-height:unset;margin-inline-start:${spacingHorizontalNone};margin-inline-end:${spacingHorizontalSNudge}}:host([disabled]) fluent-button.dismissButton{color:${colorNeutralForegroundDisabled}}:host([size="extraSmall"]) fluent-button.dismissButton{width:${sizeHorizontalM}}:host([size="extraSmall"]) fluent-button.dismissButton svg{height:${sizeVerticalM}}:host([size="small"]) fluent-button.dismissButton{width:${sizeHorizontalL}}:host([size="small"]) fluent-button.dismissButton svg{height:${sizeVerticalL}}.container{display:flex;align-items:center}.content{display:flex;flex-direction:row;align-items:center}.textContent{display:flex;flex-direction:column;padding:0 ${spacingHorizontalXXS};padding-bottom:${spacingVerticalXXS};margin:${spacingVerticalXXS} ${spacingHorizontalS}}:host(.hasLeadingIcon) .textContent{margin-inline-start:${spacingHorizontalXS}}:host([dismissButton]) .textContent{margin-inline-end:${spacingHorizontalXS}}::slotted([slot="leadingIcon"]){margin-inline-end:${spacingHorizontalNone};margin-inline-start:${spacingHorizontalS};display:flex;align-items:center}:host([size="small"]) ::slotted([slot="leadingIcon"]),:host([size="extraSmall"]) ::slotted([slot="leadingIcon"]){margin-inline-start:${spacingHorizontalSNudge}}::slotted([slot="image"]){margin:${spacingHorizontalXXS};margin-inline-end:${spacingHorizontalNone};display:flex;align-items:center;height:calc(${spacingVerticalXXL} + ${spacingVerticalXS})}:host([size="small"]) ::slotted([slot="image"]){height:${sizeVerticalXL}}:host([size="extraSmall"]) ::slotted([slot="image"]){height:${sizeVerticalL}}:host([appearance="brand"]) ::slotted([slot="image"]){background-color:${colorBrandForeground1};color:${colorNeutralBackground1}}:host([disabled][appearance="brand"]) ::slotted([slot="image"]){background-color:${colorNeutralForegroundDisabled};color:${colorNeutralBackgroundDisabled}}`;
 
 export { styles };

package/esm/components/tag/tag.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.styles.js","sourceRoot":"","sources":["../../../../src/components/tag/tag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EACrB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,8BAA8B,EAC9B,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,eAAe,EACf,wBAAwB,EACxB,wBAAwB,EACxB,qBAAqB,EACtB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,eAAe,EACf,eAAe,EACf,aAAa,EACb,aAAa,EACb,cAAc,EACd,eAAe,EACf,gBAAgB,EACjB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;MAEd,wBAAwB;;;MAGxB,wBAAwB;;;MAGxB,qBAAqB;;;;cAIb,gBAAgB;;;;wBAIN,uBAAuB;aAClC,uBAAuB;qBACf,kBAAkB;;;;;cAKzB,cAAc;;;;cAId,eAAe;;;;qBAIR,oBAAoB;;;;cAI3B,eAAe,UAAU,mBAAmB;;;;;wBAKlC,qBAAqB;aAChC,qBAAqB;;;;aAIrB,qBAAqB;;;;aAIrB,8BAA8B;;;;aAI9B,8BAA8B;;;;;eAK5B,qBAAqB;;2BAET,qBAAqB;yBACvB,uBAAuB;;;;aAInC,8BAA8B;;;aAG9B,eAAe;;;;cAId,aAAa;;;;aAId,eAAe;;;;cAId,aAAa;;;;;;;;;;;;;;;;;iBAiBV,oBAAoB;sBACf,kBAAkB;cAC1B,kBAAkB,IAAI,kBAAkB;;;;2BAI3B,mBAAmB;;;;yBAIrB,mBAAmB;;;;yBAInB,qBAAqB;2BACnB,kBAAkB;;;;;;;2BAOlB,uBAAuB;;;;cAIpC,oBAAoB;yBACT,qBAAqB;;;mBAG3B,kBAAkB,MAAM,iBAAiB;;;;cAI9C,cAAc;;;;cAId,aAAa;;;;wBAIH,qBAAqB;aAChC,uBAAuB;;;;wBAIZ,8BAA8B;aACzC,8BAA8B;;CAE1C,CAAC"}
+{"version":3,"file":"tag.styles.js","sourceRoot":"","sources":["../../../../src/components/tag/tag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EACrB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,8BAA8B,EAC9B,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,eAAe,EACf,wBAAwB,EACxB,wBAAwB,EACxB,qBAAqB,EACtB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,eAAe,EACf,eAAe,EACf,aAAa,EACb,aAAa,EACb,cAAc,EACd,eAAe,EACf,gBAAgB,EACjB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;MAEd,wBAAwB;;;MAGxB,wBAAwB;;;MAGxB,qBAAqB;;;;;cAKb,gBAAgB;;;;wBAIN,uBAAuB;aAClC,uBAAuB;qBACf,kBAAkB;;;;;cAKzB,cAAc;;;;cAId,eAAe;;;;qBAIR,oBAAoB;;;;cAI3B,eAAe,UAAU,mBAAmB;;;;;wBAKlC,qBAAqB;aAChC,qBAAqB;;;;aAIrB,qBAAqB;;;;aAIrB,8BAA8B;;;;aAI9B,8BAA8B;;;;;eAK5B,qBAAqB;;2BAET,qBAAqB;yBACvB,uBAAuB;;;;aAInC,8BAA8B;;;aAG9B,eAAe;;;;cAId,aAAa;;;;aAId,eAAe;;;;cAId,aAAa;;;;;;;;;;;;;;;;;iBAiBV,oBAAoB;sBACf,kBAAkB;cAC1B,kBAAkB,IAAI,kBAAkB;;;;2BAI3B,mBAAmB;;;;yBAIrB,mBAAmB;;;;yBAInB,qBAAqB;2BACnB,kBAAkB;;;;;;;2BAOlB,uBAAuB;;;;cAIpC,oBAAoB;yBACT,qBAAqB;;;mBAG3B,kBAAkB,MAAM,iBAAiB;;;;cAI9C,cAAc;;;;cAId,aAAa;;;;wBAIH,qBAAqB;aAChC,uBAAuB;;;;wBAIZ,8BAA8B;aACzC,8BAA8B;;CAE1C,CAAC"}

package/esm/components/teaching-bubble/teaching-bubble.styles.js

@@ -5,6 +5,6 @@ import { css } from '@microsoft/fast-element';
 const styles = css`
   ${display("block")}
 
-  :host{position:absolute;border:1px solid ${colorBrandBackground};border-radius:${borderRadiusMedium};background-color:${colorBrandBackground};color:${colorNeutralBackground1};padding:${spacingHorizontalL};box-shadow:${shadow16};max-width:calc(${spacingHorizontalXXXL} * 9);z-index:var(--fabric-layer-teaching-bubble,1000)}::slotted(*){font-family:${fontFamilyBase};font-size:unset;font-weight:${fontWeightRegular};line-height:${lineHeightBase300};margin:0;margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0}:host([size="small"]) ::slotted(*){font-size:${fontSizeBase200}}:host([size="medium"]) ::slotted(*){font-size:${fontSizeBase300}}:host([size="large"]) ::slotted(*){font-size:${fontSizeBase400}}slot[name="close"]::slotted(*){position:absolute;top:0;inset-inline-end:0}.content{position:relative}.heading{margin-bottom:${spacingHorizontalS}}.arrow{position:absolute;background:${colorBrandBackground};width:${sizeHorizontalL};height:${sizeVerticalL};transform:rotate(45deg);border-radius:${borderRadiusSmall};pointer-events:none}slot[name="image"]::slotted(*){display:block;margin-bottom:${spacingHorizontalM}}slot[name="image"]::slotted(img),slot[name="image"]::slotted(picture),slot[name="image"]::slotted(video){max-width:100%;height:auto}slot[name="heading"]::slotted(*){font-weight:${fontWeightSemibold};line-height:${lineHeightBase400}}:host([size="small"]) slot[name="heading"]::slotted(*){font-size:${fontSizeBase300}}:host([size="medium"]) slot[name="heading"]::slotted(*){font-size:${fontSizeBase400}}:host([size="large"]) slot[name="heading"]::slotted(*){font-size:${fontSizeBase500}}slot[name="footer"]::slotted(*){line-height:${lineHeightBase200};margin-top:${spacingHorizontalM};padding-top:${spacingHorizontalM}}`;
+  :host{white-space:normal;position:absolute;border:1px solid ${colorBrandBackground};border-radius:${borderRadiusMedium};background-color:${colorBrandBackground};color:${colorNeutralBackground1};padding:${spacingHorizontalL};box-shadow:${shadow16};max-width:calc(${spacingHorizontalXXXL} * 9);z-index:var(--fabric-layer-teaching-bubble,1000)}::slotted(*){font-family:${fontFamilyBase};font-size:unset;font-weight:${fontWeightRegular};line-height:${lineHeightBase300};margin:0;margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0}:host([size="small"]) ::slotted(*){font-size:${fontSizeBase200}}:host([size="medium"]) ::slotted(*){font-size:${fontSizeBase300}}:host([size="large"]) ::slotted(*){font-size:${fontSizeBase400}}slot[name="close"]::slotted(*){position:absolute;top:0;inset-inline-end:0}.content{position:relative}.heading{margin-bottom:${spacingHorizontalS}}.arrow{position:absolute;background:${colorBrandBackground};width:${sizeHorizontalL};height:${sizeVerticalL};transform:rotate(45deg);border-radius:${borderRadiusSmall};pointer-events:none}slot[name="image"]::slotted(*){display:block;margin-bottom:${spacingHorizontalM}}slot[name="image"]::slotted(img),slot[name="image"]::slotted(picture),slot[name="image"]::slotted(video){max-width:100%;height:auto}slot[name="heading"]::slotted(*){font-weight:${fontWeightSemibold};line-height:${lineHeightBase400}}:host([size="small"]) slot[name="heading"]::slotted(*){font-size:${fontSizeBase300}}:host([size="medium"]) slot[name="heading"]::slotted(*){font-size:${fontSizeBase400}}:host([size="large"]) slot[name="heading"]::slotted(*){font-size:${fontSizeBase500}}slot[name="footer"]::slotted(*){line-height:${lineHeightBase200};margin-top:${spacingHorizontalM};padding-top:${spacingHorizontalM}}`;
 
 export { styles };

package/esm/components/teaching-bubble/teaching-bubble.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"teaching-bubble.styles.js","sourceRoot":"","sources":["../../../../src/components/teaching-bubble/teaching-bubble.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,oBAAoB,EACpB,uBAAuB,EACvB,OAAO,EACP,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACtB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;wBAII,oBAAoB;qBACvB,kBAAkB;wBACf,oBAAoB;aAC/B,uBAAuB;eACrB,kBAAkB;kBACf,QAAQ;sBACJ,qBAAqB;;;;;;mBAMxB,cAAc;;mBAEd,iBAAiB;mBACjB,iBAAiB;;;;;;;;;iBASnB,eAAe;;;;iBAIf,eAAe;;;;iBAIf,eAAe;;;;;;;;;;;;;;qBAcX,kBAAkB;;;;;kBAKrB,oBAAoB;aACzB,eAAe;cACd,aAAa;;qBAEN,iBAAiB;;;;;;;qBAOjB,kBAAkB;;;;;;;;;;;;mBAYpB,kBAAkB;mBAClB,iBAAiB;;;;iBAInB,eAAe;;;;iBAIf,eAAe;;;;iBAIf,eAAe;;;;mBAIb,iBAAiB;kBAClB,kBAAkB;mBACjB,kBAAkB;;CAEpC,CAAC"}
+{"version":3,"file":"teaching-bubble.styles.js","sourceRoot":"","sources":["../../../../src/components/teaching-bubble/teaching-bubble.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,oBAAoB,EACpB,uBAAuB,EACvB,OAAO,EACP,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACtB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;;wBAKI,oBAAoB;qBACvB,kBAAkB;wBACf,oBAAoB;aAC/B,uBAAuB;eACrB,kBAAkB;kBACf,QAAQ;sBACJ,qBAAqB;;;;;;mBAMxB,cAAc;;mBAEd,iBAAiB;mBACjB,iBAAiB;;;;;;;;;iBASnB,eAAe;;;;iBAIf,eAAe;;;;iBAIf,eAAe;;;;;;;;;;;;;;qBAcX,kBAAkB;;;;;kBAKrB,oBAAoB;aACzB,eAAe;cACd,aAAa;;qBAEN,iBAAiB;;;;;;;qBAOjB,kBAAkB;;;;;;;;;;;;mBAYpB,kBAAkB;mBAClB,iBAAiB;;;;iBAInB,eAAe;;;;iBAIf,eAAe;;;;iBAIf,eAAe;;;;mBAIb,iBAAiB;kBAClB,kBAAkB;mBACjB,kBAAkB;;CAEpC,CAAC"}

package/esm/components/text/text.definition.js

@@ -1,6 +1,7 @@
-import { Text } from './text.js';
-import { TextStyles, TextTemplate } from '@fluentui/web-components';
+import { TextTemplate } from '@fluentui/web-components';
 import { DesignSystem } from '../design-system.js';
+import { Text } from './text.js';
+import { styles } from './text.styles.js';
 
 /**
  * The Fabric Text component.
@@ -10,7 +11,7 @@ import { DesignSystem } from '../design-system.js';
 const definition = Text.compose({
   name: `${DesignSystem.prefix}-text`,
   template: TextTemplate,
-  styles: TextStyles,
+  styles,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }

package/esm/components/text/text.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.definition.js","sourceRoot":"","sources":["../../../../src/components/text/text.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;IACrC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,OAAO;IACnC,QAAQ,EAAE,YAAY;IACtB,MAAM,EAAE,UAAU;IAClB,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}
+{"version":3,"file":"text.definition.js","sourceRoot":"","sources":["../../../../src/components/text/text.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;IACrC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,OAAO;IACnC,QAAQ,EAAE,YAAY;IACtB,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/esm/components/text/text.styles.js

@@ -0,0 +1,9 @@
+import { TextStyles } from '@fluentui/web-components';
+import { css } from '@microsoft/fast-element';
+
+const styles = css`
+  ${TextStyles}
+
+  :host{white-space:normal}`;
+
+export { styles };

package/esm/components/text/text.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.styles.js","sourceRoot":"","sources":["../../../../src/components/text/text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,UAAU;;;;;CAKb,CAAC"}

package/esm/components/text-input/text-input.styles.js

@@ -10,6 +10,6 @@ import { sizeVerticalXXXL, sizeVerticalXXL } from '@fabric-msft/theme';
 const styles = css`
   ${display("block")}
 
-  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300}}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{align-items:center;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};box-sizing:border-box;height:${sizeVerticalXXXL};display:inline-flex;flex-direction:row;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalMNudge};position:relative;width:100%;box-shadow:unset}:has(.control:user-invalid){border-color:${colorPaletteRedBorder2}}.root::after{box-sizing:border-box;content:"";position:absolute;inset-inline-start:-1px;bottom:0px;inset-inline-end:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{width:100%;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};border:none;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot="start"]),:host ::slotted([slot="end"]){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3};font-size:${fontSizeBase500}}:host ::slotted([slot="start"]){padding-inline-end:${spacingHorizontalXXS}}:host ::slotted([slot="end"]){padding-inline-start:${spacingHorizontalXXS};gap:${spacingHorizontalXS}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root:after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host([appearance="outline"]:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host(:focus-within) .control{color:${colorNeutralForeground1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot="start"]),:host([disabled]) ::slotted([slot="end"]){color:${colorNeutralForegroundDisabled}}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}:host([control-size="small"]) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host([control-size="small"]) .root{height:${sizeVerticalXXL};gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalSNudge}}:host([control-size="small"]) ::slotted([slot="start"]),:host([control-size="small"]) ::slotted([slot="end"]){font-size:${fontSizeBase400}}:host([control-size="large"]) .control{font-size:${fontSizeBase400};font-weight:${fontWeightRegular};line-height:${lineHeightBase400}}:host([control-size="large"]) .root{height:40px;gap:${spacingHorizontalS};padding:0 ${spacingHorizontalM}}:host([control-size="large"]) ::slotted([slot="start"]),:host([control-size="large"]) ::slotted([slot="end"]){font-size:${fontSizeBase600}}:host([appearance="underline"]) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host([appearance="underline"]:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host([appearance="underline"]:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance="underline"]:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance="underline"][disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host([appearance="filled-lighter"]) .root,:host([appearance="filled-darker"]) .root{border:${strokeWidthThin} solid ${colorTransparentStroke}}:host([appearance="filled-lighter"]) .root{background:${colorNeutralBackground1}}:host([appearance="filled-darker"]) .root{background:${colorNeutralBackground3}}:host([appearance="filled-lighter"]:hover) .root,:host([appearance="filled-darker"]:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host([appearance="filled-lighter"]:active) .root,:host([appearance="filled-darker"]:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
+  :host{white-space:normal;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300}}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{align-items:center;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};box-sizing:border-box;height:${sizeVerticalXXXL};display:inline-flex;flex-direction:row;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalMNudge};position:relative;width:100%;box-shadow:unset}:has(.control:user-invalid){border-color:${colorPaletteRedBorder2}}.root::after{box-sizing:border-box;content:"";position:absolute;inset-inline-start:-1px;bottom:0px;inset-inline-end:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{width:100%;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};border:none;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot="start"]),:host ::slotted([slot="end"]){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3};font-size:${fontSizeBase500}}:host ::slotted([slot="start"]){padding-inline-end:${spacingHorizontalXXS}}:host ::slotted([slot="end"]){padding-inline-start:${spacingHorizontalXXS};gap:${spacingHorizontalXS}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root:after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host([appearance="outline"]:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host(:focus-within) .control{color:${colorNeutralForeground1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot="start"]),:host([disabled]) ::slotted([slot="end"]){color:${colorNeutralForegroundDisabled}}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}:host([control-size="small"]) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host([control-size="small"]) .root{height:${sizeVerticalXXL};gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalSNudge}}:host([control-size="small"]) ::slotted([slot="start"]),:host([control-size="small"]) ::slotted([slot="end"]){font-size:${fontSizeBase400}}:host([control-size="large"]) .control{font-size:${fontSizeBase400};font-weight:${fontWeightRegular};line-height:${lineHeightBase400}}:host([control-size="large"]) .root{height:40px;gap:${spacingHorizontalS};padding:0 ${spacingHorizontalM}}:host([control-size="large"]) ::slotted([slot="start"]),:host([control-size="large"]) ::slotted([slot="end"]){font-size:${fontSizeBase600}}:host([appearance="underline"]) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host([appearance="underline"]:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host([appearance="underline"]:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance="underline"]:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance="underline"][disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host([appearance="filled-lighter"]) .root,:host([appearance="filled-darker"]) .root{border:${strokeWidthThin} solid ${colorTransparentStroke}}:host([appearance="filled-lighter"]) .root{background:${colorNeutralBackground1}}:host([appearance="filled-darker"]) .root{background:${colorNeutralBackground3}}:host([appearance="filled-lighter"]:hover) .root,:host([appearance="filled-darker"]:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host([appearance="filled-lighter"]:active) .root,:host([appearance="filled-darker"]:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
 
 export { styles };

package/esm/components/text-input/text-input.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.styles.js","sourceRoot":"","sources":["../../../../src/components/text-input/text-input.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,sBAAsB,EACtB,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,EACf,OAAO,EACR,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEvE;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;IACpC,OAAO,CAAC,OAAO,CAAC;;;mBAGD,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;aAIvB,uBAAuB;sBACd,iBAAiB;;0BAEb,mBAAmB;;;;;;;;;;wBAUrB,uBAAuB;cACjC,eAAe,UAAU,mBAAmB;2BAC/B,4BAA4B;qBAClC,kBAAkB;;cAEzB,gBAAgB;;;WAGnB,oBAAoB;iBACd,uBAAuB;;;;;;;oBAOpB,sBAAsB;;;;;;;;;;uBAUnB,kBAAkB;yBAChB,kBAAkB,IAAI,kBAAkB;+BAClC,wBAAwB;;;;2BAI5B,iBAAiB;wBACpB,kBAAkB;;;;;;aAM7B,uBAAuB;qBACf,kBAAkB;kBACrB,0BAA0B;mBACzB,cAAc;mBACd,iBAAiB;iBACnB,eAAe;;;;;;;;;aASnB,uBAAuB;;;;;;;aAOvB,uBAAuB;iBACnB,eAAe;;;0BAGN,oBAAoB;;;4BAGlB,oBAAoB;WACrC,mBAAmB;;;oBAGV,wBAAwB;2BACjB,iCAAiC;;;oBAGxC,0BAA0B;;;;;;;;;2BASnB,cAAc;wBACjB,kBAAkB;;;2BAGf,+BAA+B;;;cAG5C,eAAe,UAAU,mBAAmB;;;aAG7C,uBAAuB;;;kBAGlB,0BAA0B;cAC9B,eAAe,UAAU,0BAA0B;;;;;aAKpD,8BAA8B;;;aAG9B,8BAA8B;wBACnB,8BAA8B;;;iBAGrC,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;cAGtB,eAAe;WAClB,oBAAoB;iBACd,uBAAuB;;;;iBAIvB,eAAe;;;iBAGf,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;WAIzB,kBAAkB;iBACZ,kBAAkB;;;;iBAIlB,eAAe;;;kBAGd,0BAA0B;;;qBAGvB,eAAe,UAAU,4BAA4B;;;2BAG/C,iCAAiC;;;2BAGjC,mCAAmC;;;;2BAInC,mCAAmC;;;2BAGnC,0BAA0B;;;;cAIvC,eAAe,UAAU,sBAAsB;;;kBAG3C,uBAAuB;;;kBAGvB,uBAAuB;;;;oBAIrB,iCAAiC;;;;oBAIjC,iCAAiC;kBACnC,uBAAuB;;CAExC,CAAC"}
+{"version":3,"file":"text-input.styles.js","sourceRoot":"","sources":["../../../../src/components/text-input/text-input.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,sBAAsB,EACtB,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,EACf,OAAO,EACR,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEvE;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;IACpC,OAAO,CAAC,OAAO,CAAC;;;;mBAID,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;aAIvB,uBAAuB;sBACd,iBAAiB;;0BAEb,mBAAmB;;;;;;;;;;wBAUrB,uBAAuB;cACjC,eAAe,UAAU,mBAAmB;2BAC/B,4BAA4B;qBAClC,kBAAkB;;cAEzB,gBAAgB;;;WAGnB,oBAAoB;iBACd,uBAAuB;;;;;;;oBAOpB,sBAAsB;;;;;;;;;;uBAUnB,kBAAkB;yBAChB,kBAAkB,IAAI,kBAAkB;+BAClC,wBAAwB;;;;2BAI5B,iBAAiB;wBACpB,kBAAkB;;;;;;aAM7B,uBAAuB;qBACf,kBAAkB;kBACrB,0BAA0B;mBACzB,cAAc;mBACd,iBAAiB;iBACnB,eAAe;;;;;;;;;aASnB,uBAAuB;;;;;;;aAOvB,uBAAuB;iBACnB,eAAe;;;0BAGN,oBAAoB;;;4BAGlB,oBAAoB;WACrC,mBAAmB;;;oBAGV,wBAAwB;2BACjB,iCAAiC;;;oBAGxC,0BAA0B;;;;;;;;;2BASnB,cAAc;wBACjB,kBAAkB;;;2BAGf,+BAA+B;;;cAG5C,eAAe,UAAU,mBAAmB;;;aAG7C,uBAAuB;;;kBAGlB,0BAA0B;cAC9B,eAAe,UAAU,0BAA0B;;;;;aAKpD,8BAA8B;;;aAG9B,8BAA8B;wBACnB,8BAA8B;;;iBAGrC,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;cAGtB,eAAe;WAClB,oBAAoB;iBACd,uBAAuB;;;;iBAIvB,eAAe;;;iBAGf,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;WAIzB,kBAAkB;iBACZ,kBAAkB;;;;iBAIlB,eAAe;;;kBAGd,0BAA0B;;;qBAGvB,eAAe,UAAU,4BAA4B;;;2BAG/C,iCAAiC;;;2BAGjC,mCAAmC;;;;2BAInC,mCAAmC;;;2BAGnC,0BAA0B;;;;cAIvC,eAAe,UAAU,sBAAsB;;;kBAG3C,uBAAuB;;;kBAGvB,uBAAuB;;;;oBAIrB,iCAAiC;;;;oBAIjC,iCAAiC;kBACnC,uBAAuB;;CAExC,CAAC"}

package/esm/components/textarea/textarea.definition.js

@@ -1,6 +1,7 @@
-import { TextAreaStyles, TextAreaTemplate } from '@fluentui/web-components';
+import { TextAreaTemplate } from '@fluentui/web-components';
 import { DesignSystem } from '../design-system.js';
 import { TextArea } from './textarea.js';
+import { styles } from './textarea.styles.js';
 
 /**
  * The Fabric Text Area component.
@@ -10,7 +11,7 @@ import { TextArea } from './textarea.js';
 const definition = TextArea.compose({
   name: `${DesignSystem.prefix}-textarea`,
   template: TextAreaTemplate,
-  styles: TextAreaStyles,
+  styles,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }

package/esm/components/textarea/textarea.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.definition.js","sourceRoot":"","sources":["../../../../src/components/textarea/textarea.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC;IACzC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,WAAW;IACvC,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,cAAc;IACtB,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}
+{"version":3,"file":"textarea.definition.js","sourceRoot":"","sources":["../../../../src/components/textarea/textarea.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC;IACzC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,WAAW;IACvC,QAAQ,EAAE,gBAAgB;IAC1B,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/esm/components/textarea/textarea.styles.js

@@ -0,0 +1,9 @@
+import { TextAreaStyles } from '@fluentui/web-components';
+import { css } from '@microsoft/fast-element';
+
+const styles = css`
+  ${TextAreaStyles}
+
+  :host{white-space:normal}`;
+
+export { styles };

package/esm/components/textarea/textarea.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.styles.js","sourceRoot":"","sources":["../../../../src/components/textarea/textarea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,cAAc;;;;;CAKjB,CAAC"}

package/esm/components/toggle-button/toggle-button.definition.js

@@ -1,6 +1,7 @@
-import { ToggleButtonStyles, ToggleButtonTemplate } from '@fluentui/web-components';
+import { ToggleButtonTemplate } from '@fluentui/web-components';
 import { DesignSystem } from '../design-system.js';
 import { ToggleButton } from './toggle-button.js';
+import { styles } from './toggle-button.styles.js';
 
 /**
  * The Fabric Toggle Button component.
@@ -10,7 +11,7 @@ import { ToggleButton } from './toggle-button.js';
 const definition = ToggleButton.compose({
   name: `${DesignSystem.prefix}-toggle-button`,
   template: ToggleButtonTemplate,
-  styles: ToggleButtonStyles,
+  styles,
   shadowOptions: {
     mode: DesignSystem.shadowRootMode
   }