@fluentui/web-components 1.6.3 → 2.1.0

package/dist/dts/styles/elevation.d.ts

@@ -1,25 +1,64 @@
+import { DesignToken } from '@microsoft/fast-foundation';
+import { Swatch } from '../color/swatch';
 /**
  * Define shadow algorithms.
  *
  * 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)";
 /**
  * @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)";
 /**
  * Applies the box-shadow CSS rule set to the elevation formula.
  * Control this formula with the --elevation CSS Custom Property
  * by setting --elevation to a number.
  *
  * @public
- * @deprecated Will be replaced
+ * @deprecated Use elevationShadow design token
  */
 export declare const elevation: string;
+/** @public */
+export interface ElevationRecipe {
+    evaluate(element: HTMLElement, size: number, reference?: Swatch): string;
+}
+/**
+ * @public
+ */
+export declare const elevationShadowRecipe: DesignToken<ElevationRecipe>;
+/** @public */
+export declare const elevationShadowCardRestSize: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+/** @public */
+export declare const elevationShadowCardHoverSize: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+/** @public */
+export declare const elevationShadowCardActiveSize: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+/** @public */
+export declare const elevationShadowCardFocusSize: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+/** @public */
+export declare const elevationShadowCardRest: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+/** @public */
+export declare const elevationShadowCardHover: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+/** @public */
+export declare const elevationShadowCardActive: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+/** @public */
+export declare const elevationShadowCardFocus: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+/** @public */
+export declare const elevationShadowTooltipSize: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+/** @public */
+export declare const elevationShadowTooltip: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+/** @public */
+export declare const elevationShadowFlyoutSize: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+/** @public */
+export declare const elevationShadowFlyout: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+/** @public */
+export declare const elevationShadowDialogSize: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+/** @public */
+export declare const elevationShadowDialog: import("@microsoft/fast-foundation").CSSDesignToken<string>;

package/dist/dts/styles/patterns/button.styles.d.ts

@@ -1,24 +1,25 @@
+import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 /**
  * @internal
  */
-export declare const baseButtonStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export declare const baseButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => import("@microsoft/fast-element").ElementStyles;
 /**
  * @internal
  */
-export declare const AccentButtonStyles: import("@microsoft/fast-element").ElementStyles;
+export declare const AccentButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => import("@microsoft/fast-element").ElementStyles;
 /**
  * @internal
  */
-export declare const HypertextStyles: import("@microsoft/fast-element").ElementStyles;
+export declare const HypertextStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => import("@microsoft/fast-element").ElementStyles;
 /**
  * @internal
  */
-export declare const LightweightButtonStyles: import("@microsoft/fast-element").ElementStyles;
+export declare const LightweightButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => import("@microsoft/fast-element").ElementStyles;
 /**
  * @internal
  */
-export declare const OutlineButtonStyles: import("@microsoft/fast-element").ElementStyles;
+export declare const OutlineButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => import("@microsoft/fast-element").ElementStyles;
 /**
  * @internal
  */
-export declare const StealthButtonStyles: import("@microsoft/fast-element").ElementStyles;
+export declare const StealthButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => import("@microsoft/fast-element").ElementStyles;

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

@@ -1,2 +1,2 @@
 export * from './button.styles';
-export * from './input';
+export * from './input.styles';

package/dist/dts/styles/patterns/input.styles.d.ts

@@ -0,0 +1,22 @@
+import { ElementStyles } from '@microsoft/fast-element';
+import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+/**
+ * @internal
+ */
+export declare const inputStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
+/**
+ * @internal
+ */
+export declare const inputStateStyles: (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 inputFilledForcedColorStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;

package/dist/dts/text-area/text-area.stories.d.ts

@@ -3,8 +3,8 @@ declare const _default: {
     component: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import(".").TextArea>;
     argTypes: {
         appearance: {
-            options: string[];
             defaultValue: string;
+            options: string[];
             control: {
                 type: string;
             };

package/dist/dts/tree-view/tree-view.stories.d.ts

@@ -2,11 +2,6 @@ declare const _default: {
     title: string;
     component: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").TreeView>;
     argTypes: {
-        disabled: {
-            control: {
-                type: string;
-            };
-        };
         renderCollapsedNodes: {
             control: {
                 type: string;

package/dist/esm/accordion/accordion-item/accordion-item.styles.js

@@ -1,27 +1,47 @@
 import { css } from '@microsoft/fast-element';
-import { display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
+import { DesignToken, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { accentFillRest, bodyFont, density, designUnit, focusStrokeOuter, focusStrokeWidth, neutralForegroundRest, neutralStrokeDividerRest, strokeWidth, typeRampMinus1FontSize, typeRampMinus1LineHeight, } from '../../design-tokens';
+import { bodyFont, controlCornerRadius, designUnit, focusStrokeOuter, focusStrokeWidth, layerCornerRadius, neutralFillLayerAltRest, neutralFillLayerRecipe, neutralFillLayerRest, neutralFillStealthRecipe, neutralForegroundRest, neutralStrokeLayerRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../../design-tokens';
 import { heightNumber } from '../../styles/size';
+const neutralFillStealthRestOnNeutralFillLayerRest = DesignToken.create('neutral-fill-stealth-rest-on-neutral-fill-layer-rest').withDefault((target) => {
+    const baseRecipe = neutralFillLayerRecipe.getValueFor(target);
+    const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
+    return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).rest;
+});
+const neutralFillStealthHoverOnNeutralFillLayerRest = DesignToken.create('neutral-fill-stealth-hover-on-neutral-fill-layer-rest').withDefault((target) => {
+    const baseRecipe = neutralFillLayerRecipe.getValueFor(target);
+    const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
+    return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).hover;
+});
+const neutralFillStealthActiveOnNeutralFillLayerRest = DesignToken.create('neutral-fill-stealth-active-on-neutral-fill-layer-rest').withDefault((target) => {
+    const baseRecipe = neutralFillLayerRecipe.getValueFor(target);
+    const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
+    return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).active;
+});
 export const accordionItemStyles = (context, definition) => css `
     ${display('flex')} :host {
       box-sizing: border-box;
       font-family: ${bodyFont};
       flex-direction: column;
-      font-size: ${typeRampMinus1FontSize};
-      line-height: ${typeRampMinus1LineHeight};
-      border-bottom: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest};
+      font-size: ${typeRampBaseFontSize};
+      line-height: ${typeRampBaseLineHeight};
+      background: ${neutralFillLayerRest};
+      color: ${neutralForegroundRest};
+      border: calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};
+      border-radius: calc(${layerCornerRadius} * 1px);
     }
 
     .region {
       display: none;
-      padding: calc((6 + (${designUnit} * 2 * ${density})) * 1px);
+      padding: calc(${designUnit} * 2 * 1px);
+      background: ${neutralFillLayerAltRest};
     }
 
     .heading {
       display: grid;
       position: relative;
-      grid-template-columns: auto 1fr auto calc(${heightNumber} * 1px);
+      grid-template-columns: auto 1fr auto auto;
+      align-items: center;
       z-index: 2;
     }
 
@@ -32,19 +52,14 @@ export const accordionItemStyles = (context, definition) => css `
       grid-column: 2;
       grid-row: 1;
       outline: none;
-      padding: 0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);
+      margin: calc(${designUnit} * 3 * 1px) 0;
+      padding: 0 calc(${designUnit} * 2 * 1px);
       text-align: left;
-      height: calc(${heightNumber} * 1px);
-      color: ${neutralForegroundRest};
+      color: inherit;
       cursor: pointer;
       font-family: inherit;
     }
 
-    .button:hover,
-    .button:active {
-      color: ${neutralForegroundRest};
-    }
-
     .button::before {
       content: '';
       position: absolute;
@@ -59,11 +74,20 @@ export const accordionItemStyles = (context, definition) => css `
     .button:${focusVisible}::before {
       outline: none;
       border: calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};
+      border-radius: calc(${layerCornerRadius} * 1px);
       box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter};
     }
 
+    :host(.expanded) .button:${focusVisible}::before {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
     :host(.expanded) .region {
       display: block;
+      border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};
+      border-bottom-left-radius: calc((${layerCornerRadius} - ${strokeWidth}) * 1px);
+      border-bottom-right-radius: calc((${layerCornerRadius} - ${strokeWidth}) * 1px);
     }
 
     .icon {
@@ -73,7 +97,20 @@ export const accordionItemStyles = (context, definition) => css `
       grid-column: 4;
       z-index: 2;
       pointer-events: none;
-      fill: ${accentFillRest};
+      background: ${neutralFillStealthRestOnNeutralFillLayerRest};
+      border-radius: calc(${controlCornerRadius} * 1px);
+      fill: currentcolor;
+      width: calc(${heightNumber} * 1px);
+      height: calc(${heightNumber} * 1px);
+      margin: calc(${designUnit} * 2 * 1px);
+    }
+
+    .heading:hover .icon {
+      background: ${neutralFillStealthHoverOnNeutralFillLayerRest};
+    }
+
+    .heading:active .icon {
+      background: ${neutralFillStealthActiveOnNeutralFillLayerRest};
     }
 
     slot[name='collapsed-icon'] {
@@ -95,7 +132,7 @@ export const accordionItemStyles = (context, definition) => css `
     .start {
       display: flex;
       align-items: center;
-      padding-inline-start: calc(${designUnit} * 1px);
+      padding-inline-start: calc(${designUnit} * 2 * 1px);
       justify-content: center;
       grid-column: 1;
       z-index: 2;

package/dist/esm/accordion/accordion-item/index.js

@@ -14,31 +14,13 @@ export const fluentAccordionItem = AccordionItem.compose({
     template,
     styles,
     collapsedIcon: `
-    <svg
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M16.22 3H3.78a.78.78 0 00-.78.78v12.44c0 .43.35.78.78.78h12.44c.43 0 .78-.35.78-.78V3.78a.78.78 0 00-.78-.78zM3.78 2h12.44C17.2 2 18 2.8 18 3.78v12.44c0 .98-.8 1.78-1.78 1.78H3.78C2.8 18 2 17.2 2 16.22V3.78C2 2.8 2.8 2 3.78 2zM11 9h3v2h-3v3H9v-3H6V9h3V6h2v3z"
-        />
+    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+      <path d="M2.15 4.65c.2-.2.5-.2.7 0L6 7.79l3.15-3.14a.5.5 0 11.7.7l-3.5 3.5a.5.5 0 01-.7 0l-3.5-3.5a.5.5 0 010-.7z"/>
     </svg>
   `,
     expandedIcon: `
-    <svg
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M3.78 3h12.44c.43 0 .78.35.78.78v12.44c0 .43-.35.78-.78.78H3.78a.78.78 0 01-.78-.78V3.78c0-.43.35-.78.78-.78zm12.44-1H3.78C2.8 2 2 2.8 2 3.78v12.44C2 17.2 2.8 18 3.78 18h12.44c.98 0 1.78-.8 1.78-1.78V3.78C18 2.8 17.2 2 16.22 2zM14 9H6v2h8V9z"
-        />
+    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+      <path d="M2.15 7.35c.2.2.5.2.7 0L6 4.21l3.15 3.14a.5.5 0 10.7-.7l-3.5-3.5a.5.5 0 00-.7 0l-3.5 3.5a.5.5 0 000 .7z"/>
     </svg>
   `,
 });

package/dist/esm/accordion/accordion.styles.js

@@ -1,14 +1,14 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { bodyFont, neutralForegroundRest, neutralStrokeDividerRest, strokeWidth, typeRampMinus1FontSize, typeRampMinus1LineHeight, } from '../design-tokens';
+import { bodyFont, designUnit, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
 export const accordionStyles = (context, definition) => css `
     ${display('flex')} :host {
       box-sizing: border-box;
       flex-direction: column;
       font-family: ${bodyFont};
-      font-size: ${typeRampMinus1FontSize};
-      line-height: ${typeRampMinus1LineHeight};
+      font-size: ${typeRampBaseFontSize};
+      line-height: ${typeRampBaseLineHeight};
       color: ${neutralForegroundRest};
-      border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest};
+      gap: calc(${designUnit} * 1px);
     }
   `;

package/dist/esm/anchor/anchor.stories.js

@@ -11,15 +11,15 @@ export default {
 };
 const AnchorTemplate = ({ appearance, label }) => `
   <fluent-anchor
+    href="javascript:void"
     ${appearance ? `appearance="${appearance}"` : ''}
-    href="https://bing.com" target="_blank"
     >
     ${label}
   </fluent-anchor>
 `;
 export const Anchor = AnchorTemplate.bind({});
 const example = `
-<fluent-anchor href="https://bing.com" target="_blank" appearance="neutral">Anchor</fluent-anchor>
+<fluent-anchor href="#" appearance="neutral">Anchor</fluent-anchor>
 `;
 Anchor.args = {
     label: 'Anchor',

package/dist/esm/anchor/anchor.styles.js

@@ -1,6 +1,12 @@
 import { css } from '@microsoft/fast-element';
 import { AccentButtonStyles, baseButtonStyles, HypertextStyles, LightweightButtonStyles, OutlineButtonStyles, StealthButtonStyles, } from '../styles/';
 import { appearanceBehavior } from '../utilities/behaviors';
+const interactivitySelector = '[href]';
+const nonInteractivitySelector = ':not([href])';
 export const anchorStyles = (context, definition) => css `
-    ${baseButtonStyles(context, definition)}
-  `.withBehaviors(appearanceBehavior('accent', AccentButtonStyles), appearanceBehavior('hypertext', HypertextStyles), appearanceBehavior('lightweight', LightweightButtonStyles), appearanceBehavior('outline', OutlineButtonStyles), appearanceBehavior('stealth', StealthButtonStyles));
+    :host .control:not([href]) {
+      cursor: default;
+    }
+
+    ${baseButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
+  `.withBehaviors(appearanceBehavior('accent', AccentButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('hypertext', HypertextStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('lightweight', LightweightButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('outline', OutlineButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)));

package/dist/esm/badge/badge.styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { accentFillRest, bodyFont, controlCornerRadius, designUnit, foregroundOnAccentRest, neutralFillRest, neutralForegroundRest, strokeWidth, typeRampMinus1FontSize, typeRampMinus1LineHeight, } from '../design-tokens';
+import { accentFillRest, bodyFont, controlCornerRadius, designUnit, foregroundOnAccentRest, neutralFillSecondaryRest, neutralForegroundRest, strokeWidth, typeRampMinus1FontSize, typeRampMinus1LineHeight, } from '../design-tokens';
 export const badgeStyles = (context, definition) => css `
     ${display('inline-block')} :host {
       box-sizing: border-box;
@@ -27,7 +27,15 @@ export const badgeStyles = (context, definition) => css `
     }
 
     :host(.neutral) .control {
-      background: ${neutralFillRest};
+      background: ${neutralFillSecondaryRest};
       color: ${neutralForegroundRest};
     }
+
+    :host([circular]) .control {
+      border-radius: 100px;
+      min-width: calc(${typeRampMinus1LineHeight} - calc(${designUnit} * 1px));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   `;

package/dist/esm/breadcrumb-item/breadcrumb-item.styles.js

@@ -1,110 +1,101 @@
 import { css } from '@microsoft/fast-element';
 import { display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { accentForegroundActive, accentForegroundHover, accentForegroundRest, bodyFont, focusStrokeWidth, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { bodyFont, controlCornerRadius, focusStrokeOuter, focusStrokeWidth, neutralForegroundActive, neutralForegroundHover, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
 import { heightNumber } from '../styles/index';
 export const breadcrumbItemStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
       background: transparent;
-      box-sizing: border-box;
+      color: ${neutralForegroundRest};
       fill: currentcolor;
+      box-sizing: border-box;
       font-family: ${bodyFont};
       font-size: ${typeRampBaseFontSize};
       line-height: ${typeRampBaseLineHeight};
       min-width: calc(${heightNumber} * 1px);
+      border-radius: calc(${controlCornerRadius} * 1px);
       outline: none;
     }
 
     .listitem {
-        display: flex;
-        align-items: center;
+      display: flex;
+      align-items: center;
+      border-radius: inherit;
     }
 
     .control {
+      position: relative;
       align-items: center;
       box-sizing: border-box;
-      color: ${accentForegroundRest};
+      color: inherit;
+      fill: inherit;
       cursor: pointer;
       display: flex;
-      fill: inherit;
       outline: none;
       text-decoration: none;
       white-space: nowrap;
-  }
+      border-radius: inherit;
+    }
 
     .control:hover {
-        color: ${accentForegroundHover};
+      color: ${neutralForegroundHover};
     }
 
     .control:active {
-        color: ${accentForegroundActive};
-    }
-
-    .control .content {
-        position: relative;
-    }
-
-    .control .content::before {
-        content: "";
-        display: block;
-        height: calc(${strokeWidth} * 1px);
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: calc(1em + 4px);
-        width: 100%;
-    }
-
-    .control:hover .content::before {
-        background: ${accentForegroundHover};
-    }
-
-    .control:active .content::before {
-        background: ${accentForegroundActive};
+      color: ${neutralForegroundActive};
     }
 
-    .control:${focusVisible} .content::before {
-        background: ${neutralForegroundRest};
-        height: calc(${focusStrokeWidth} * 1px);
+    .control:${focusVisible}::after {
+      content: '';
+      position: absolute;
+      inset: calc(${strokeWidth} * -1px);
+      box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} inset;
+      border-radius: inherit;
     }
 
     :host(:not([href])),
-    :host([aria-current]) .control  {
-        font-weight: 600;
-        color: ${neutralForegroundRest};
-        fill: currentcolor;
-        cursor: default;
+    :host([aria-current]) .control {
+      color: ${neutralForegroundRest};
+      fill: currentcolor;
+      cursor: default;
     }
 
-    :host([aria-current]) .control:hover .content::before {
-      background: ${neutralForegroundRest};
-  }
-
     .start {
-        display: flex;
-        margin-inline-end: 6px;
+      display: flex;
+      margin-inline-end: 6px;
     }
 
     .end {
-        display: flex;
-        margin-inline-start: 6px;
+      display: flex;
+      margin-inline-start: 6px;
     }
 
     .separator {
       display: flex;
-      fill: ${neutralForegroundRest};
-      margin: 0 6px;
     }
-`.withBehaviors(forcedColorsStylesheetBehavior(css `
+  `.withBehaviors(forcedColorsStylesheetBehavior(css `
         :host(:not([href])),
         .start,
         .end,
         .separator {
+          background: ${SystemColors.ButtonFace};
           color: ${SystemColors.ButtonText};
           fill: currentcolor;
         }
-        .control:hover .content::before,
-        .control:${focusVisible} .content::before {
+        .separator {
+          fill: ${SystemColors.ButtonText};
+        }
+        :host([href]) {
+          forced-color-adjust: none;
+          background: ${SystemColors.ButtonFace};
+          color: ${SystemColors.LinkText};
+        }
+        :host([href]) .control:hover {
           background: ${SystemColors.LinkText};
+          color: ${SystemColors.HighlightText};
+          fill: currentcolor;
+        }
+        :host([href]) .control:${focusVisible}::after {
+          box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.LinkText} inset;
         }
       `));

package/dist/esm/breadcrumb-item/index.js

@@ -17,10 +17,8 @@ export const fluentBreadcrumbItem = BreadcrumbItem.compose({
         delegatesFocus: true,
     },
     separator: `
-    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg%22%3E">
-      <path
-        d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 01-.7-.7L12.8 10 7.65 4.85a.5.5 0 010-.7z"
-      />
+    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+      <path d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"/>
     </svg>
   `,
 });

package/dist/esm/button/button.stories.js

@@ -6,7 +6,7 @@ export default {
         appearance: {
             description: 'This controls the basic appearances',
             control: { type: 'select' },
-            options: ['neutral', 'accent', 'lighweight', 'outline', 'stealth'],
+            options: ['neutral', 'accent', 'lightweight', 'outline', 'stealth'],
             default: 'neutral',
         },
         disabled: {