@fluentui/web-components 3.0.0-rc.20 → 3.0.0-rc.22

package/dist/esm/link/link.styles.css

@@ -0,0 +1,68 @@
+
+  :host([hidden]){display:none}:host{display:inline}
+
+  :host {
+    position: relative;
+    box-sizing: border-box;
+    background-color: transparent;
+    color: var(--colorBrandForegroundLink);
+    cursor: pointer;
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase300);
+    font-weight: var(--fontWeightRegular);
+    overflow: inherit;
+    text-align: start;
+    text-decoration: none;
+    text-decoration-thickness: var(--strokeWidthThin);
+    text-overflow: inherit;
+    user-select: text;
+  }
+
+  :host(:is(:hover, :focus-visible)) {
+    outline: none;
+    text-decoration-line: underline;
+  }
+
+  @media (hover: hover) {
+    :host(:hover) {
+      color: var(--colorBrandForegroundLinkHover);
+    }
+
+    :host(:active) {
+      color: var(--colorBrandForegroundLinkPressed);
+    }
+
+    :host([appearance='subtle']:hover) {
+      color: var(--colorNeutralForeground2LinkHover);
+    }
+
+    :host([appearance='subtle']:active) {
+      color: var(--colorNeutralForeground2LinkPressed);
+    }
+  }
+
+  :host([appearance='subtle']) {
+    color: var(--colorNeutralForeground2Link);
+  }
+
+  :host-context(:is(h1, h2, h3, h4, h5, h6, p, fluent-text)),
+  :host([inline]) {
+    font: inherit;
+    text-decoration: underline;
+  }
+
+  :host(:not([href])) {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  ::slotted(a) {
+    position: absolute;
+    inset: 0;
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      color: LinkText;
+    }
+  }

package/dist/esm/link/link.template.html

@@ -0,0 +1,9 @@
+<f-template name="fluent-link" shadowrootmode="open">
+<template
+      tabindex="0"
+      @click="{clickHandler($e)}"
+      @keydown="{keydownHandler($e)}"
+    >{{styles}}
+      <slot></slot>
+    </template>
+</f-template>

package/dist/esm/listbox/define-async.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/listbox/define-async.js

@@ -0,0 +1,5 @@
+import { RenderableFASTElement } from '@microsoft/fast-html';
+import { definition } from './listbox.definition-async.js';
+import { Listbox } from './listbox.js';
+RenderableFASTElement(Listbox).defineAsync(definition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/listbox/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/listbox/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,qBAAqB,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/listbox/listbox.definition-async.d.ts

@@ -0,0 +1,10 @@
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+/**
+ * The async definition configuration for the fluent-listbox element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/listbox/listbox.definition-async.js

@@ -0,0 +1,14 @@
+import { tagName } from './listbox.options.js';
+/**
+ * The async definition configuration for the fluent-listbox element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const definition = {
+    name: tagName,
+    templateOptions: 'defer-and-hydrate',
+};
+//# sourceMappingURL=listbox.definition-async.js.map

package/dist/esm/listbox/listbox.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.definition-async.js","sourceRoot":"","sources":["../../../src/listbox/listbox.definition-async.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,eAAe,EAAE,mBAAmB;CACrC,CAAC"}

package/dist/esm/listbox/listbox.styles.css

@@ -0,0 +1,51 @@
+
+  :host([hidden]){display:none}:host{display:inline-flex}
+
+  :host {
+    background-color: var(--colorNeutralBackground1);
+    border-radius: var(--borderRadiusMedium);
+    border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
+    box-shadow: var(--shadow16);
+    box-sizing: border-box;
+    flex-direction: column;
+    margin: 0;
+    min-width: 160px;
+    padding: var(--spacingHorizontalXS);
+    row-gap: var(--spacingHorizontalXXS);
+    width: auto;
+  }
+
+  :host([popover]) {
+    inset: unset;
+    overflow: auto;
+  }
+
+  @supports (anchor-name: --anchor) {
+    :host([popover]) {
+      position: absolute;
+      margin-block-start: 0;
+      max-height: var(--listbox-max-height, calc(50vh - anchor-size(self-block)));
+      min-width: anchor-size(width);
+      position-anchor: --dropdown;
+      position-area: block-end span-inline-end;
+      position-try-fallbacks: flip-inline, flip-block, --flip-block, block-start;
+    }
+
+    @position-try --flip-block {
+      bottom: anchor(top);
+      top: unset;
+    }
+  }
+
+  @supports not (anchor-name: --anchor) {
+    :host([popover]) {
+      margin-block-start: var(--margin-offset, 0);
+      max-height: var(--listbox-max-height, 50vh);
+      position: fixed;
+    }
+
+    :host([popover]:state(flip-block)) {
+      margin-block-start: revert;
+      translate: 0 -100%;
+    }
+  }

package/dist/esm/listbox/listbox.template.html

@@ -0,0 +1,8 @@
+<f-template name="fluent-listbox" shadowrootmode="open">
+<template
+      @beforetoggle="{beforetoggleHandler($e)}"
+      @click="{clickHandler($e)}"
+    >{{styles}}
+      <slot f-ref="{defaultSlot}" @slotchange="{slotchangeHandler($e)}"></slot>
+    </template>
+</f-template>

package/dist/esm/menu/define-async.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/menu/define-async.js

@@ -0,0 +1,5 @@
+import { RenderableFASTElement } from '@microsoft/fast-html';
+import { definition } from './menu.definition-async.js';
+import { Menu } from './menu.js';
+RenderableFASTElement(Menu).defineAsync(definition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/menu/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/menu/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,qBAAqB,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/menu/menu.definition-async.d.ts

@@ -0,0 +1,10 @@
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+/**
+ * The async definition configuration for the fluent-menu element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/menu/menu.definition-async.js

@@ -0,0 +1,14 @@
+import { tagName } from './menu.options.js';
+/**
+ * The async definition configuration for the fluent-menu element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const definition = {
+    name: tagName,
+    templateOptions: 'defer-and-hydrate',
+};
+//# sourceMappingURL=menu.definition-async.js.map

package/dist/esm/menu/menu.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.definition-async.js","sourceRoot":"","sources":["../../../src/menu/menu.definition-async.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,eAAe,EAAE,mBAAmB;CACrC,CAAC"}

package/dist/esm/menu/menu.styles.css

@@ -0,0 +1,53 @@
+
+  :host([hidden]){display:none}:host{display:inline-block}
+
+  ::slotted([slot='trigger']) {
+    anchor-name: --menu-trigger;
+  }
+
+  ::slotted([popover]) {
+    margin: 0;
+    max-height: var(--menu-max-height, auto);
+    position-anchor: --menu-trigger;
+    position-area: block-end span-inline-end;
+    position-try-fallbacks: flip-block;
+    position: absolute;
+    z-index: 1;
+  }
+
+  :host([split]) ::slotted([popover]) {
+    position-area: block-end span-inline-start;
+  }
+
+  ::slotted([popover]:popover-open) {
+    inset: unset;
+  }
+
+  ::slotted([popover]:not(:popover-open)) {
+    display: none;
+  }
+
+  :host([split]) {
+    display: inline-flex;
+  }
+
+  :host([split]) ::slotted([slot='primary-action']) {
+    border-inline-end: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  /* Keeps focus visible visuals above trigger slot*/
+  :host([split]) ::slotted([slot='primary-action']:focus-visible) {
+    z-index: 1;
+  }
+
+  :host([split]) ::slotted([slot='primary-action'][appearance='primary']) {
+    border-inline-end: var(--strokeWidthThin) solid white;
+  }
+
+  :host([split]) ::slotted([slot='trigger']) {
+    border-inline-start: 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }

package/dist/esm/menu/menu.template.html

@@ -0,0 +1,7 @@
+<f-template name="fluent-menu" shadowrootmode="open">
+<template @keydown="{menuKeydownHandler($e)}">{{styles}}
+      <slot name="primary-action" f-ref="{primaryAction}"></slot>
+      <slot name="trigger" f-slotted="{slottedTriggers filter elements()}"></slot>
+      <slot f-slotted="{slottedMenuList filter elements()}"></slot>
+    </template>
+</f-template>

package/dist/esm/menu/menu.template.js

@@ -1,13 +1,7 @@
 import { elements, html, ref, slotted } from '@microsoft/fast-element';
 export function menuTemplate() {
     return html `
-    <template
-      ?open-on-hover="${x => x.openOnHover}"
-      ?open-on-context="${x => x.openOnContext}"
-      ?close-on-scroll="${x => x.closeOnScroll}"
-      ?persist-on-item-click="${x => x.persistOnItemClick}"
-      @keydown="${(x, c) => x.menuKeydownHandler(c.event)}"
-    >
+    <template @keydown="${(x, c) => x.menuKeydownHandler(c.event)}">
       <slot name="primary-action" ${ref('primaryAction')}></slot>
       <slot name="trigger" ${slotted({ property: 'slottedTriggers', filter: elements() })}></slot>
       <slot ${slotted({ property: 'slottedMenuList', filter: elements() })}></slot>

package/dist/esm/menu/menu.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.template.js","sourceRoot":"","sources":["../../../src/menu/menu.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAA4B,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGjG,MAAM,UAAU,YAAY;IAC1B,OAAO,IAAI,CAAG;;wBAEQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;0BAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;0BACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;gCACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB;kBACvC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAsB,CAAC;;oCAEtC,GAAG,CAAC,eAAe,CAAC;6BAC3B,OAAO,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;cAC3E,OAAO,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;;GAEvE,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAA8B,YAAY,EAAE,CAAC"}
+{"version":3,"file":"menu.template.js","sourceRoot":"","sources":["../../../src/menu/menu.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAA4B,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGjG,MAAM,UAAU,YAAY;IAC1B,OAAO,IAAI,CAAG;0BACU,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAsB,CAAC;oCAC9C,GAAG,CAAC,eAAe,CAAC;6BAC3B,OAAO,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;cAC3E,OAAO,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;;GAEvE,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAA8B,YAAY,EAAE,CAAC"}

package/dist/esm/menu-button/define-async.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/menu-button/define-async.js

@@ -0,0 +1,5 @@
+import { RenderableFASTElement } from '@microsoft/fast-html';
+import { definition } from './menu-button.definition-async.js';
+import { MenuButton } from './menu-button.js';
+RenderableFASTElement(MenuButton).defineAsync(definition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/menu-button/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/menu-button/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,qBAAqB,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/menu-button/menu-button.definition-async.d.ts

@@ -0,0 +1,10 @@
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+/**
+ * The async definition configuration for the fluent-menu-button element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/menu-button/menu-button.definition-async.js

@@ -0,0 +1,14 @@
+import { tagName } from './menu-button.options.js';
+/**
+ * The async definition configuration for the fluent-menu-button element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const definition = {
+    name: tagName,
+    templateOptions: 'defer-and-hydrate',
+};
+//# sourceMappingURL=menu-button.definition-async.js.map

package/dist/esm/menu-button/menu-button.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-button.definition-async.js","sourceRoot":"","sources":["../../../src/menu-button/menu-button.definition-async.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,eAAe,EAAE,mBAAmB;CACrC,CAAC"}

package/dist/esm/menu-button/menu-button.definition.js

@@ -1,4 +1,4 @@
-import { styles } from '../button/button.styles.js';
+import { styles } from './menu-button.styles.js';
 import { tagName } from './menu-button.options.js';
 import { MenuButton } from './menu-button.js';
 import { template } from './menu-button.template.js';

package/dist/esm/menu-button/menu-button.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-button.definition.js","sourceRoot":"","sources":["../../../src/menu-button/menu-button.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,CAAC;IAC3C,IAAI,EAAE,OAAO;IACb,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"menu-button.definition.js","sourceRoot":"","sources":["../../../src/menu-button/menu-button.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,CAAC;IAC3C,IAAI,EAAE,OAAO;IACb,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}

package/dist/esm/menu-button/menu-button.styles.css

@@ -0,0 +1,267 @@
+
+  :host([hidden]){display:none}:host{display:inline-flex}
+
+  :host {
+    --icon-spacing: var(--spacingHorizontalSNudge);
+    position: relative;
+    contain: layout style;
+    vertical-align: middle;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: center;
+    text-align: center;
+    text-decoration-line: none;
+    margin: 0;
+    min-height: 32px;
+    outline-style: none;
+    background-color: var(--colorNeutralBackground1);
+    color: var(--colorNeutralForeground1);
+    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
+    padding: 0 var(--spacingHorizontalM);
+    min-width: 96px;
+    border-radius: var(--borderRadiusMedium);
+    font-size: var(--fontSizeBase300);
+    font-family: var(--fontFamilyBase);
+    font-weight: var(--fontWeightSemibold);
+    line-height: var(--lineHeightBase300);
+    transition-duration: var(--durationFaster);
+    transition-property: background, border, color;
+    transition-timing-function: var(--curveEasyEase);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .content {
+    display: inherit;
+  }
+
+  :host(:hover) {
+    background-color: var(--colorNeutralBackground1Hover);
+    color: var(--colorNeutralForeground1Hover);
+    border-color: var(--colorNeutralStroke1Hover);
+  }
+
+  :host(:hover:active) {
+    background-color: var(--colorNeutralBackground1Pressed);
+    border-color: var(--colorNeutralStroke1Pressed);
+    color: var(--colorNeutralForeground1Pressed);
+    outline-style: none;
+  }
+
+  :host(:focus-visible) {
+    border-color: var(--colorTransparentStroke);
+    outline: var(--strokeWidthThick) solid var(--colorTransparentStroke);
+    box-shadow: var(--shadow4), 0 0 0 2px var(--colorStrokeFocus2);
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    :host {
+      transition-duration: 0.01ms;
+    }
+  }
+
+  ::slotted(svg) {
+    font-size: 20px;
+    height: 20px;
+    width: 20px;
+    fill: currentColor;
+  }
+
+  ::slotted([slot='start']) {
+    margin-inline-end: var(--icon-spacing);
+  }
+
+  ::slotted([slot='end']),
+  [slot='end'] {
+    flex-shrink: 0;
+    margin-inline-start: var(--icon-spacing);
+  }
+
+  :host([icon-only]) {
+    min-width: 32px;
+    max-width: 32px;
+  }
+
+  :host([size='small']) {
+    --icon-spacing: var(--spacingHorizontalXS);
+    min-height: 24px;
+    min-width: 64px;
+    padding: 0 var(--spacingHorizontalS);
+    border-radius: var(--borderRadiusSmall);
+    font-size: var(--fontSizeBase200);
+    line-height: var(--lineHeightBase200);
+    font-weight: var(--fontWeightRegular);
+  }
+
+  :host([size='small'][icon-only]) {
+    min-width: 24px;
+    max-width: 24px;
+  }
+
+  :host([size='large']) {
+    min-height: 40px;
+    border-radius: var(--borderRadiusLarge);
+    padding: 0 var(--spacingHorizontalL);
+    font-size: var(--fontSizeBase400);
+    line-height: var(--lineHeightBase400);
+  }
+
+  :host([size='large'][icon-only]) {
+    min-width: 40px;
+    max-width: 40px;
+  }
+
+  :host([size='large']) ::slotted(svg) {
+    font-size: 24px;
+    height: 24px;
+    width: 24px;
+  }
+
+  :host(:is([shape='circular'], [shape='circular']:focus-visible)) {
+    border-radius: var(--borderRadiusCircular);
+  }
+
+  :host(:is([shape='square'], [shape='square']:focus-visible)) {
+    border-radius: var(--borderRadiusNone);
+  }
+
+  :host([appearance='primary']) {
+    background-color: var(--colorBrandBackground);
+    color: var(--colorNeutralForegroundOnBrand);
+    border-color: transparent;
+  }
+
+  :host([appearance='primary']:hover) {
+    background-color: var(--colorBrandBackgroundHover);
+  }
+
+  :host([appearance='primary']:is(:hover, :hover:active):not(:focus-visible)) {
+    border-color: transparent;
+  }
+
+  :host([appearance='primary']:is(:hover, :hover:active)) {
+    color: var(--colorNeutralForegroundOnBrand);
+  }
+
+  :host([appearance='primary']:hover:active) {
+    background-color: var(--colorBrandBackgroundPressed);
+  }
+
+  :host([appearance='primary']:focus-visible) {
+    border-color: var(--colorNeutralForegroundOnBrand);
+    box-shadow: var(--shadow2), 0 0 0 2px var(--colorStrokeFocus2);
+  }
+
+  :host([appearance='outline']) {
+    background-color: var(--colorTransparentBackground);
+  }
+
+  :host([appearance='outline']:hover) {
+    background-color: var(--colorTransparentBackgroundHover);
+  }
+
+  :host([appearance='outline']:hover:active) {
+    background-color: var(--colorTransparentBackgroundPressed);
+  }
+
+  :host([appearance='subtle']) {
+    background-color: var(--colorSubtleBackground);
+    color: var(--colorNeutralForeground2);
+    border-color: transparent;
+  }
+
+  :host([appearance='subtle']:hover) {
+    background-color: var(--colorSubtleBackgroundHover);
+    color: var(--colorNeutralForeground2Hover);
+    border-color: transparent;
+  }
+
+  :host([appearance='subtle']:hover:active) {
+    background-color: var(--colorSubtleBackgroundPressed);
+    color: var(--colorNeutralForeground2Pressed);
+    border-color: transparent;
+  }
+
+  :host([appearance='subtle']:hover) ::slotted(svg) {
+    fill: var(--colorNeutralForeground2BrandHover);
+  }
+
+  :host([appearance='subtle']:hover:active) ::slotted(svg) {
+    fill: var(--colorNeutralForeground2BrandPressed);
+  }
+
+  :host([appearance='transparent']) {
+    background-color: var(--colorTransparentBackground);
+    color: var(--colorNeutralForeground2);
+  }
+
+  :host([appearance='transparent']:hover) {
+    background-color: var(--colorTransparentBackgroundHover);
+    color: var(--colorNeutralForeground2BrandHover);
+  }
+
+  :host([appearance='transparent']:hover:active) {
+    background-color: var(--colorTransparentBackgroundPressed);
+    color: var(--colorNeutralForeground2BrandPressed);
+  }
+
+  :host(:is([appearance='transparent'], [appearance='transparent']:is(:hover, :active))) {
+    border-color: transparent;
+  }
+
+
+  
+
+  :host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable])),
+  :host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable]):hover),
+  :host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable]):hover:active) {
+    background-color: var(--colorNeutralBackgroundDisabled);
+    border-color: var(--colorNeutralStrokeDisabled);
+    color: var(--colorNeutralForegroundDisabled);
+    cursor: not-allowed;
+  }
+
+  :host([appearance='primary']:is(:disabled, [disabled-focusable])),
+  :host([appearance='primary']:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
+    border-color: transparent;
+  }
+
+  :host([appearance='outline']:is(:disabled, [disabled-focusable])),
+  :host([appearance='outline']:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
+    background-color: var(--colorTransparentBackground);
+  }
+
+  :host([appearance='subtle']:is(:disabled, [disabled-focusable])),
+  :host([appearance='subtle']:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
+    background-color: var(--colorTransparentBackground);
+    border-color: transparent;
+  }
+
+  :host([appearance='transparent']:is(:disabled, [disabled-focusable])),
+  :host([appearance='transparent']:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
+    border-color: transparent;
+    background-color: var(--colorTransparentBackground);
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      background-color: ButtonFace;
+      color: ButtonText;
+    }
+
+    :host(:is(:hover, :focus-visible)) {
+      border-color: Highlight !important;
+    }
+
+    :host([appearance='primary']:not(:is(:hover, :focus-visible))) {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+
+    :host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable])) {
+      background-color: ButtonFace;
+      color: GrayText;
+      border-color: ButtonText;
+    }
+  }

package/dist/esm/menu-button/menu-button.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Styles for the MenuButton component
+ *
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/menu-button/menu-button.styles.js

@@ -0,0 +1,8 @@
+import { styles as ButtonStyles } from '../button/button.styles.js';
+/**
+ * Styles for the MenuButton component
+ *
+ * @public
+ */
+export const styles = ButtonStyles;
+//# sourceMappingURL=menu-button.styles.js.map

package/dist/esm/menu-button/menu-button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-button.styles.js","sourceRoot":"","sources":["../../../src/menu-button/menu-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEpE;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC"}