@fluentui/web-components 3.0.0-beta.11 → 3.0.0-beta.12

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

@@ -1,11 +1,262 @@
 import { css } from '@microsoft/fast-element';
-import { styles as ButtonStyles } from '../button/button.styles.js';
+import { borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, colorBrandBackground, colorBrandBackgroundHover, colorBrandBackgroundPressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackgroundDisabled, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForegroundDisabled, colorNeutralForegroundOnBrand, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStrokeDisabled, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundPressed, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentStroke, curveEasyEase, durationFaster, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, fontWeightSemibold, lineHeightBase200, lineHeightBase300, lineHeightBase400, shadow2, shadow4, spacingHorizontalL, spacingHorizontalM, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXS, strokeWidthThick, strokeWidthThin, } from '../theme/design-tokens.js';
+import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-stylesheet-behavior.js';
+import { display } from '../utils/display.js';
 // Need to support icon hover styles
 export const styles = css `
-  ${ButtonStyles}
+  ${display('inline-flex')}
+
+  :host {
+    --icon-spacing: ${spacingHorizontalSNudge};
+    contain: layout style;
+    vertical-align: middle;
+  }
+
+  :host .control {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: center;
+    text-decoration-line: none;
+    margin: 0;
+    min-height: 32px;
+    outline-style: none;
+    background-color: ${colorNeutralBackground1};
+    color: ${colorNeutralForeground1};
+    border: ${strokeWidthThin} solid ${colorNeutralStroke1};
+    padding: 0 ${spacingHorizontalM};
+    min-width: 96px;
+    border-radius: ${borderRadiusMedium};
+    font-size: ${fontSizeBase300};
+    font-family: ${fontFamilyBase};
+    font-weight: ${fontWeightSemibold};
+    line-height: ${lineHeightBase300};
+    transition-duration: ${durationFaster};
+    transition-property: background, border, color;
+    transition-timing-function: ${curveEasyEase};
+    cursor: pointer;
+  }
 
   .content {
+    display: inherit;
     text-align: center;
   }
-`;
+
+  :host(:hover) .control {
+    background-color: ${colorNeutralBackground1Hover};
+    color: ${colorNeutralForeground1Hover};
+    border-color: ${colorNeutralStroke1Hover};
+  }
+
+  :host(:hover:active) .control {
+    background-color: ${colorNeutralBackground1Pressed};
+    border-color: ${colorNeutralStroke1Pressed};
+    color: ${colorNeutralForeground1Pressed};
+    outline-style: none;
+  }
+
+  :host .control:focus-visible {
+    border-color: ${colorTransparentStroke};
+    outline: ${strokeWidthThick}) solid ${colorTransparentStroke};
+    box-shadow: ${shadow4}, 0 0 0 2px ${colorStrokeFocus2};
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition-duration: 0.01ms;
+  }
+
+  ::slotted(svg) {
+    font-size: 20px;
+    height: 20px;
+    width: 20px;
+    fill: currentColor;
+  }
+
+  [slot='start'],
+  ::slotted([slot='start']) {
+    margin-inline-end: var(--icon-spacing);
+  }
+
+  [slot='end'],
+  ::slotted([slot='end']) {
+    margin-inline-start: var(--icon-spacing);
+  }
+
+  :host([icon-only]) .control {
+    min-width: 32px;
+    max-width: 32px;
+  }
+
+  :host([size='small']) {
+    --icon-spacing: ${spacingHorizontalXS};
+  }
+
+  :host([size='small']) .control {
+    min-height: 24px;
+    min-width: 64px;
+    padding: 0 ${spacingHorizontalS};
+    border-radius: ${borderRadiusSmall};
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
+    font-weight: ${fontWeightRegular};
+  }
+
+  :host([size='small'][icon-only]) .control {
+    min-width: 24px;
+    max-width: 24px;
+  }
+
+  :host([size='large']) .control {
+    min-height: 40px;
+    border-radius: ${borderRadiusLarge};
+    padding: 0 ${spacingHorizontalL};
+    font-size: ${fontSizeBase400};
+    line-height: ${lineHeightBase400};
+  }
+
+  :host([size='large'][icon-only]) .control {
+    min-width: 40px;
+    max-width: 40px;
+  }
+
+  :host([size='large']) ::slotted(svg) {
+    font-size: 24px;
+    height: 24px;
+    width: 24px;
+  }
+
+  :host([shape='circular']) .control,
+  :host([shape='circular']) .control:focus-visible {
+    border-radius: ${borderRadiusCircular};
+  }
+
+  :host([shape='square']) .control,
+  :host([shape='square']) .control:focus-visible {
+    border-radius: ${borderRadiusNone};
+  }
+
+  :host([appearance='primary']) .control {
+    background-color: ${colorBrandBackground};
+    color: ${colorNeutralForegroundOnBrand};
+    border-color: transparent;
+  }
+
+  :host([appearance='primary']:hover) .control {
+    background-color: ${colorBrandBackgroundHover};
+  }
+
+  :host([appearance='primary']:hover) .control,
+  :host([appearance='primary']:hover:active) .control {
+    border-color: transparent;
+    color: ${colorNeutralForegroundOnBrand};
+  }
+
+  :host([appearance='primary']:hover:active) .control {
+    background-color: ${colorBrandBackgroundPressed};
+  }
+
+  :host([appearance='primary']) .control:focus-visible {
+    border-color: ${colorNeutralForegroundOnBrand};
+    box-shadow: ${shadow2}, 0 0 0 2px ${colorStrokeFocus2};
+  }
+
+  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"])) .control,
+  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"]):hover) .control,
+  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"]):hover:active) .control {
+    border-color: transparent;
+  }
+
+  :host([appearance='outline']) .control {
+    background-color: ${colorTransparentBackground};
+  }
+
+  :host([appearance='outline']:hover) .control {
+    background-color: ${colorTransparentBackgroundHover};
+  }
+
+  :host([appearance='outline']:hover:active) .control {
+    background-color: ${colorTransparentBackgroundPressed};
+  }
+
+  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"])) .control,
+  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"]):hover) .control,
+  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"]):hover:active) .control {
+    background-color: ${colorTransparentBackground};
+  }
+
+  :host([appearance='subtle']) .control {
+    background-color: ${colorSubtleBackground};
+    color: ${colorNeutralForeground2};
+    border-color: transparent;
+  }
+
+  :host([appearance='subtle']:hover) .control {
+    background-color: ${colorSubtleBackgroundHover};
+    color: ${colorNeutralForeground2Hover};
+    border-color: transparent;
+  }
+
+  :host([appearance='subtle']:hover:active) .control {
+    background-color: ${colorSubtleBackgroundPressed};
+    color: ${colorNeutralForeground2Pressed};
+    border-color: transparent;
+  }
+
+  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"])) .control,
+  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"]):hover) .control,
+  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"]):hover:active) .control {
+    background-color: ${colorTransparentBackground};
+    border-color: transparent;
+  }
+
+  :host([appearance='subtle']:hover) ::slotted(svg) {
+    fill: ${colorNeutralForeground2BrandHover};
+  }
+
+  :host([appearance='subtle']:hover:active) ::slotted(svg) {
+    fill: ${colorNeutralForeground2BrandPressed};
+  }
+
+  :host([appearance='transparent']) .control {
+    background-color: ${colorTransparentBackground};
+    color: ${colorNeutralForeground2};
+  }
+
+  :host([appearance='transparent']:hover) .control {
+    background-color: ${colorTransparentBackgroundHover};
+    color: ${colorNeutralForeground2BrandHover};
+  }
+
+  :host([appearance='transparent']:hover:active) .control {
+    background-color: ${colorTransparentBackgroundPressed};
+    color: ${colorNeutralForeground2BrandPressed};
+  }
+
+  :host([appearance='transparent']) .control,
+  :host([appearance='transparent']:hover) .control,
+  :host([appearance='transparent']:hover:active) .control {
+    border-color: transparent;
+  }
+
+  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"])) .control,
+  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"]):hover) .control,
+  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"]):hover:active) .control {
+    border-color: transparent;
+    background-color: ${colorTransparentBackground};
+  }
+
+  :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable])) .control,
+  :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable]):hover) .control,
+  :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable]):hover:active)
+    .control {
+    background-color: ${colorNeutralBackgroundDisabled};
+    border-color: ${colorNeutralStrokeDisabled};
+    color: ${colorNeutralForegroundDisabled};
+    cursor: not-allowed;
+  }
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
+    :host([appearance='transparent']:hover) .control {
+      border-color: Highlight;
+    }
+  `));
 //# sourceMappingURL=anchor-button.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"anchor-button.styles.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEpE,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;;;CAKf,CAAC"}
+{"version":3,"file":"anchor-button.styles.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.styles.ts"],"names":[],"mappings":"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"}

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

@@ -3,16 +3,15 @@ import { Button } from './button.js';
 import { styles } from './button.styles.js';
 import { template } from './button.template.js';
 /**
+ * The definition for the Fluent Button component.
+ *
  * @public
  * @remarks
- * HTML Element: \<fluent-button\>
+ * HTML Element: `<fluent-button>`
  */
 export const definition = Button.compose({
     name: `${FluentDesignSystem.prefix}-button`,
     template,
     styles,
-    shadowOptions: {
-        delegatesFocus: true,
-    },
 });
 //# sourceMappingURL=button.definition.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.definition.js","sourceRoot":"","sources":["../../../src/button/button.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;IACvC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,SAAS;IAC3C,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}
+{"version":3,"file":"button.definition.js","sourceRoot":"","sources":["../../../src/button/button.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;IACvC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,SAAS;IAC3C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}