@fluentui/web-components 3.0.0-beta.89 → 3.0.0-beta.90

package/dist/dts/spinner/spinner.d.ts

@@ -15,12 +15,6 @@ export declare class Spinner extends BaseSpinner {
      * HTML Attribute: size
      */
     size?: SpinnerSize;
-    /**
-     * Handles changes to size attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    sizeChanged(prev: SpinnerSize | undefined, next: SpinnerSize | undefined): void;
     /**
      * The appearance of the spinner
      * @public
@@ -28,10 +22,4 @@ export declare class Spinner extends BaseSpinner {
      * HTML Attribute: appearance
      */
     appearance?: SpinnerAppearance;
-    /**
-     * Handles changes to appearance attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    appearanceChanged(prev: SpinnerAppearance | undefined, next: SpinnerAppearance | undefined): void;
 }

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

@@ -3,116 +3,21 @@
  * @public
  */
 export declare const activeState: ":state(active)" | "[state--active]";
-/**
- * Selector for the `align-end` state.
- * @public
- */
-export declare const alignEndState: ":state(align-end)" | "[state--align-end]";
-/**
- * Selector for the `align-start` state.
- * @public
- */
-export declare const alignStartState: ":state(align-start)" | "[state--align-start]";
-/**
- * Selector for the `anchor` state.
- * @public
- */
-export declare const anchorState: ":state(anchor)" | "[state--anchor]";
-/**
- * Selector for the `auto-resize` state.
- * @public
- */
-export declare const autoResizeState: ":state(auto-resize)" | "[state--auto-resize]";
 /**
  * Selector for the `bad-input` state.
  * @public
  */
 export declare const badInputState: ":state(bad-input)" | "[state--bad-input]";
-/**
- * Selector for the `beige` state.
- * @public
- */
-export declare const beigeState: ":state(beige)" | "[state--beige]";
-/**
- * Selector for the `block` state.
- * @public
- */
-export declare const blockState: ":state(block)" | "[state--block]";
-/**
- * Selector for the `blue` state.
- * @public
- */
-export declare const blueState: ":state(blue)" | "[state--blue]";
-/**
- * Selector for the `bold` state.
- * @public
- */
-export declare const boldState: ":state(bold)" | "[state--bold]";
-/**
- * Selector for the `bordered` state.
- * @public
- */
-export declare const borderedState: ":state(bordered)" | "[state--bordered]";
-/**
- * Selector for the `brand` state.
- * @public
- */
-export declare const brandState: ":state(brand)" | "[state--brand]";
-/**
- * Selector for the `brass` state.
- * @public
- */
-export declare const brassState: ":state(brass)" | "[state--brass]";
-/**
- * Selector for the `brown` state.
- * @public
- */
-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: ":state(circular)" | "[state--circular]";
-/**
- * Selector for the `cornflower` state.
- * @public
- */
-export declare const cornflowerState: ":state(cornflower)" | "[state--cornflower]";
-/**
- * Selector for the `cranberry` state.
- * @public
- */
-export declare const cranberryState: ":state(cranberry)" | "[state--cranberry]";
 /**
  * Selector for the `custom-error` state.
  * @public
  */
 export declare const customErrorState: ":state(custom-error)" | "[state--custom-error]";
-/**
- * Selector for the `danger` state.
- * @public
- */
-export declare const dangerState: ":state(danger)" | "[state--danger]";
-/**
- * Selector for the `dark-green` state.
- * @public
- */
-export declare const darkGreenState: ":state(dark-green)" | "[state--dark-green]";
-/**
- * Selector for the `dark-red` state.
- * @public
- */
-export declare const darkRedState: ":state(dark-red)" | "[state--dark-red]";
 /**
  * Selector for the `description` state.
  */
@@ -122,71 +27,11 @@ export declare const descriptionState: ":state(description)" | "[state--descript
  * @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 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: ":state(extra-large)" | "[state--extra-large]";
-/**
- * Selector for the `extra-small` state.
- * @public
- */
-export declare const extraSmallState: ":state(extra-small)" | "[state--extra-small]";
-/**
- * Selector for the `filled-darker` state.
- * @public
- */
-export declare const filledDarkerState: ":state(filled-darker)" | "[state--filled-darker]";
-/**
- * Selector for the `filled-lighter` state.
- * @public
- */
-export declare const filledLighterState: ":state(filled-lighter)" | "[state--filled-lighter]";
-/**
- * Selector for the `fit-center` state.
- * @public
- */
-export declare const fitCenterState: ":state(fit-center)" | "[state--fit-center]";
-/**
- * Selector for the `fit-contain` state.
- * @public
- */
-export declare const fitContainState: ":state(fit-contain)" | "[state--fit-contain]";
-/**
- * Selector for the `fit-cover` state.
- * @public
- */
-export declare const fitCoverState: ":state(fit-cover)" | "[state--fit-cover]";
-/**
- * Selector for the `fit-none` state.
- * @public
- */
-export declare const fitNoneState: ":state(fit-none)" | "[state--fit-none]";
 /**
  * Selector for the `flip-block` state.
  * @public
@@ -197,216 +42,41 @@ export declare const flipBlockState: ":state(flip-block)" | "[state--flip-block]
  * @public
  */
 export declare const focusVisibleState: ":state(focus-visible)" | "[state--focus-visible]";
-/**
- * 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 iconOnlyState: ":state(icon)" | "[state--icon]";
-/**
- * Selector for the `important` state.
- * @public
- */
-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: ":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: ":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 `multiselect` state.
  * @public
  */
 export declare const multipleState: ":state(multiple)" | "[state--multiple]";
-/**
- * Selector for the `navy` state.
- * @public
- */
-export declare const navyState: ":state(navy)" | "[state--navy]";
-/**
- * Selector for the `neutral` state.
- * @public
- */
-export declare const neutralState: ":state(neutral)" | "[state--neutral]";
-/**
- * Selector for the `nowrap` state.
- * @public
- */
-export declare const nowrapState: ":state(nowrap)" | "[state--nowrap]";
-/**
- * Selector for the `numeric` state.
- * @public
- */
-export declare const numericState: ":state(numeric)" | "[state--numeric]";
 /**
  * Selector for the `open` state.
  * @public
  */
 export declare const openState: ":state(open)" | "[state--open]";
-/**
- * Selector for the `outline` state.
- * @public
- */
-export declare const outlineState: ":state(outline)" | "[state--outline]";
 /**
  * Selector for the `pattern-mismatch` state.
  * @public
  */
 export declare const patternMismatchState: ":state(pattern-mismatch)" | "[state--pattern-mismatch]";
-/**
- * Selector for the `peach` state.
- * @public
- */
-export declare const peachState: ":state(peach)" | "[state--peach]";
-/**
- * Selector for the `pink` state.
- * @public
- */
-export declare const pinkState: ":state(pink)" | "[state--pink]";
 /**
  * Selector for the `placeholder-shown` state.
  * @public
  */
 export declare const placeholderShownState: ":state(placeholder-shown)" | "[state--placeholder-shown]";
-/**
- * Selector for the `platinum` state.
- * @public
- */
-export declare const platinumState: ":state(platinum)" | "[state--platinum]";
-/**
- * Selector for the `plum` state.
- * @public
- */
-export declare const plumState: ":state(plum)" | "[state--plum]";
 /**
  * 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
@@ -417,166 +87,21 @@ export declare const rangeOverflowState: ":state(range-overflow)" | "[state--ran
  * @public
  */
 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: ":state(resize-horizontal)" | "[state--resize-horizontal]";
-/**
- * Selector for the `resize-vertical` state.
- * @public
- */
-export declare const resizeVerticalState: ":state(resize-vertical)" | "[state--resize-vertical]";
-/**
- * Selector for the `rounded` state.
- * @public
- */
-export declare const roundedState: ":state(rounded)" | "[state--rounded]";
-/**
- * Selector for the `royal-blue` state.
- * @public
- */
-export declare const royalBlueState: ":state(royal-blue)" | "[state--royal-blue]";
-/**
- * Selector for the `seafoam` state.
- * @public
- */
-export declare const seafoamState: ":state(seafoam)" | "[state--seafoam]";
 /**
  * Selector for the `selected` state.
  * @public
  */
 export declare const selectedState: ":state(selected)" | "[state--selected]";
-/**
- * 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 squareState: ":state(square)" | "[state--square]";
-/**
- * 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
@@ -587,26 +112,11 @@ export declare const tooLongState: ":state(too-long)" | "[state--too-long]";
  * @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
@@ -622,13 +132,3 @@ export declare const validState: ":state(valid)" | "[state--valid]";
  * @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 warningState: ":state(warning)" | "[state--warning]";

package/dist/dts/tablist/tablist.d.ts

@@ -30,20 +30,12 @@ export declare class Tablist extends BaseTablist {
      * There are two modes of appearance: transparent and subtle.
      */
     appearance?: TablistAppearance;
-    /**
-     * @internal
-     */
-    protected appearanceChanged(prev: TablistAppearance, next: TablistAppearance): void;
     /**
      * size
      * defaults to medium.
      * Used to set the size of all the tab controls, which effects text size and margins. Three sizes: small, medium and large.
      */
     size?: TablistSize;
-    /**
-     * @internal
-     */
-    protected sizeChanged(prev: TablistSize, next: TablistSize): void;
     /**
      * calculateAnimationProperties
      *

package/dist/dts/text/text.d.ts

@@ -70,12 +70,6 @@ export declare class Text extends FASTElement {
      *
      */
     size?: TextSize;
-    /**
-     * Handles changes to size attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    sizeChanged(prev: TextSize | undefined, next: TextSize | undefined): void;
     /**
      * THe Text font
      *
@@ -84,12 +78,6 @@ export declare class Text extends FASTElement {
      * HTML Attribute: font
      */
     font?: TextFont;
-    /**
-     * Handles changes to font attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    fontChanged(prev: TextFont | undefined, next: TextFont | undefined): void;
     /**
      * The Text weight
      *
@@ -99,32 +87,11 @@ export declare class Text extends FASTElement {
      */
     weight?: TextWeight;
     /**
-     * Handles changes to weight attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    weightChanged(prev: TextWeight | undefined, next: TextWeight | undefined): void;
-    /**
-     * THe Text align
+     * The Text alignment
      *
      * @public
      * @remarks
      * HTML Attribute: align
      */
     align?: TextAlign;
-    /**
-     * Handles changes to align attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    alignChanged(prev: TextAlign | undefined, next: TextAlign | undefined): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    /**
-     * Handles changes to observable properties
-     * @internal
-     * @param source - the source of the change
-     * @param propertyName - the property name being changed
-     */
-    handleChange(source: any, propertyName: string): void;
 }