@fluentui/web-components 3.0.0-beta.70 → 3.0.0-beta.71

package/dist/dts/styles/states/index.d.ts

@@ -1,256 +1,600 @@
 /**
- * Selector for the `checked` state.
+ * Selector for the `align-end` state.
  * @public
  */
-export declare const checkedState: import("@microsoft/fast-element").CSSDirective;
+export declare const alignEndState: ":state(align-end)" | "[state--align-end]";
 /**
- * Selector for the `disabled` state.
+ * Selector for the `align-start` state.
  * @public
  */
-export declare const disabledState: import("@microsoft/fast-element").CSSDirective;
+export declare const alignStartState: ":state(align-start)" | "[state--align-start]";
 /**
- * Selector for the `filled-lighter` state.
+ * Selector for the `anchor` state.
  * @public
  */
-export declare const filledLighterState: import("@microsoft/fast-element").CSSDirective;
+export declare const anchorState: ":state(anchor)" | "[state--anchor]";
 /**
- * Selector for the `filled-darker` state.
+ * Selector for the `auto-resize` state.
  * @public
  */
-export declare const filledDarkerState: import("@microsoft/fast-element").CSSDirective;
+export declare const autoResizeState: ":state(auto-resize)" | "[state--auto-resize]";
 /**
- * Selector for the `ghost` state.
+ * Selector for the `bad-input` state.
  * @public
  */
-export declare const ghostState: import("@microsoft/fast-element").CSSDirective;
+export declare const badInputState: ":state(bad-input)" | "[state--bad-input]";
 /**
- * Selector for the `inverted` state.
+ * Selector for the `beige` state.
  * @public
  */
-export declare const invertedState: import("@microsoft/fast-element").CSSDirective;
+export declare const beigeState: ":state(beige)" | "[state--beige]";
 /**
- * Selector for the `primary` state.
+ * Selector for the `block` state.
  * @public
  */
-export declare const primaryState: import("@microsoft/fast-element").CSSDirective;
+export declare const blockState: ":state(block)" | "[state--block]";
 /**
- * Selector for the `outline` state.
+ * Selector for the `blue` state.
  * @public
  */
-export declare const outlineState: import("@microsoft/fast-element").CSSDirective;
+export declare const blueState: ":state(blue)" | "[state--blue]";
 /**
- * Selector for the `strong` state.
+ * Selector for the `bold` state.
  * @public
  */
-export declare const strongState: import("@microsoft/fast-element").CSSDirective;
+export declare const boldState: ":state(bold)" | "[state--bold]";
 /**
- * Selector for the `subtle` state.
+ * Selector for the `bordered` state.
  * @public
  */
-export declare const subtleState: import("@microsoft/fast-element").CSSDirective;
+export declare const borderedState: ":state(bordered)" | "[state--bordered]";
 /**
- * Selector for the `tint` state.
+ * Selector for the `brand` state.
  * @public
  */
-export declare const tintState: import("@microsoft/fast-element").CSSDirective;
+export declare const brandState: ":state(brand)" | "[state--brand]";
 /**
- * Selector for the `underline` state.
+ * Selector for the `brass` state.
  * @public
  */
-export declare const underlineState: import("@microsoft/fast-element").CSSDirective;
+export declare const brassState: ":state(brass)" | "[state--brass]";
 /**
- * Selector for the `transparent` state.
+ * Selector for the `brown` state.
  * @public
  */
-export declare const transparentState: import("@microsoft/fast-element").CSSDirective;
+export declare const brownState: ":state(brown)" | "[state--brown]";
+/**
+ * Selector for the `center` state.
+ * @public
+ */
+export declare const centerState: ":state(center)" | "[state--center]";
+/**
+ * Selector for the `checked` state.
+ * @public
+ */
+export declare const checkedState: ":state(checked)" | "[state--checked]";
 /**
  * Selector for the `circular` state.
  * @public
  */
-export declare const circularState: import("@microsoft/fast-element").CSSDirective;
+export declare const circularState: ":state(circular)" | "[state--circular]";
 /**
- * Selector for the `rounded` state.
+ * Selector for the `cornflower` state.
  * @public
  */
-export declare const roundedState: import("@microsoft/fast-element").CSSDirective;
+export declare const cornflowerState: ":state(cornflower)" | "[state--cornflower]";
 /**
- * Selector for the `square` state.
+ * Selector for the `cranberry` state.
  * @public
  */
-export declare const squareState: import("@microsoft/fast-element").CSSDirective;
+export declare const cranberryState: ":state(cranberry)" | "[state--cranberry]";
 /**
- * Selector for the `tiny` state.
+ * Selector for the `custom-error` state.
  * @public
  */
-export declare const tinyState: import("@microsoft/fast-element").CSSDirective;
+export declare const customErrorState: ":state(custom-error)" | "[state--custom-error]";
 /**
- * Selector for the `extra-small` state.
+ * Selector for the `danger` state.
  * @public
  */
-export declare const extraSmallState: import("@microsoft/fast-element").CSSDirective;
+export declare const dangerState: ":state(danger)" | "[state--danger]";
 /**
- * Selector for the `small` state.
+ * Selector for the `dark-green` state.
  * @public
  */
-export declare const smallState: import("@microsoft/fast-element").CSSDirective;
+export declare const darkGreenState: ":state(dark-green)" | "[state--dark-green]";
 /**
- * Selector for the `medium` state.
+ * Selector for the `dark-red` state.
  * @public
  */
-export declare const mediumState: import("@microsoft/fast-element").CSSDirective;
+export declare const darkRedState: ":state(dark-red)" | "[state--dark-red]";
 /**
- * Selector for the `large` state.
+ * Selector for the `disabled` state.
+ * @public
+ */
+export declare const disabledState: ":state(disabled)" | "[state--disabled]";
+/**
+ * Selector for the `display-shadow` state.
+ * @public
+ */
+export declare const displayShadowState: ":state(display-shadow)" | "[state--display-shadow]";
+/**
+ * Selector for the `dot` state.
+ * @public
+ */
+export declare const dotState: ":state(dot)" | "[state--dot]";
+/**
+ * Selector for the `end` state.
+ * @public
+ */
+export declare const endState: ":state(end)" | "[state--end]";
+/**
+ * Selector for the `error` state.
  * @public
  */
-export declare const largeState: import("@microsoft/fast-element").CSSDirective;
+export declare const errorState: ":state(error)" | "[state--error]";
+/**
+ * Selector for the `expanded` state.
+ * @public
+ */
+export declare const expandedState: ":state(expanded)" | "[state--expanded]";
 /**
  * Selector for the `extra-large` state.
  * @public
  */
-export declare const extraLargeState: import("@microsoft/fast-element").CSSDirective;
+export declare const extraLargeState: ":state(extra-large)" | "[state--extra-large]";
 /**
- * Selector for the `huge` state.
+ * Selector for the `extra-small` state.
  * @public
  */
-export declare const hugeState: import("@microsoft/fast-element").CSSDirective;
+export declare const extraSmallState: ":state(extra-small)" | "[state--extra-small]";
 /**
- * Selector for the `alignment` start state.
+ * Selector for the `filled-darker` state.
  * @public
  */
-export declare const alignStartState: import("@microsoft/fast-element").CSSDirective;
+export declare const filledDarkerState: ":state(filled-darker)" | "[state--filled-darker]";
 /**
- * Selector for the `alignment` end state.
+ * Selector for the `filled-lighter` state.
  * @public
  */
-export declare const alignEndState: import("@microsoft/fast-element").CSSDirective;
+export declare const filledLighterState: ":state(filled-lighter)" | "[state--filled-lighter]";
 /**
- * Selector for the `inset` state.
+ * Selector for the `fit-center` state.
  * @public
  */
-export declare const insetState: import("@microsoft/fast-element").CSSDirective;
+export declare const fitCenterState: ":state(fit-center)" | "[state--fit-center]";
 /**
- * Selector for the `iconOnly` state.
+ * Selector for the `fit-contain` state.
  * @public
  */
-export declare const iconOnlyState: import("@microsoft/fast-element").CSSDirective;
+export declare const fitContainState: ":state(fit-contain)" | "[state--fit-contain]";
 /**
- * Selector for the `pressed` state.
+ * Selector for the `fit-cover` state.
  * @public
  */
-export declare const pressedState: import("@microsoft/fast-element").CSSDirective;
+export declare const fitCoverState: ":state(fit-cover)" | "[state--fit-cover]";
 /**
- * Selector for the `brand` state.
+ * Selector for the `fit-none` state.
  * @public
  */
-export declare const brandState: import("@microsoft/fast-element").CSSDirective;
+export declare const fitNoneState: ":state(fit-none)" | "[state--fit-none]";
 /**
- * Selector for the `error` state.
+ * Selector for the `focus-visible` state.
  * @public
  */
-export declare const errorState: import("@microsoft/fast-element").CSSDirective;
+export declare const focusVisibleState: ":state(focus-visible)" | "[state--focus-visible]";
 /**
- * Selector for the `danger` state.
+ * Selector for the `forest` state.
+ * @public
+ */
+export declare const forestState: ":state(forest)" | "[state--forest]";
+/**
+ * Selector for the `ghost` state.
+ * @public
+ */
+export declare const ghostState: ":state(ghost)" | "[state--ghost]";
+/**
+ * Selector for the `gold` state.
+ * @public
+ */
+export declare const goldState: ":state(gold)" | "[state--gold]";
+/**
+ * Selector for the `grape` state.
+ * @public
+ */
+export declare const grapeState: ":state(grape)" | "[state--grape]";
+/**
+ * Selector for the `has-message` state.
+ * @public
+ */
+export declare const hasMessageState: ":state(has-message)" | "[state--has-message]";
+/**
+ * Selector for the `huge` state.
+ * @public
+ */
+export declare const hugeState: ":state(huge)" | "[state--huge]";
+/**
+ * Selector for the `icon` state.
  * @public
  */
-export declare const dangerState: import("@microsoft/fast-element").CSSDirective;
+export declare const iconOnlyState: ":state(icon)" | "[state--icon]";
 /**
  * Selector for the `important` state.
  * @public
  */
-export declare const importantState: import("@microsoft/fast-element").CSSDirective;
+export declare const importantState: ":state(important)" | "[state--important]";
+/**
+ * Selector for the `indeterminate` state.
+ * @public
+ */
+export declare const indeterminateState: ":state(indeterminate)" | "[state--indeterminate]";
 /**
  * Selector for the `informative` state.
  * @public
  */
-export declare const informativeState: import("@microsoft/fast-element").CSSDirective;
+export declare const informativeState: ":state(informative)" | "[state--informative]";
+/**
+ * Selector for the `inline` state.
+ * @public
+ */
+export declare const inlineState: ":state(inline)" | "[state--inline]";
+/**
+ * Selector for the `inset` state.
+ * @public
+ */
+export declare const insetState: ":state(inset)" | "[state--inset]";
+/**
+ * Selector for the `inverted` state.
+ * @public
+ */
+export declare const invertedState: ":state(inverted)" | "[state--inverted]";
+/**
+ * Selector for the `italic` state.
+ * @public
+ */
+export declare const italicState: ":state(italic)" | "[state--italic]";
+/**
+ * Selector for the `justify` state.
+ * @public
+ */
+export declare const justifyState: ":state(justify)" | "[state--justify]";
+/**
+ * Selector for the `large` state.
+ * @public
+ */
+export declare const largeState: ":state(large)" | "[state--large]";
+/**
+ * Selector for the `lavender` state.
+ * @public
+ */
+export declare const lavenderState: ":state(lavender)" | "[state--lavender]";
+/**
+ * Selector for the `light-teal` state.
+ * @public
+ */
+export declare const lightTealState: ":state(light-teal)" | "[state--light-teal]";
+/**
+ * Selector for the `lilac` state.
+ * @public
+ */
+export declare const lilacState: ":state(lilac)" | "[state--lilac]";
+/**
+ * Selector for the `magenta` state.
+ * @public
+ */
+export declare const magentaState: ":state(magenta)" | "[state--magenta]";
 /**
  * Selector for the `marigold` state.
  * @public
  */
-export declare const marigoldState: import("@microsoft/fast-element").CSSDirective;
+export declare const marigoldState: ":state(marigold)" | "[state--marigold]";
+/**
+ * Selector for the `medium` state.
+ * @public
+ */
+export declare const mediumState: ":state(medium)" | "[state--medium]";
+/**
+ * Selector for the `mink` state.
+ * @public
+ */
+export declare const minkState: ":state(mink)" | "[state--mink]";
+/**
+ * Selector for the `monospace` state.
+ * @public
+ */
+export declare const monospaceState: ":state(monospace)" | "[state--monospace]";
+/**
+ * Selector for the `multiline` state.
+ * @public
+ */
+export declare const multiLineState: ":state(multiline)" | "[state--multiline]";
+/**
+ * Selector for the `navy` state.
+ * @public
+ */
+export declare const navyState: ":state(navy)" | "[state--navy]";
 /**
  * Selector for the `neutral` state.
  * @public
  */
-export declare const neutralState: import("@microsoft/fast-element").CSSDirective;
+export declare const neutralState: ":state(neutral)" | "[state--neutral]";
 /**
- * Selector for the `severe` state.
+ * Selector for the `nowrap` state.
  * @public
  */
-export declare const severeState: import("@microsoft/fast-element").CSSDirective;
+export declare const nowrapState: ":state(nowrap)" | "[state--nowrap]";
 /**
- * Selector for the `success` state.
+ * Selector for the `numeric` state.
  * @public
  */
-export declare const successState: import("@microsoft/fast-element").CSSDirective;
+export declare const numericState: ":state(numeric)" | "[state--numeric]";
 /**
- * Selector for the `warning` state.
+ * Selector for the `outline` state.
  * @public
  */
-export declare const warningState: import("@microsoft/fast-element").CSSDirective;
+export declare const outlineState: ":state(outline)" | "[state--outline]";
 /**
- * Selector for the `vertical` state.
+ * Selector for the `pattern-mismatch` state.
  * @public
  */
-export declare const verticalState: import("@microsoft/fast-element").CSSDirective;
+export declare const patternMismatchState: ":state(pattern-mismatch)" | "[state--pattern-mismatch]";
 /**
- * Selector for the `horizontal` state.
+ * Selector for the `peach` state.
  * @public
  */
-export declare const horizontalState: import("@microsoft/fast-element").CSSDirective;
+export declare const peachState: ":state(peach)" | "[state--peach]";
 /**
- * Selector for the `singleline` state.
+ * Selector for the `pink` state.
  * @public
  */
-export declare const singleLineState: import("@microsoft/fast-element").CSSDirective;
+export declare const pinkState: ":state(pink)" | "[state--pink]";
 /**
- * Selector for the `multiline` state.
+ * Selector for the `platinum` state.
  * @public
  */
-export declare const multiLineState: import("@microsoft/fast-element").CSSDirective;
+export declare const platinumState: ":state(platinum)" | "[state--platinum]";
 /**
- * Selector for the `expanded` state.
+ * Selector for the `plum` state.
  * @public
  */
-export declare const expandedState: import("@microsoft/fast-element").CSSDirective;
+export declare const plumState: ":state(plum)" | "[state--plum]";
 /**
- * Selector for the `block` state.
+ * Selector for the `pressed` state.
+ * @public
+ */
+export declare const pressedState: ":state(pressed)" | "[state--pressed]";
+/**
+ * Selector for the `primary` state.
+ * @public
+ */
+export declare const primaryState: ":state(primary)" | "[state--primary]";
+/**
+ * Selector for the `pumpkin` state.
+ * @public
+ */
+export declare const pumpkinState: ":state(pumpkin)" | "[state--pumpkin]";
+/**
+ * Selector for the `purple` state.
+ * @public
+ */
+export declare const purpleState: ":state(purple)" | "[state--purple]";
+/**
+ * Selector for the `range-overflow` state.
  * @public
  */
-export declare const blockState: import("@microsoft/fast-element").CSSDirective;
+export declare const rangeOverflowState: ":state(range-overflow)" | "[state--range-overflow]";
 /**
- * Selector for the `resize` state. This indicates the element is resizable.
+ * Selector for the `range-underflow` state.
  * @public
  */
-export declare const resizeState: import("@microsoft/fast-element").CSSDirective;
+export declare const rangeUnderflowState: ":state(range-underflow)" | "[state--range-underflow]";
+/**
+ * Selector for the `red` state.
+ * @public
+ */
+export declare const redState: ":state(red)" | "[state--red]";
+/**
+ * Selector for the `resize-both` state.
+ * @public
+ */
+export declare const resizeBothState: ":state(resize-both)" | "[state--resize-both]";
 /**
  * Selector for the `resize-horizontal` state.
  * @public
  */
-export declare const resizeHorizontalState: import("@microsoft/fast-element").CSSDirective;
+export declare const resizeHorizontalState: ":state(resize-horizontal)" | "[state--resize-horizontal]";
 /**
  * Selector for the `resize-vertical` state.
  * @public
  */
-export declare const resizeVerticalState: import("@microsoft/fast-element").CSSDirective;
+export declare const resizeVerticalState: ":state(resize-vertical)" | "[state--resize-vertical]";
 /**
- * Selector for the `resize-both` state.
+ * Selector for the `rounded` state.
  * @public
  */
-export declare const resizeBothState: import("@microsoft/fast-element").CSSDirective;
+export declare const roundedState: ":state(rounded)" | "[state--rounded]";
 /**
- * Selector for the `auto-resize` state.
+ * Selector for the `royal-blue` state.
  * @public
  */
-export declare const autoResizeState: import("@microsoft/fast-element").CSSDirective;
+export declare const royalBlueState: ":state(royal-blue)" | "[state--royal-blue]";
 /**
- * Selector for the `display-shadow` state.
+ * Selector for the `seafoam` state.
+ * @public
+ */
+export declare const seafoamState: ":state(seafoam)" | "[state--seafoam]";
+/**
+ * Selector for the `semibold` state.
+ * @public
+ */
+export declare const semiboldState: ":state(semibold)" | "[state--semibold]";
+/**
+ * Selector for the `severe` state.
+ * @public
+ */
+export declare const severeState: ":state(severe)" | "[state--severe]";
+/**
+ * Selector for the `shadow` state.
+ * @public
+ */
+export declare const shadowState: ":state(shadow)" | "[state--shadow]";
+/**
+ * Selector for the `size1000` state.
+ * @public
+ */
+export declare const size1000State: ":state(size-1000)" | "[state--size-1000]";
+/**
+ * Selector for the `size100` state.
+ * @public
+ */
+export declare const size100State: ":state(size-100)" | "[state--size-100]";
+/**
+ * Selector for the `size200` state.
+ * @public
+ */
+export declare const size200State: ":state(size-200)" | "[state--size-200]";
+/**
+ * Selector for the `size400` state.
+ * @public
+ */
+export declare const size400State: ":state(size-400)" | "[state--size-400]";
+/**
+ * Selector for the `size500` state.
+ * @public
+ */
+export declare const size500State: ":state(size-500)" | "[state--size-500]";
+/**
+ * Selector for the `size600` state.
+ * @public
+ */
+export declare const size600State: ":state(size-600)" | "[state--size-600]";
+/**
+ * Selector for the `size700` state.
+ * @public
+ */
+export declare const size700State: ":state(size-700)" | "[state--size-700]";
+/**
+ * Selector for the `size800` state.
+ * @public
+ */
+export declare const size800State: ":state(size-800)" | "[state--size-800]";
+/**
+ * Selector for the `size900` state.
+ * @public
+ */
+export declare const size900State: ":state(size-900)" | "[state--size-900]";
+/**
+ * Selector for the `small` state.
+ * @public
+ */
+export declare const smallState: ":state(small)" | "[state--small]";
+/**
+ * Selector for the `square` state.
  * @public
  */
-export declare const displayShadowState: import("@microsoft/fast-element").CSSDirective;
-export declare const userInvalidState: import("@microsoft/fast-element").CSSDirective;
+export declare const squareState: ":state(square)" | "[state--square]";
 /**
- * Selector for the `user-valid` state.
+ * Selector for the `steel` state.
+ * @public
+ */
+export declare const steelState: ":state(steel)" | "[state--steel]";
+/**
+ * Selector for the `step-mismatch` state.
+ * @public
+ */
+export declare const stepMismatchState: ":state(step-mismatch)" | "[state--step-mismatch]";
+/**
+ * Selector for the `strikethrough` state.
+ * @public
+ */
+export declare const strikethroughState: ":state(strikethrough)" | "[state--strikethrough]";
+/**
+ * Selector for the `strong` state.
+ * @public
+ */
+export declare const strongState: ":state(strong)" | "[state--strong]";
+/**
+ * Selector for the `submenu` state.
+ * @public
+ */
+export declare const submenuState: ":state(submenu)" | "[state--submenu]";
+/**
+ * Selector for the `subtle` state.
+ * @public
+ */
+export declare const subtleState: ":state(subtle)" | "[state--subtle]";
+/**
+ * Selector for the `success` state.
+ * @public
+ */
+export declare const successState: ":state(success)" | "[state--success]";
+/**
+ * Selector for the `teal` state.
+ * @public
+ */
+export declare const tealState: ":state(teal)" | "[state--teal]";
+/**
+ * Selector for the `tint` state.
+ * @public
+ */
+export declare const tintState: ":state(tint)" | "[state--tint]";
+/**
+ * Selector for the `tiny` state.
+ * @public
+ */
+export declare const tinyState: ":state(tiny)" | "[state--tiny]";
+/**
+ * Selector for the `too-long` state.
+ * @public
+ */
+export declare const tooLongState: ":state(too-long)" | "[state--too-long]";
+/**
+ * Selector for the `too-short` state.
+ * @public
+ */
+export declare const tooShortState: ":state(too-short)" | "[state--too-short]";
+/**
+ * Selector for the `transparent` state.
+ * @public
+ */
+export declare const transparentState: ":state(transparent)" | "[state--transparent]";
+/**
+ * Selector for the `truncate` state.
+ * @public
+ */
+export declare const truncateState: ":state(truncate)" | "[state--truncate]";
+/**
+ * Selector for the `type-mismatch` state.
+ * @public
+ */
+export declare const typeMismatchState: ":state(type-mismatch)" | "[state--type-mismatch]";
+/**
+ * Selector for the `underline` state.
+ * @public
+ */
+export declare const underlineState: ":state(underline)" | "[state--underline]";
+/**
+ * Selector for the `user-invalid` state.
+ * @public
+ */
+export declare const userInvalidState: ":state(user-invalid)" | "[state--user-invalid]";
+/**
+ * Selector for the `valid` state.
+ * @public
+ */
+export declare const validState: ":state(valid)" | "[state--valid]";
+/**
+ * Selector for the `value-missing` state.
+ * @public
+ */
+export declare const valueMissingState: ":state(value-missing)" | "[state--value-missing]";
+/**
+ * Selector for the `vertical` state.
+ * @public
+ */
+export declare const verticalState: ":state(vertical)" | "[state--vertical]";
+/**
+ * Selector for the `warning` state.
  * @public
  */
-export declare const userValidState: import("@microsoft/fast-element").CSSDirective;
+export declare const warningState: ":state(warning)" | "[state--warning]";