@fluentui/web-components 1.6.3 → 2.1.0

package/dist/web-components.d.ts

@@ -10,6 +10,7 @@ import { Breadcrumb } from '@microsoft/fast-foundation';
 import { BreadcrumbItem } from '@microsoft/fast-foundation';
 import { BreadcrumbItemOptions } from '@microsoft/fast-foundation';
 import { Button as Button_2 } from '@microsoft/fast-foundation';
+import { CalendarOptions } from '@microsoft/fast-foundation';
 import { Card as Card_2 } from '@microsoft/fast-foundation';
 import { CheckboxOptions } from '@microsoft/fast-foundation';
 import { Combobox as Combobox_2 } from '@microsoft/fast-foundation';
@@ -38,7 +39,7 @@ import { HorizontalScroll as HorizontalScroll_2 } from '@microsoft/fast-foundati
 import { HorizontalScrollOptions } from '@microsoft/fast-foundation';
 import { Listbox } from '@microsoft/fast-foundation';
 import { ListboxOption } from '@microsoft/fast-foundation';
-import { Menu } from '@microsoft/fast-foundation';
+import { Menu as Menu_2 } from '@microsoft/fast-foundation';
 import { MenuItem } from '@microsoft/fast-foundation';
 import { MenuItemOptions } from '@microsoft/fast-foundation';
 import { NumberField as NumberField_2 } from '@microsoft/fast-foundation';
@@ -69,28 +70,31 @@ import { TreeItemOptions } from '@microsoft/fast-foundation';
 import { TreeView } from '@microsoft/fast-foundation';
 import { ViewTemplate } from '@microsoft/fast-element';
 
+/** @public */
+export declare const accentBaseColor: CSSDesignToken<Swatch>;
+
 /**
  * @internal
  */
-export declare const AccentButtonStyles: ElementStyles;
+export declare const AccentButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
 
 /** @public */
 export declare const accentFillActive: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const accentFillActiveDelta: CSSDesignToken<number>;
+export declare const accentFillActiveDelta: DesignToken<number>;
 
 /** @public */
 export declare const accentFillFocus: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const accentFillFocusDelta: CSSDesignToken<number>;
+export declare const accentFillFocusDelta: DesignToken<number>;
 
 /** @public */
 export declare const accentFillHover: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const accentFillHoverDelta: CSSDesignToken<number>;
+export declare const accentFillHoverDelta: DesignToken<number>;
 
 /** @public */
 export declare const accentFillRecipe: DesignToken<InteractiveColorRecipe>;
@@ -99,13 +103,13 @@ export declare const accentFillRecipe: DesignToken<InteractiveColorRecipe>;
 export declare const accentFillRest: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const accentFillRestDelta: CSSDesignToken<number>;
+export declare const accentFillRestDelta: DesignToken<number>;
 
 /** @public */
 export declare const accentForegroundActive: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const accentForegroundActiveDelta: CSSDesignToken<number>;
+export declare const accentForegroundActiveDelta: DesignToken<number>;
 
 /** @public @deprecated Use foregroundOnAccentRest */
 export declare const accentForegroundCut: CSSDesignToken<Swatch>;
@@ -117,13 +121,13 @@ export declare const accentForegroundCutLarge: CSSDesignToken<Swatch>;
 export declare const accentForegroundFocus: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const accentForegroundFocusDelta: CSSDesignToken<number>;
+export declare const accentForegroundFocusDelta: DesignToken<number>;
 
 /** @public */
 export declare const accentForegroundHover: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const accentForegroundHoverDelta: CSSDesignToken<number>;
+export declare const accentForegroundHoverDelta: DesignToken<number>;
 
 /** @public */
 export declare const accentForegroundRecipe: DesignToken<InteractiveColorRecipe>;
@@ -132,11 +136,26 @@ export declare const accentForegroundRecipe: DesignToken<InteractiveColorRecipe>
 export declare const accentForegroundRest: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const accentForegroundRestDelta: CSSDesignToken<number>;
+export declare const accentForegroundRestDelta: DesignToken<number>;
 
 /** @public */
 export declare const accentPalette: DesignToken<Palette<Swatch>>;
 
+/** @public */
+export declare const accentStrokeControlActive: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const accentStrokeControlFocus: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const accentStrokeControlHover: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const accentStrokeControlRecipe: DesignToken<InteractiveColorRecipe>;
+
+/** @public */
+export declare const accentStrokeControlRest: CSSDesignToken<Swatch>;
+
 export { Accordion }
 
 export { AccordionItem }
@@ -166,6 +185,7 @@ export declare const allComponents: {
     fluentBreadcrumb: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Breadcrumb>;
     fluentBreadcrumbItem: (overrideDefinition?: OverrideFoundationElementDefinition<BreadcrumbItemOptions> | undefined) => FoundationElementRegistry<BreadcrumbItemOptions, Constructable<FoundationElement>>;
     fluentButton: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Button>;
+    fluentCalendar: (overrideDefinition?: OverrideFoundationElementDefinition<CalendarOptions> | undefined) => FoundationElementRegistry<CalendarOptions, Constructable<FoundationElement>>;
     fluentCard: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Card>;
     fluentCheckbox: (overrideDefinition?: OverrideFoundationElementDefinition<CheckboxOptions> | undefined) => FoundationElementRegistry<CheckboxOptions, Constructable<FoundationElement>>;
     fluentCombobox: (overrideDefinition?: OverrideFoundationElementDefinition<ComboboxOptions> | undefined) => FoundationElementRegistry<ComboboxOptions, Constructable<FoundationElement>>;
@@ -217,11 +237,12 @@ export declare const allComponents: {
  * TODO: The --background-luminance will need to be derived from JavaScript. For now
  * this is hard-coded to a 1, the relative luminance of pure white.
  * https://github.com/microsoft/fast/issues/2778
+ * opacity was `calc(.11 * (2 - var(--background-luminance, 1)))`
  *
  * @internal
- * @deprecated Will be replaced
+ * @deprecated Use elevationShadow design token
  */
-export declare const ambientShadow = "0 0 calc((var(--elevation) * 0.225px) + 2px) rgba(0, 0, 0, calc(.11 * (2 - var(--background-luminance, 1))))";
+export declare const ambientShadow = "0 0 2px rgba(0, 0, 0, 0.14)";
 
 /**
  * The Fluent version of Anchor
@@ -293,7 +314,7 @@ export declare const badgeStyles: (context: ElementDefinitionContext, definition
 /**
  * @internal
  */
-export declare const baseButtonStyles: (context: any, definition: any) => ElementStyles;
+export declare const baseButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
 
 /** @public */
 export declare const baseHeightMultiplier: CSSDesignToken<number>;
@@ -405,7 +426,9 @@ export declare const cardStyles: (context: ElementDefinitionContext, definition:
 export declare const checkboxStyles: (context: ElementDefinitionContext, definition: CheckboxOptions) => ElementStyles;
 
 /** @public */
-export declare type ColorRecipe = Recipe<Swatch>;
+export declare interface ColorRecipe {
+    evaluate(element: HTMLElement, reference?: Swatch): Swatch;
+}
 
 /**
  * The Fluent combobox class
@@ -434,7 +457,7 @@ export declare class Combobox extends Combobox_2 {
  * Combobox appearances
  * @public
  */
-export declare type ComboboxAppearance = SelectAppearance;
+export declare type ComboboxAppearance = 'filled' | 'outline';
 
 /**
  * Styles for combobox
@@ -448,6 +471,20 @@ export declare const controlCornerRadius: CSSDesignToken<number>;
 /** @public @deprecated Use controlCornerRadius */
 export declare const cornerRadius: CSSDesignToken<number>;
 
+/**
+ * Creates a PaletteRGB from input R, G, B color values.
+ * @param r - Red value represented as a number between 0 and 1.
+ * @param g - Green value represented as a number between 0 and 1.
+ * @param b - Blue value represented as a number between 0 and 1.
+ */
+declare function create(r: number, g: number, b: number): PaletteRGB;
+
+/**
+ * Creates a PaletteRGB from a source SwatchRGB object.
+ * @deprecated - Use PaletteRGB.from()
+ */
+declare function create(source: SwatchRGB): PaletteRGB;
+
 export { DataGrid }
 
 export { DataGridCell }
@@ -464,7 +501,7 @@ export { DataGridRow }
  * Styles for DataGrid row
  * @public
  */
-export declare const dataGridRowStyles: (context: ElementDefinitionContext, defintion: FoundationElementDefinition) => ElementStyles;
+export declare const dataGridRowStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
 
 /**
  * Styles for DataGrid
@@ -481,6 +518,7 @@ export declare const density: CSSDesignToken<number>;
  */
 export declare class DesignSystemProvider extends FoundationElement {
     constructor();
+    connectedCallback(): void;
     /**
      * Used to instruct the FluentDesignSystemProvider
      * that it should not set the CSS
@@ -505,36 +543,12 @@ export declare class DesignSystemProvider extends FoundationElement {
      * HTML attribute: accent-base-color
      */
     accentBaseColor: Swatch;
-    /**
-     * @internal
-     */
-    private accentBaseColorChanged;
     /**
      * A convenience to recreate the neutralPalette
      * @remarks
      * HTML attribute: neutral-base-color
      */
     neutralBaseColor: Swatch;
-    /**
-     * @internal
-     */
-    private neutralBaseColorChanged;
-    /**
-     * Defines the palette that all neutral color recipes are derived from.
-     * This is an array for hexadecimal color strings ordered from light to dark.
-     *
-     * @remarks
-     * HTML attribute: N/A
-     */
-    neutralPalette: Palette;
-    /**
-     * Defines the palette that all accent color recipes are derived from.
-     * This is an array for hexadecimal color strings ordered from light to dark.
-     *
-     * @remarks
-     * HTML attribute: N/A
-     */
-    accentPalette: Palette;
     /**
      *
      * The density offset, used with designUnit to calculate height and spacing.
@@ -585,11 +599,20 @@ export declare class DesignSystemProvider extends FoundationElement {
      * The corner radius applied to controls.
      *
      * @remarks
-     * HTML attribute: corner-radius
+     * HTML attribute: control-corner-radius
      *
-     * CSS custom property: --corner-radius
+     * CSS custom property: --control-corner-radius
      */
     controlCornerRadius: number;
+    /**
+     * The corner radius applied to layers.
+     *
+     * @remarks
+     * HTML attribute: layer-corner-radius
+     *
+     * CSS custom property: --layer-corner-radius
+     */
+    layerCornerRadius: number;
     /**
      * The width of the standard stroke applied to stroke components in pixels.
      *
@@ -1007,10 +1030,10 @@ export declare class DesignSystemProvider extends FoundationElement {
      */
     baseLayerLuminance: number;
     /**
-     * The distance from the resolved neutral divider color for the rest state of the neutral-foreground recipe.
+     * The distance from the resolved divider color for the rest state of the neutral-stroke-divider recipe.
      *
      * @remarks
-     * HTML attribute: neutral-divider-rest-delta
+     * HTML attribute: neutral-stroke-divider-rest-delta
      *
      * CSS custom property: N/A
      */
@@ -1069,9 +1092,9 @@ export declare const direction: CSSDesignToken<Direction>;
 
 /**
  * @internal
- * @deprecated Will be replaced
+ * @deprecated Use elevationShadow design token
  */
-export declare const directionalShadow = "0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgba(0, 0, 0, calc(.13 * (2 - var(--background-luminance, 1))))";
+export declare const directionalShadow = "0 calc(var(--elevation) * 0.5px) calc((var(--elevation) * 1px)) rgba(0, 0, 0, 0.2)";
 
 /**
  * Behavior to conditionally apply LTR and RTL stylesheets. To determine which to apply,
@@ -1127,17 +1150,64 @@ export declare const elevatedCornerRadius: CSSDesignToken<number>;
  * by setting --elevation to a number.
  *
  * @public
- * @deprecated Will be replaced
+ * @deprecated Use elevationShadow design token
  */
 export declare const elevation: string;
 
 /** @public */
-export declare const fillColor: CSSDesignToken<Swatch>;
+export declare interface ElevationRecipe {
+    evaluate(element: HTMLElement, size: number, reference?: Swatch): string;
+}
+
+/** @public */
+export declare const elevationShadowCardActive: CSSDesignToken<string>;
+
+/** @public */
+export declare const elevationShadowCardActiveSize: CSSDesignToken<number>;
+
+/** @public */
+export declare const elevationShadowCardFocus: CSSDesignToken<string>;
+
+/** @public */
+export declare const elevationShadowCardFocusSize: CSSDesignToken<number>;
+
+/** @public */
+export declare const elevationShadowCardHover: CSSDesignToken<string>;
+
+/** @public */
+export declare const elevationShadowCardHoverSize: CSSDesignToken<number>;
+
+/** @public */
+export declare const elevationShadowCardRest: CSSDesignToken<string>;
+
+/** @public */
+export declare const elevationShadowCardRestSize: CSSDesignToken<number>;
+
+/** @public */
+export declare const elevationShadowDialog: CSSDesignToken<string>;
+
+/** @public */
+export declare const elevationShadowDialogSize: CSSDesignToken<number>;
+
+/** @public */
+export declare const elevationShadowFlyout: CSSDesignToken<string>;
+
+/** @public */
+export declare const elevationShadowFlyoutSize: CSSDesignToken<number>;
 
 /**
- * @internal
+ * @public
  */
-export declare const fillStateStyles: (context: any, definition: any) => ElementStyles;
+export declare const elevationShadowRecipe: DesignToken<ElevationRecipe>;
+
+/** @public */
+export declare const elevationShadowTooltip: CSSDesignToken<string>;
+
+/** @public */
+export declare const elevationShadowTooltipSize: CSSDesignToken<number>;
+
+/** @public */
+export declare const fillColor: CSSDesignToken<Swatch>;
 
 export { Flipper }
 
@@ -1239,6 +1309,16 @@ export declare const fluentBreadcrumbItem: (overrideDefinition?: OverrideFoundat
  */
 export declare const fluentButton: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Button>;
 
+/**
+ * The Fluent Calendar Element. Implements {@link @microsoft/fast-foundation#Calendar},
+ * {@link @microsoft/fast-foundation#calendarTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element \<fluent-calendar\>
+ */
+export declare const fluentCalendar: (overrideDefinition?: OverrideFoundationElementDefinition<CalendarOptions> | undefined) => FoundationElementRegistry<CalendarOptions, Constructable<FoundationElement>>;
+
 /**
  * The Fluent Card Element. Implements {@link @microsoft/fast-foundation#Card},
  * {@link @microsoft/fast-foundation#CardTemplate}
@@ -1661,10 +1741,10 @@ export declare const foregroundOnAccentHover: CSSDesignToken<Swatch>;
 export declare const foregroundOnAccentHoverLarge: CSSDesignToken<Swatch>;
 
 /** @public @deprecated Not used */
-export declare const foregroundOnAccentLargeRecipe: DesignToken<ColorRecipe>;
+export declare const foregroundOnAccentLargeRecipe: DesignToken<InteractiveColorRecipe>;
 
 /** @public */
-export declare const foregroundOnAccentRecipe: DesignToken<ColorRecipe>;
+export declare const foregroundOnAccentRecipe: DesignToken<InteractiveColorRecipe>;
 
 /** @public */
 export declare const foregroundOnAccentRest: CSSDesignToken<Swatch>;
@@ -1672,6 +1752,12 @@ export declare const foregroundOnAccentRest: CSSDesignToken<Swatch>;
 /** @public @deprecated Not used */
 export declare const foregroundOnAccentRestLarge: CSSDesignToken<Swatch>;
 
+/**
+ * Creates a PaletteRGB from a source color object.
+ * @param source - The source color
+ */
+declare function from(source: SwatchRGB, options?: Partial<PaletteRGBOptions>): PaletteRGB;
+
 /**
  * A formula to retrieve the control height.
  * Use this as the value of any CSS property that
@@ -1699,10 +1785,37 @@ export declare const horizontalScrollStyles: (context: ElementDefinitionContext,
 /**
  * @internal
  */
-export declare const HypertextStyles: ElementStyles;
+export declare const HypertextStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
+
+/**
+ * @internal
+ */
+export declare const inputFilledForcedColorStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
+
+/**
+ * @internal
+ */
+export declare const inputFilledStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
+
+/**
+ * @internal
+ */
+export declare const inputForcedColorStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
+
+/**
+ * @internal
+ */
+export declare const inputStateStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
+
+/**
+ * @internal
+ */
+export declare const inputStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
 
 /** @public */
-export declare type InteractiveColorRecipe = Recipe<InteractiveSwatchSet>;
+export declare interface InteractiveColorRecipe {
+    evaluate(element: HTMLElement, reference?: Swatch): InteractiveSwatchSet;
+}
 
 /** @public */
 export declare interface InteractiveSwatchSet {
@@ -1739,7 +1852,7 @@ export declare const layerCornerRadius: CSSDesignToken<number>;
 /**
  * @internal
  */
-export declare const LightweightButtonStyles: ElementStyles;
+export declare const LightweightButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
 
 export { Listbox }
 
@@ -1749,7 +1862,16 @@ export { Listbox }
  */
 export declare const listboxStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
 
-export { Menu }
+/**
+ * The Fluent menu class
+ * @public
+ */
+export declare class Menu extends Menu_2 {
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+}
 
 export { MenuItem }
 
@@ -1765,6 +1887,9 @@ export declare const menuItemStyles: (context: ElementDefinitionContext, definit
  */
 export declare const menuStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
 
+/** @public */
+export declare const neutralBaseColor: CSSDesignToken<Swatch>;
+
 /** @public @deprecated Use neutralFillInverseActive */
 export declare const neutralContrastFillActive: CSSDesignToken<Swatch>;
 
@@ -1793,49 +1918,76 @@ export declare const neutralContrastFillRestDelta: CSSDesignToken<number>;
 export declare const neutralDivider: CSSDesignToken<Swatch>;
 
 /** @public @deprecated Use neutralStrokeDividerRestDelta */
-export declare const neutralDividerRestDelta: CSSDesignToken<number>;
+export declare const neutralDividerRestDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralFillActive: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralFillActiveDelta: CSSDesignToken<number>;
+export declare const neutralFillActiveDelta: DesignToken<number>;
 
 /** @public @deprecated Use neutralFillLayerRest */
 export declare const neutralFillCard: CSSDesignToken<Swatch>;
 
 /** @public @deprecated Use neutralFillLayerRestDelta */
-export declare const neutralFillCardDelta: CSSDesignToken<number>;
+export declare const neutralFillCardDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralFillFocus: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralFillFocusDelta: CSSDesignToken<number>;
+export declare const neutralFillFocusDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralFillHover: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralFillHoverDelta: CSSDesignToken<number>;
+export declare const neutralFillHoverDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralFillInputActive: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralFillInputActiveDelta: CSSDesignToken<number>;
+export declare const neutralFillInputActiveDelta: DesignToken<number>;
+
+/** @public */
+export declare const neutralFillInputAltActive: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralFillInputAltActiveDelta: DesignToken<number>;
+
+/** @public */
+export declare const neutralFillInputAltFocus: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralFillInputAltFocusDelta: DesignToken<number>;
+
+/** @public */
+export declare const neutralFillInputAltHover: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralFillInputAltHoverDelta: DesignToken<number>;
+
+/** @public */
+export declare const neutralFillInputAltRecipe: DesignToken<InteractiveColorRecipe>;
+
+/** @public */
+export declare const neutralFillInputAltRest: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralFillInputAltRestDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralFillInputFocus: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralFillInputFocusDelta: CSSDesignToken<number>;
+export declare const neutralFillInputFocusDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralFillInputHover: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralFillInputHoverDelta: CSSDesignToken<number>;
+export declare const neutralFillInputHoverDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralFillInputRecipe: DesignToken<InteractiveColorRecipe>;
@@ -1844,24 +1996,24 @@ export declare const neutralFillInputRecipe: DesignToken<InteractiveColorRecipe>
 export declare const neutralFillInputRest: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralFillInputRestDelta: CSSDesignToken<number>;
+export declare const neutralFillInputRestDelta: DesignToken<number>;
 
 /** @public @deprecated Not used */
 export declare const neutralFillInverseActive: CSSDesignToken<Swatch>;
 
-/** @public */
+/** @public @deprecated Not used */
 export declare const neutralFillInverseActiveDelta: CSSDesignToken<number>;
 
 /** @public @deprecated Not used */
 export declare const neutralFillInverseFocus: CSSDesignToken<Swatch>;
 
-/** @public */
+/** @public @deprecated Not used */
 export declare const neutralFillInverseFocusDelta: CSSDesignToken<number>;
 
 /** @public @deprecated Not used */
 export declare const neutralFillInverseHover: CSSDesignToken<Swatch>;
 
-/** @public */
+/** @public @deprecated Not used */
 export declare const neutralFillInverseHoverDelta: CSSDesignToken<number>;
 
 /** @public @deprecated Not used */
@@ -1870,17 +2022,38 @@ export declare const neutralFillInverseRecipe: DesignToken<InteractiveColorRecip
 /** @public @deprecated Not used */
 export declare const neutralFillInverseRest: CSSDesignToken<Swatch>;
 
-/** @public */
+/** @public @deprecated Not used */
 export declare const neutralFillInverseRestDelta: CSSDesignToken<number>;
 
 /** @public */
-export declare const neutralFillLayerRecipe: DesignToken<ColorRecipe>;
+export declare const neutralFillLayerActive: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralFillLayerActiveDelta: DesignToken<number>;
+
+/** @public */
+export declare const neutralFillLayerAltRecipe: DesignToken<InteractiveColorRecipe>;
+
+/** @public */
+export declare const neutralFillLayerAltRest: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralFillLayerAltRestDelta: DesignToken<number>;
+
+/** @public */
+export declare const neutralFillLayerHover: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralFillLayerHoverDelta: DesignToken<number>;
+
+/** @public */
+export declare const neutralFillLayerRecipe: DesignToken<InteractiveColorRecipe>;
 
 /** @public */
 export declare const neutralFillLayerRest: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralFillLayerRestDelta: CSSDesignToken<number>;
+export declare const neutralFillLayerRestDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralFillRecipe: DesignToken<InteractiveColorRecipe>;
@@ -1889,25 +2062,52 @@ export declare const neutralFillRecipe: DesignToken<InteractiveColorRecipe>;
 export declare const neutralFillRest: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralFillRestDelta: CSSDesignToken<number>;
+export declare const neutralFillRestDelta: DesignToken<number>;
+
+/** @public */
+export declare const neutralFillSecondaryActive: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralFillSecondaryActiveDelta: DesignToken<number>;
+
+/** @public */
+export declare const neutralFillSecondaryFocus: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralFillSecondaryFocusDelta: DesignToken<number>;
+
+/** @public */
+export declare const neutralFillSecondaryHover: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralFillSecondaryHoverDelta: DesignToken<number>;
+
+/** @public */
+export declare const neutralFillSecondaryRecipe: DesignToken<InteractiveColorRecipe>;
+
+/** @public */
+export declare const neutralFillSecondaryRest: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralFillSecondaryRestDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralFillStealthActive: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralFillStealthActiveDelta: CSSDesignToken<number>;
+export declare const neutralFillStealthActiveDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralFillStealthFocus: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralFillStealthFocusDelta: CSSDesignToken<number>;
+export declare const neutralFillStealthFocusDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralFillStealthHover: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralFillStealthHoverDelta: CSSDesignToken<number>;
+export declare const neutralFillStealthHoverDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralFillStealthRecipe: DesignToken<InteractiveColorRecipe>;
@@ -1916,25 +2116,25 @@ export declare const neutralFillStealthRecipe: DesignToken<InteractiveColorRecip
 export declare const neutralFillStealthRest: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralFillStealthRestDelta: CSSDesignToken<number>;
+export declare const neutralFillStealthRestDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralFillStrongActive: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralFillStrongActiveDelta: CSSDesignToken<number>;
+export declare const neutralFillStrongActiveDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralFillStrongFocus: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralFillStrongFocusDelta: CSSDesignToken<number>;
+export declare const neutralFillStrongFocusDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralFillStrongHover: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralFillStrongHoverDelta: CSSDesignToken<number>;
+export declare const neutralFillStrongHoverDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralFillStrongRecipe: DesignToken<InteractiveColorRecipe>;
@@ -1943,31 +2143,31 @@ export declare const neutralFillStrongRecipe: DesignToken<InteractiveColorRecipe
 export declare const neutralFillStrongRest: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralFillStrongRestDelta: CSSDesignToken<number>;
+export declare const neutralFillStrongRestDelta: DesignToken<number>;
 
 /** @public @deprecated Use neutralFillStrongActive */
 export declare const neutralFillToggleActive: CSSDesignToken<Swatch>;
 
 /** @public @deprecated Use neutralFillStrongActiveDelta */
-export declare const neutralFillToggleActiveDelta: CSSDesignToken<number>;
+export declare const neutralFillToggleActiveDelta: DesignToken<number>;
 
 /** @public @deprecated Use neutralFillStrongFocus */
 export declare const neutralFillToggleFocus: CSSDesignToken<Swatch>;
 
 /** @public @deprecated Use neutralFillStrongFocusDelta */
-export declare const neutralFillToggleFocusDelta: CSSDesignToken<number>;
+export declare const neutralFillToggleFocusDelta: DesignToken<number>;
 
 /** @public @deprecated Use neutralFillStrongHover */
 export declare const neutralFillToggleHover: CSSDesignToken<Swatch>;
 
 /** @public @deprecated Use neutralFillStrongHoverDelta */
-export declare const neutralFillToggleHoverDelta: CSSDesignToken<number>;
+export declare const neutralFillToggleHoverDelta: DesignToken<number>;
 
 /** @public @deprecated Use neutralFillStrongRest */
 export declare const neutralFillToggleRest: CSSDesignToken<Swatch>;
 
 /** @public @deprecated Use neutralFillStrongRestDelta */
-export declare const neutralFillToggleRestDelta: CSSDesignToken<number>;
+export declare const neutralFillToggleRestDelta: DesignToken<number>;
 
 /** @public @deprecated Use focusStrokeOuter */
 export declare const neutralFocus: CSSDesignToken<Swatch>;
@@ -1975,6 +2175,12 @@ export declare const neutralFocus: CSSDesignToken<Swatch>;
 /** @public @deprecated Use focusStrokeInner */
 export declare const neutralFocusInnerAccent: CSSDesignToken<Swatch>;
 
+/** @public */
+export declare const neutralForegroundActive: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralForegroundFocus: CSSDesignToken<Swatch>;
+
 /** @public */
 export declare const neutralForegroundHint: CSSDesignToken<Swatch>;
 
@@ -1982,7 +2188,10 @@ export declare const neutralForegroundHint: CSSDesignToken<Swatch>;
 export declare const neutralForegroundHintRecipe: DesignToken<ColorRecipe>;
 
 /** @public */
-export declare const neutralForegroundRecipe: DesignToken<ColorRecipe>;
+export declare const neutralForegroundHover: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralForegroundRecipe: DesignToken<InteractiveColorRecipe>;
 
 /** @public */
 export declare const neutralForegroundRest: CSSDesignToken<Swatch>;
@@ -2054,7 +2263,34 @@ export declare const neutralPalette: DesignToken<Palette<Swatch>>;
 export declare const neutralStrokeActive: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralStrokeActiveDelta: CSSDesignToken<number>;
+export declare const neutralStrokeActiveDelta: DesignToken<number>;
+
+/** @public */
+export declare const neutralStrokeControlActive: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralStrokeControlActiveDelta: DesignToken<number>;
+
+/** @public */
+export declare const neutralStrokeControlFocus: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralStrokeControlFocusDelta: DesignToken<number>;
+
+/** @public */
+export declare const neutralStrokeControlHover: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralStrokeControlHoverDelta: DesignToken<number>;
+
+/** @public */
+export declare const neutralStrokeControlRecipe: DesignToken<InteractiveColorRecipe>;
+
+/** @public */
+export declare const neutralStrokeControlRest: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralStrokeControlRestDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralStrokeDividerRecipe: DesignToken<ColorRecipe>;
@@ -2063,19 +2299,55 @@ export declare const neutralStrokeDividerRecipe: DesignToken<ColorRecipe>;
 export declare const neutralStrokeDividerRest: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralStrokeDividerRestDelta: CSSDesignToken<number>;
+export declare const neutralStrokeDividerRestDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralStrokeFocus: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralStrokeFocusDelta: CSSDesignToken<number>;
+export declare const neutralStrokeFocusDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralStrokeHover: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralStrokeHoverDelta: CSSDesignToken<number>;
+export declare const neutralStrokeHoverDelta: DesignToken<number>;
+
+/** @public */
+export declare const neutralStrokeInputActive: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralStrokeInputFocus: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralStrokeInputHover: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralStrokeInputRecipe: DesignToken<InteractiveColorRecipe>;
+
+/** @public */
+export declare const neutralStrokeInputRest: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralStrokeLayerActive: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralStrokeLayerActiveDelta: DesignToken<number>;
+
+/** @public */
+export declare const neutralStrokeLayerHover: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralStrokeLayerHoverDelta: DesignToken<number>;
+
+/** @public */
+export declare const neutralStrokeLayerRecipe: DesignToken<InteractiveColorRecipe>;
+
+/** @public */
+export declare const neutralStrokeLayerRest: CSSDesignToken<Swatch>;
+
+/** @public */
+export declare const neutralStrokeLayerRestDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralStrokeRecipe: DesignToken<InteractiveColorRecipe>;
@@ -2084,25 +2356,25 @@ export declare const neutralStrokeRecipe: DesignToken<InteractiveColorRecipe>;
 export declare const neutralStrokeRest: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralStrokeRestDelta: CSSDesignToken<number>;
+export declare const neutralStrokeRestDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralStrokeStrongActive: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralStrokeStrongActiveDelta: CSSDesignToken<number>;
+export declare const neutralStrokeStrongActiveDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralStrokeStrongFocus: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralStrokeStrongFocusDelta: CSSDesignToken<number>;
+export declare const neutralStrokeStrongFocusDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralStrokeStrongHover: CSSDesignToken<Swatch>;
 
 /** @public */
-export declare const neutralStrokeStrongHoverDelta: CSSDesignToken<number>;
+export declare const neutralStrokeStrongHoverDelta: DesignToken<number>;
 
 /** @public */
 export declare const neutralStrokeStrongRecipe: DesignToken<InteractiveColorRecipe>;
@@ -2150,7 +2422,7 @@ export declare const OptionStyles: (context: ElementDefinitionContext, definitio
 /**
  * @internal
  */
-export declare const OutlineButtonStyles: ElementStyles;
+export declare const OutlineButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
 
 /** @public @deprecated Use strokeWidth */
 export declare const outlineWidth: CSSDesignToken<number>;
@@ -2184,9 +2456,34 @@ export declare type PaletteRGB = Palette<SwatchRGB>;
 
 /** @public */
 export declare const PaletteRGB: Readonly<{
-    create(source: SwatchRGB): PaletteRGB;
+    create: typeof create;
+    from: typeof from;
 }>;
 
+/**
+ * Options to tailor the generation of the color palette.
+ * @public
+ */
+declare interface PaletteRGBOptions {
+    /**
+     * The minimum amount of contrast between steps in the palette. Default 1.03.
+     * Recommended increments by hundredths.
+     */
+    stepContrast: number;
+    /**
+     * Multiplier for increasing step contrast as the swatches darken. Default 0.03.
+     * Recommended increments by hundredths.
+     */
+    stepContrastRamp: number;
+    /**
+     * Whether to keep the exact source color in the target palette. Default false.
+     * Only recommended when the exact color is required and used in stateful interaction recipes like hover.
+     * Note that custom recipes can still access the source color even if it's not in the ramp,
+     * but turning this on will potentially increase the contrast between steps toward the ends of the palette.
+     */
+    preserveSource: boolean;
+}
+
 /**
  * Progress base class
  * @public
@@ -2238,7 +2535,7 @@ export declare const radioGroupStyles: (context: ElementDefinitionContext, defin
  */
 export declare const RadioStyles: (context: ElementDefinitionContext, definition: RadioOptions) => ElementStyles;
 
-/** @public */
+/** @public @deprecated Use ColorRecipe instead */
 export declare interface Recipe<T> {
     evaluate(element: HTMLElement, reference?: Swatch): T;
 }
@@ -2280,7 +2577,7 @@ export declare class Select extends Select_2 {
  * Select appearances
  * @public
  */
-export declare type SelectAppearance = 'filled' | 'outline';
+export declare type SelectAppearance = 'filled' | 'outline' | 'stealth';
 
 /**
  * Styles for Select
@@ -2318,14 +2615,14 @@ export declare const sliderStyles: (context: ElementDefinitionContext, definitio
  * @public
  */
 export declare enum StandardLuminance {
-    LightMode = 1,
-    DarkMode = 0.23
+    LightMode = 0.98,
+    DarkMode = 0.15
 }
 
 /**
  * @internal
  */
-export declare const StealthButtonStyles: ElementStyles;
+export declare const StealthButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
 
 /** @public */
 export declare const strokeWidth: CSSDesignToken<number>;