@fluentui/web-components 3.0.0-rc.3 → 3.0.0-rc.31

package/dist/esm/textarea/textarea.styles.css

@@ -0,0 +1,262 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-block;
+}
+
+:host {
+  /* typography */
+  --font-size: var(--fontSizeBase300);
+  --line-height: var(--lineHeightBase300);
+
+  /* layout */
+  --padding-inline: var(--spacingHorizontalMNudge);
+  --padding-block: var(--spacingVerticalSNudge);
+  --min-block-size: 52px;
+  --block-size: var(--min-block-size);
+  --inline-size: 18rem;
+  --border-width: var(--strokeWidthThin);
+  --control-padding-inline: var(--spacingHorizontalXXS);
+
+  /* colors */
+  --color: var(--colorNeutralForeground1);
+  --background-color: var(--colorNeutralBackground1);
+  --border-color: var(--colorNeutralStroke1);
+  --border-block-end-color: var(--colorNeutralStrokeAccessible);
+  --placeholder-color: var(--colorNeutralForeground4);
+  --focus-indicator-color: var(--colorCompoundBrandStroke);
+
+  /* elevations */
+  --box-shadow: none;
+
+  /* others */
+  --contain-size: size;
+  --resize: none;
+
+  color: var(--color);
+  font-family: var(--fontFamilyBase);
+  font-size: var(--font-size);
+  font-weight: var(--fontWeightRegular);
+  line-height: var(--line-height);
+  position: relative;
+}
+
+:host(:hover) {
+  --border-color: var(--colorNeutralStroke1Hover);
+  --border-block-end-color: var(--colorNeutralStrokeAccessibleHover);
+}
+
+:host(:active) {
+  --border-color: var(--colorNeutralStroke1Pressed);
+  --border-block-end-color: var(--colorNeutralStrokeAccessiblePressed);
+}
+
+:host(:focus-within) {
+  outline: none;
+}
+
+:host([block]:not([hidden])) {
+  display: block;
+}
+
+:host([size='small']) {
+  --font-size: var(--fontSizeBase200);
+  --line-height: var(--lineHeightBase200);
+  --min-block-size: 40px;
+  --padding-block: var(--spacingVerticalXS);
+  --padding-inline: var(--spacingHorizontalSNudge);
+  --control-padding-inline: var(--spacingHorizontalXXS);
+}
+
+:host([size='large']) {
+  --font-size: var(--fontSizeBase400);
+  --line-height: var(--lineHeightBase400);
+  --min-block-size: 64px;
+  --padding-block: var(--spacingVerticalS);
+  --padding-inline: var(--spacingHorizontalM);
+  --control-padding-inline: var(--spacingHorizontalSNudge);
+}
+
+:host([resize='both']:not(:disabled)) {
+  --resize: both;
+}
+
+:host([resize='horizontal']:not(:disabled)) {
+  --resize: horizontal;
+}
+
+:host([resize='vertical']:not(:disabled)) {
+  --resize: vertical;
+}
+
+:host([auto-resize]) {
+  --block-size: auto;
+  --contain-size: inline-size;
+}
+
+:host([appearance='filled-darker']) {
+  --background-color: var(--colorNeutralBackground3);
+  --border-color: var(--background-color);
+  --border-block-end-color: var(--border-color);
+}
+
+:host([appearance='filled-lighter']) {
+  --border-color: var(--background-color);
+  --border-block-end-color: var(--border-color);
+}
+
+:host([appearance='filled-darker'][display-shadow]),
+:host([appearance='filled-lighter'][display-shadow]) {
+  --box-shadow: var(--shadow2);
+}
+
+:host(:state(user-invalid)) {
+  --border-color: var(--colorPaletteRedBorder2);
+  --border-block-end-color: var(--colorPaletteRedBorder2);
+}
+
+:host(:disabled) {
+  --color: var(--colorNeutralForegroundDisabled);
+  --background-color: var(--colorTransparentBackground);
+  --border-color: var(--colorNeutralStrokeDisabled);
+  --border-block-end-color: var(--border-color);
+  --box-shadow: none;
+  --placeholder-color: var(--colorNeutralForegroundDisabled);
+
+  cursor: no-drop;
+  user-select: none;
+}
+
+.root {
+  background-color: var(--background-color);
+  border: var(--border-width) solid var(--border-color);
+  border-block-end-color: var(--border-block-end-color);
+  border-radius: var(--borderRadiusMedium);
+  box-sizing: border-box;
+  box-shadow: var(--box-shadow);
+  contain: paint layout style var(--contain-size);
+  display: grid;
+  grid-template: 1fr / 1fr;
+  inline-size: var(--inline-size);
+  min-block-size: var(--min-block-size);
+  block-size: var(--block-size);
+  overflow: hidden;
+  padding: var(--padding-block) var(--padding-inline);
+  position: relative;
+  resize: var(--resize);
+}
+
+:host([block]) .root {
+  inline-size: auto;
+}
+
+.root::after {
+  border-bottom: 2px solid var(--focus-indicator-color);
+  border-radius: 0 0 var(--borderRadiusMedium) var(--borderRadiusMedium);
+  box-sizing: border-box;
+  clip-path: inset(calc(100% - 2px) 1px 0px);
+  content: '';
+  height: max(2px, var(--borderRadiusMedium));
+  inset: auto -1px 0;
+  position: absolute;
+  transform: scaleX(0);
+  transition-delay: var(--curveAccelerateMid);
+  transition-duration: var(--durationUltraFast);
+  transition-property: transform;
+}
+
+:host(:focus-within) .root::after {
+  transform: scaleX(1);
+  transition-property: transform;
+  transition-duration: var(--durationNormal);
+  transition-delay: var(--curveDecelerateMid);
+}
+
+:host([readonly]) .root::after,
+:host(:disabled) .root::after {
+  content: none;
+}
+
+label {
+  color: var(--color);
+  display: flex;
+  inline-size: fit-content;
+  padding-block-end: var(--spacingVerticalXS);
+  padding-inline-end: var(--spacingHorizontalXS);
+}
+
+:host(:empty) label,
+label[hidden] {
+  display: none;
+}
+
+.auto-sizer,
+.control {
+  box-sizing: border-box;
+  font: inherit;
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
+  letter-space: inherit;
+  padding: 0 var(--control-padding-inline);
+}
+
+.auto-sizer {
+  display: none;
+  padding-block-end: 2px; /* avoid scroll bar in Firefox */
+  pointer-events: none;
+  visibility: hidden;
+  white-space: pre-wrap;
+}
+
+:host([auto-resize]) .auto-sizer {
+  display: block;
+}
+
+.control {
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  color: inherit;
+  field-sizing: content;
+  max-block-size: 100%;
+  outline: 0;
+  resize: none;
+  text-align: inherit;
+}
+
+.control:disabled {
+  cursor: inherit;
+}
+
+.control::placeholder {
+  color: var(--placeholder-color);
+}
+
+::selection {
+  color: var(--colorNeutralForegroundInverted);
+  background-color: var(--colorNeutralBackgroundInverted);
+}
+
+@media (forced-colors: active) {
+  :host {
+    --border-color: FieldText;
+    --border-block-end-color: FieldText;
+    --focus-indicator-color: Highlight;
+    --placeholder-color: FieldText;
+  }
+
+  :host(:hover),
+  :host(:active),
+  :host(:focus-within) {
+    --border-color: Highlight;
+    --border-block-end-color: Highlight;
+  }
+
+  :host(:disabled) {
+    --color: GrayText;
+    --border-color: GrayText;
+    --border-block-end-color: GrayText;
+    --placeholder-color: GrayText;
+  }
+}

package/dist/esm/textarea/textarea.styles.js

@@ -1,6 +1,5 @@
 import { css } from '@microsoft/fast-element';
 import { borderRadiusMedium, colorCompoundBrandStroke, colorNeutralBackground1, colorNeutralBackground3, colorNeutralBackgroundInverted, colorNeutralForeground1, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorPaletteRedBorder2, colorTransparentBackground, curveAccelerateMid, curveDecelerateMid, durationNormal, durationUltraFast, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, lineHeightBase200, lineHeightBase300, lineHeightBase400, shadow2, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, spacingVerticalS, spacingVerticalSNudge, spacingVerticalXS, strokeWidthThin, } from '../theme/design-tokens.js';
-import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-stylesheet-behavior.js';
 import { display } from '../utils/display.js';
 import { userInvalidState } from '../styles/states/index.js';
 /**
@@ -243,7 +242,8 @@ export const styles = css `
     color: ${colorNeutralForegroundInverted};
     background-color: ${colorNeutralBackgroundInverted};
   }
-`.withBehaviors(forcedColorsStylesheetBehavior(css `
+
+  @media (forced-colors: active) {
     :host {
       --border-color: FieldText;
       --border-block-end-color: FieldText;
@@ -264,5 +264,6 @@ export const styles = css `
       --border-block-end-color: GrayText;
       --placeholder-color: GrayText;
     }
-  `));
+  }
+`;
 //# sourceMappingURL=textarea.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.styles.js","sourceRoot":"","sources":["../../../src/textarea/textarea.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,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,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,8BAA8B,EAAE,MAAM,uDAAuD,CAAC;AACvG,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;IACpC,OAAO,CAAC,cAAc,CAAC;;;;mBAIR,eAAe;qBACb,iBAAiB;;;wBAGd,uBAAuB;uBACxB,qBAAqB;;;;sBAItB,eAAe;gCACL,oBAAoB;;;eAGrC,uBAAuB;0BACZ,uBAAuB;sBAC3B,mBAAmB;gCACT,4BAA4B;2BACjC,uBAAuB;+BACnB,wBAAwB;;;;;;;;;;mBAUpC,cAAc;;mBAEd,iBAAiB;;;;;;sBAMd,wBAAwB;gCACd,iCAAiC;;;;sBAI3C,0BAA0B;gCAChB,mCAAmC;;;;;;;;;;;;mBAYhD,eAAe;qBACb,iBAAiB;;uBAEf,iBAAiB;wBAChB,uBAAuB;gCACf,oBAAoB;;;;mBAIjC,eAAe;qBACb,iBAAiB;;uBAEf,gBAAgB;wBACf,kBAAkB;gCACV,uBAAuB;;;;;;;;;;;;;;;;;;;;;0BAqB7B,uBAAuB;;;;;;;;;;;;oBAY7B,OAAO;;;UAGjB,gBAAgB;sBACJ,sBAAsB;gCACZ,sBAAsB;;;;eAIvC,8BAA8B;0BACnB,0BAA0B;sBAC9B,0BAA0B;;;2BAGrB,8BAA8B;;;;;;;;;;qBAUpC,kBAAkB;;;;;;;;;;;;;;;;;;;;;yBAqBd,kBAAkB,IAAI,kBAAkB;;;;uBAI1C,kBAAkB;;;;wBAIjB,kBAAkB;2BACf,iBAAiB;;;;;;;2BAOjB,cAAc;wBACjB,kBAAkB;;;;;;;;;;;;yBAYjB,iBAAiB;0BAChB,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAmDhC,8BAA8B;wBACnB,8BAA8B;;CAErD,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;GAqBjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"textarea.styles.js","sourceRoot":"","sources":["../../../src/textarea/textarea.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,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,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;IACpC,OAAO,CAAC,cAAc,CAAC;;;;mBAIR,eAAe;qBACb,iBAAiB;;;wBAGd,uBAAuB;uBACxB,qBAAqB;;;;sBAItB,eAAe;gCACL,oBAAoB;;;eAGrC,uBAAuB;0BACZ,uBAAuB;sBAC3B,mBAAmB;gCACT,4BAA4B;2BACjC,uBAAuB;+BACnB,wBAAwB;;;;;;;;;;mBAUpC,cAAc;;mBAEd,iBAAiB;;;;;;sBAMd,wBAAwB;gCACd,iCAAiC;;;;sBAI3C,0BAA0B;gCAChB,mCAAmC;;;;;;;;;;;;mBAYhD,eAAe;qBACb,iBAAiB;;uBAEf,iBAAiB;wBAChB,uBAAuB;gCACf,oBAAoB;;;;mBAIjC,eAAe;qBACb,iBAAiB;;uBAEf,gBAAgB;wBACf,kBAAkB;gCACV,uBAAuB;;;;;;;;;;;;;;;;;;;;;0BAqB7B,uBAAuB;;;;;;;;;;;;oBAY7B,OAAO;;;UAGjB,gBAAgB;sBACJ,sBAAsB;gCACZ,sBAAsB;;;;eAIvC,8BAA8B;0BACnB,0BAA0B;sBAC9B,0BAA0B;;;2BAGrB,8BAA8B;;;;;;;;;;qBAUpC,kBAAkB;;;;;;;;;;;;;;;;;;;;;yBAqBd,kBAAkB,IAAI,kBAAkB;;;;uBAI1C,kBAAkB;;;;wBAIjB,kBAAkB;2BACf,iBAAiB;;;;;;;2BAOjB,cAAc;wBACjB,kBAAkB;;;;;;;;;;;;yBAYjB,iBAAiB;0BAChB,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAmDhC,8BAA8B;wBACnB,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;CAyBrD,CAAC"}

package/dist/esm/textarea/textarea.template.html

@@ -0,0 +1,30 @@
+<f-template name="fluent-textarea" shadowrootmode="open" shadowrootdelegatesfocus>
+  <template>
+    {{styles}}
+    <label f-ref="{labelEl}" for="control" part="label">
+      <slot name="label" f-slotted="{labelSlottedNodes}"></slot>
+    </label>
+    <div class="root" part="root" f-ref="{rootEl}">
+      <textarea
+        f-ref="{controlEl}"
+        id="control"
+        class="control"
+        part="control"
+        ?required="{{required}}"
+        ?disabled="{{disabled}}"
+        ?readonly="{{readOnly}}"
+        ?spellcheck="{{spellcheck}}"
+        autocomplete="{{autocomplete}}"
+        maxlength="{{maxLength}}"
+        minlength="{{minLength}}"
+        placeholder="{{placeholder}}"
+        @change="{handleControlChange()}"
+        @select="{handleControlSelect()}"
+        @input="{handleControlInput()}"
+      ></textarea>
+    </div>
+    <div hidden>
+      <slot f-slotted="{defaultSlottedNodes}"></slot>
+    </div>
+  </template>
+</f-template>

package/dist/esm/textarea/textarea.template.js

@@ -10,7 +10,7 @@ export function textAreaTemplate() {
       <label ${ref('labelEl')} for="control" part="label">
         <slot name="label" ${slotted('labelSlottedNodes')}></slot>
       </label>
-      <div class="root" part="root">
+      <div class="root" part="root" ${ref('rootEl')}>
         <textarea
           ${ref('controlEl')}
           id="control"

package/dist/esm/textarea/textarea.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.template.js","sourceRoot":"","sources":["../../../src/textarea/textarea.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGvF;;;;GAIG;AACH,MAAM,UAAU,gBAAgB;IAC9B,OAAO,IAAI,CAAG;;eAED,GAAG,CAAC,SAAS,CAAC;6BACA,OAAO,CAAC,mBAAmB,CAAC;;;;YAI7C,GAAG,CAAC,WAAW,CAAC;;;;uBAIL,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;0BAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;uBACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;uBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;yBACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;qBACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;qBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;oBAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE;;;;gBAI/B,OAAO,CAAC,qBAAqB,CAAC;;;GAG3C,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAkC,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"textarea.template.js","sourceRoot":"","sources":["../../../src/textarea/textarea.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGvF;;;;GAIG;AACH,MAAM,UAAU,gBAAgB;IAC9B,OAAO,IAAI,CAAG;;eAED,GAAG,CAAC,SAAS,CAAC;6BACA,OAAO,CAAC,mBAAmB,CAAC;;sCAEnB,GAAG,CAAC,QAAQ,CAAC;;YAEvC,GAAG,CAAC,WAAW,CAAC;;;;uBAIL,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;0BAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;uBACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;uBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;yBACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;qBACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;qBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;oBAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE;;;;gBAI/B,OAAO,CAAC,qBAAqB,CAAC;;;GAG3C,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAkC,gBAAgB,EAAE,CAAC"}

package/dist/esm/theme/design-tokens.d.ts

@@ -93,6 +93,26 @@ export declare const colorNeutralForeground3BrandSelected = "var(--colorNeutralF
  * @public
  */
 export declare const colorNeutralForeground4 = "var(--colorNeutralForeground4)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground5 | `colorNeutralForeground5`} design token.
+ * @public
+ */
+export declare const colorNeutralForeground5 = "var(--colorNeutralForeground5)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground5Hover | `colorNeutralForeground5Hover`} design token.
+ * @public
+ */
+export declare const colorNeutralForeground5Hover = "var(--colorNeutralForeground5Hover)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground5Pressed | `colorNeutralForeground5Pressed`} design token.
+ * @public
+ */
+export declare const colorNeutralForeground5Pressed = "var(--colorNeutralForeground5Pressed)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground5Selected | `colorNeutralForeground5Selected`} design token.
+ * @public
+ */
+export declare const colorNeutralForeground5Selected = "var(--colorNeutralForeground5Selected)";
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundDisabled | `colorNeutralForegroundDisabled`} design token.
  * @public
@@ -378,11 +398,51 @@ export declare const colorNeutralBackground5Selected = "var(--colorNeutralBackgr
  * @public
  */
 export declare const colorNeutralBackground6 = "var(--colorNeutralBackground6)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground7 | `colorNeutralBackground7`} design token.
+ * @public
+ */
+export declare const colorNeutralBackground7 = "var(--colorNeutralBackground7)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground7Hover | `colorNeutralBackground7Hover`} design token.
+ * @public
+ */
+export declare const colorNeutralBackground7Hover = "var(--colorNeutralBackground7Hover)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground7Pressed | `colorNeutralBackground7Pressed`} design token.
+ * @public
+ */
+export declare const colorNeutralBackground7Pressed = "var(--colorNeutralBackground7Pressed)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground7Selected | `colorNeutralBackground7Selected`} design token.
+ * @public
+ */
+export declare const colorNeutralBackground7Selected = "var(--colorNeutralBackground7Selected)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground8 | `colorNeutralBackground8`} design token.
+ * @public
+ */
+export declare const colorNeutralBackground8 = "var(--colorNeutralBackground8)";
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInverted | `colorNeutralBackgroundInverted`} design token.
  * @public
  */
 export declare const colorNeutralBackgroundInverted = "var(--colorNeutralBackgroundInverted)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInvertedHover | `colorNeutralBackgroundInvertedHover`} design token.
+ * @public
+ */
+export declare const colorNeutralBackgroundInvertedHover = "var(--colorNeutralBackgroundInvertedHover)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInvertedPressed | `colorNeutralBackgroundInvertedPressed`} design token.
+ * @public
+ */
+export declare const colorNeutralBackgroundInvertedPressed = "var(--colorNeutralBackgroundInvertedPressed)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInvertedSelected | `colorNeutralBackgroundInvertedSelected`} design token.
+ * @public
+ */
+export declare const colorNeutralBackgroundInvertedSelected = "var(--colorNeutralBackgroundInvertedSelected)";
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundStatic | `colorNeutralBackgroundStatic`} design token.
  * @public
@@ -478,6 +538,11 @@ export declare const colorTransparentBackgroundSelected = "var(--colorTransparen
  * @public
  */
 export declare const colorNeutralBackgroundDisabled = "var(--colorNeutralBackgroundDisabled)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundDisabled2 | `colorNeutralBackgroundDisabled2`} design token.
+ * @public
+ */
+export declare const colorNeutralBackgroundDisabled2 = "var(--colorNeutralBackgroundDisabled2)";
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInvertedDisabled | `colorNeutralBackgroundInvertedDisabled`} design token.
  * @public
@@ -673,6 +738,26 @@ export declare const colorNeutralStroke2 = "var(--colorNeutralStroke2)";
  * @public
  */
 export declare const colorNeutralStroke3 = "var(--colorNeutralStroke3)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke4 | `colorNeutralStroke4`} design token.
+ * @public
+ */
+export declare const colorNeutralStroke4 = "var(--colorNeutralStroke4)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke4Hover | `colorNeutralStroke4Hover`} design token.
+ * @public
+ */
+export declare const colorNeutralStroke4Hover = "var(--colorNeutralStroke4Hover)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke4Pressed | `colorNeutralStroke4Pressed`} design token.
+ * @public
+ */
+export declare const colorNeutralStroke4Pressed = "var(--colorNeutralStroke4Pressed)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke4Selected | `colorNeutralStroke4Selected`} design token.
+ * @public
+ */
+export declare const colorNeutralStroke4Selected = "var(--colorNeutralStroke4Selected)";
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeSubtle | `colorNeutralStrokeSubtle`} design token.
  * @public
@@ -748,6 +833,11 @@ export declare const colorCompoundBrandStrokePressed = "var(--colorCompoundBrand
  * @public
  */
 export declare const colorNeutralStrokeDisabled = "var(--colorNeutralStrokeDisabled)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeDisabled2 | `colorNeutralStrokeDisabled2`} design token.
+ * @public
+ */
+export declare const colorNeutralStrokeDisabled2 = "var(--colorNeutralStrokeDisabled2)";
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeInvertedDisabled | `colorNeutralStrokeInvertedDisabled`} design token.
  * @public
@@ -1763,6 +1853,31 @@ export declare const borderRadiusLarge = "var(--borderRadiusLarge)";
  * @public
  */
 export declare const borderRadiusXLarge = "var(--borderRadiusXLarge)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius2XLarge | `borderRadius2XLarge`} design token.
+ * @public
+ */
+export declare const borderRadius2XLarge = "var(--borderRadius2XLarge)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius3XLarge | `borderRadius3XLarge`} design token.
+ * @public
+ */
+export declare const borderRadius3XLarge = "var(--borderRadius3XLarge)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius4XLarge | `borderRadius4XLarge`} design token.
+ * @public
+ */
+export declare const borderRadius4XLarge = "var(--borderRadius4XLarge)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius5XLarge | `borderRadius5XLarge`} design token.
+ * @public
+ */
+export declare const borderRadius5XLarge = "var(--borderRadius5XLarge)";
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius6XLarge | `borderRadius6XLarge`} design token.
+ * @public
+ */
+export declare const borderRadius6XLarge = "var(--borderRadius6XLarge)";
 /**
  * CSS custom property value for the {@link @fluentui/tokens#borderRadiusCircular | `borderRadiusCircular`} design token.
  * @public

package/dist/esm/theme/design-tokens.js

@@ -94,6 +94,26 @@ export const colorNeutralForeground3BrandSelected = 'var(--colorNeutralForegroun
  * @public
  */
 export const colorNeutralForeground4 = 'var(--colorNeutralForeground4)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground5 | `colorNeutralForeground5`} design token.
+ * @public
+ */
+export const colorNeutralForeground5 = 'var(--colorNeutralForeground5)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground5Hover | `colorNeutralForeground5Hover`} design token.
+ * @public
+ */
+export const colorNeutralForeground5Hover = 'var(--colorNeutralForeground5Hover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground5Pressed | `colorNeutralForeground5Pressed`} design token.
+ * @public
+ */
+export const colorNeutralForeground5Pressed = 'var(--colorNeutralForeground5Pressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground5Selected | `colorNeutralForeground5Selected`} design token.
+ * @public
+ */
+export const colorNeutralForeground5Selected = 'var(--colorNeutralForeground5Selected)';
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundDisabled | `colorNeutralForegroundDisabled`} design token.
  * @public
@@ -379,11 +399,51 @@ export const colorNeutralBackground5Selected = 'var(--colorNeutralBackground5Sel
  * @public
  */
 export const colorNeutralBackground6 = 'var(--colorNeutralBackground6)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground7 | `colorNeutralBackground7`} design token.
+ * @public
+ */
+export const colorNeutralBackground7 = 'var(--colorNeutralBackground7)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground7Hover | `colorNeutralBackground7Hover`} design token.
+ * @public
+ */
+export const colorNeutralBackground7Hover = 'var(--colorNeutralBackground7Hover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground7Pressed | `colorNeutralBackground7Pressed`} design token.
+ * @public
+ */
+export const colorNeutralBackground7Pressed = 'var(--colorNeutralBackground7Pressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground7Selected | `colorNeutralBackground7Selected`} design token.
+ * @public
+ */
+export const colorNeutralBackground7Selected = 'var(--colorNeutralBackground7Selected)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground8 | `colorNeutralBackground8`} design token.
+ * @public
+ */
+export const colorNeutralBackground8 = 'var(--colorNeutralBackground8)';
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInverted | `colorNeutralBackgroundInverted`} design token.
  * @public
  */
 export const colorNeutralBackgroundInverted = 'var(--colorNeutralBackgroundInverted)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInvertedHover | `colorNeutralBackgroundInvertedHover`} design token.
+ * @public
+ */
+export const colorNeutralBackgroundInvertedHover = 'var(--colorNeutralBackgroundInvertedHover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInvertedPressed | `colorNeutralBackgroundInvertedPressed`} design token.
+ * @public
+ */
+export const colorNeutralBackgroundInvertedPressed = 'var(--colorNeutralBackgroundInvertedPressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInvertedSelected | `colorNeutralBackgroundInvertedSelected`} design token.
+ * @public
+ */
+export const colorNeutralBackgroundInvertedSelected = 'var(--colorNeutralBackgroundInvertedSelected)';
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundStatic | `colorNeutralBackgroundStatic`} design token.
  * @public
@@ -479,6 +539,11 @@ export const colorTransparentBackgroundSelected = 'var(--colorTransparentBackgro
  * @public
  */
 export const colorNeutralBackgroundDisabled = 'var(--colorNeutralBackgroundDisabled)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundDisabled2 | `colorNeutralBackgroundDisabled2`} design token.
+ * @public
+ */
+export const colorNeutralBackgroundDisabled2 = 'var(--colorNeutralBackgroundDisabled2)';
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInvertedDisabled | `colorNeutralBackgroundInvertedDisabled`} design token.
  * @public
@@ -674,6 +739,26 @@ export const colorNeutralStroke2 = 'var(--colorNeutralStroke2)';
  * @public
  */
 export const colorNeutralStroke3 = 'var(--colorNeutralStroke3)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke4 | `colorNeutralStroke4`} design token.
+ * @public
+ */
+export const colorNeutralStroke4 = 'var(--colorNeutralStroke4)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke4Hover | `colorNeutralStroke4Hover`} design token.
+ * @public
+ */
+export const colorNeutralStroke4Hover = 'var(--colorNeutralStroke4Hover)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke4Pressed | `colorNeutralStroke4Pressed`} design token.
+ * @public
+ */
+export const colorNeutralStroke4Pressed = 'var(--colorNeutralStroke4Pressed)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStroke4Selected | `colorNeutralStroke4Selected`} design token.
+ * @public
+ */
+export const colorNeutralStroke4Selected = 'var(--colorNeutralStroke4Selected)';
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeSubtle | `colorNeutralStrokeSubtle`} design token.
  * @public
@@ -749,6 +834,11 @@ export const colorCompoundBrandStrokePressed = 'var(--colorCompoundBrandStrokePr
  * @public
  */
 export const colorNeutralStrokeDisabled = 'var(--colorNeutralStrokeDisabled)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeDisabled2 | `colorNeutralStrokeDisabled2`} design token.
+ * @public
+ */
+export const colorNeutralStrokeDisabled2 = 'var(--colorNeutralStrokeDisabled2)';
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeInvertedDisabled | `colorNeutralStrokeInvertedDisabled`} design token.
  * @public
@@ -1764,6 +1854,31 @@ export const borderRadiusLarge = 'var(--borderRadiusLarge)';
  * @public
  */
 export const borderRadiusXLarge = 'var(--borderRadiusXLarge)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius2XLarge | `borderRadius2XLarge`} design token.
+ * @public
+ */
+export const borderRadius2XLarge = 'var(--borderRadius2XLarge)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius3XLarge | `borderRadius3XLarge`} design token.
+ * @public
+ */
+export const borderRadius3XLarge = 'var(--borderRadius3XLarge)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius4XLarge | `borderRadius4XLarge`} design token.
+ * @public
+ */
+export const borderRadius4XLarge = 'var(--borderRadius4XLarge)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius5XLarge | `borderRadius5XLarge`} design token.
+ * @public
+ */
+export const borderRadius5XLarge = 'var(--borderRadius5XLarge)';
+/**
+ * CSS custom property value for the {@link @fluentui/tokens#borderRadius6XLarge | `borderRadius6XLarge`} design token.
+ * @public
+ */
+export const borderRadius6XLarge = 'var(--borderRadius6XLarge)';
 /**
  * CSS custom property value for the {@link @fluentui/tokens#borderRadiusCircular | `borderRadiusCircular`} design token.
  * @public