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

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

@@ -0,0 +1,600 @@
+/**
+ * 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 `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 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 `focus-visible` state.
+ * @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 `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 `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 `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
+ */
+export declare const rangeOverflowState: ":state(range-overflow)" | "[state--range-overflow]";
+/**
+ * Selector for the `range-underflow` state.
+ * @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 `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
+ */
+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 warningState: ":state(warning)" | "[state--warning]";

package/dist/dts/switch/index.d.ts

@@ -1,5 +1,6 @@
-export * from './switch.js';
-export * from './switch.options.js';
 export { definition as SwitchDefinition } from './switch.definition.js';
+export { Switch } from './switch.js';
+export type { SwitchOptions } from './switch.js';
+export { SwitchLabelPosition } from './switch.options.js';
 export { styles as SwitchStyles } from './switch.styles.js';
 export { template as SwitchTemplate } from './switch.template.js';

package/dist/dts/switch/switch.bench.d.ts

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

package/dist/dts/switch/switch.d.ts

@@ -1,13 +1,8 @@
-import { FASTSwitch } from '@microsoft/fast-foundation/switch.js';
-import { SwitchLabelPosition } from './switch.options.js';
-export declare class Switch extends FASTSwitch {
-    /**
-     * The label position of the switch
-     *
-     * @public
-     * @default 'after'
-     * @remarks
-     * HTML Attribute: labelposition
-     */
-    labelPosition: SwitchLabelPosition | undefined;
+import type { StaticallyComposableHTML } from '../utils/index.js';
+import { BaseCheckbox } from '../checkbox/checkbox.js';
+export type SwitchOptions = {
+    switch?: StaticallyComposableHTML<Switch>;
+};
+export declare class Switch extends BaseCheckbox {
+    constructor();
 }

package/dist/dts/switch/switch.form-associated.d.ts

@@ -0,0 +1,14 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { CheckableFormAssociated } from '../form-associated/form-associated.js';
+declare class _Switch extends FASTElement {
+}
+interface _Switch extends CheckableFormAssociated {
+}
+declare const FormAssociatedSwitch_base: typeof _Switch;
+/**
+ * @beta
+ */
+export declare class FormAssociatedSwitch extends FormAssociatedSwitch_base {
+    proxy: HTMLInputElement;
+}
+export {};

package/dist/dts/switch/switch.options.d.ts

@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * SwitchLabelPosition Constants
  * @public
@@ -12,4 +12,4 @@ export declare const SwitchLabelPosition: {
  * Applies label position
  * @public
  */
-export declare type SwitchLabelPosition = ValuesOf<typeof SwitchLabelPosition>;
+export type SwitchLabelPosition = ValuesOf<typeof SwitchLabelPosition>;

package/dist/dts/switch/switch.template.d.ts

@@ -1,3 +1,4 @@
 import { ElementViewTemplate } from '@microsoft/fast-element';
-import { Switch } from './switch.js';
+import { Switch, SwitchOptions } from './switch.js';
+export declare function switchTemplate<T extends Switch>(options?: SwitchOptions): ElementViewTemplate<T>;
 export declare const template: ElementViewTemplate<Switch>;

package/dist/dts/tab/index.d.ts

@@ -1,4 +1,5 @@
-export * from './tab.js';
-export { template as TabTemplate } from './tab.template.js';
-export { styles as TabStyles } from './tab.styles.js';
 export { definition as TabDefinition } from './tab.definition.js';
+export { Tab } from './tab.js';
+export type { TabOptions } from './tab.js';
+export { styles as TabStyles } from './tab.styles.js';
+export { template as TabTemplate } from './tab.template.js';

package/dist/dts/tab/tab.bench.d.ts

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';