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

package/dist/esm/styles/states/index.js

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