@fabric-msft/fabric-web 4.0.0-beta.1 → 5.0.0

package/dist/esm/components/filter-pill/filter-pill.styles.js

@@ -1,437 +1,51 @@
-import { css } from "@microsoft/fast-element";
-import { borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, colorNeutralBackground4, colorNeutralBackground4Hover, colorNeutralBackgroundDisabled, colorNeutralBackgroundInverted, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorBrandBackground, colorBrandBackgroundHover, colorBrandBackgroundPressed, colorNeutralForeground2BrandPressed, colorNeutralForegroundDisabled, colorNeutralStroke2, colorNeutralStrokeDisabled, colorStrokeFocus2, colorSubtleBackground, colorTransparentBackground, colorTransparentStroke, curveEasyEase, display, durationFaster, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, fontWeightSemibold, lineHeightBase200, lineHeightBase300, lineHeightBase400, shadow2, shadow4, spacingHorizontalL, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXS, strokeWidthThick, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralForeground1, colorNeutralForeground2BrandSelected, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForegroundOnBrand, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorSubtleBackgroundHover, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackgroundHover, colorNeutralStrokeOnBrand, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, strokeWidthThin } from "@fluentui/web-components";
-import { forcedColorsStylesheetBehavior } from "../../util";
-import { circularState, iconOnlyState, largeState, mediumState, outlineState, pressedState, primaryState, smallState, squareState, subtleState, transparentState } from "../styles/states/states";
+import { css } from '@microsoft/fast-element';
+import { display, spacingHorizontalSNudge, colorNeutralBackground4, colorNeutralForeground1, strokeWidthThin, colorNeutralStroke1, spacingHorizontalM, spacingHorizontalXXXL, borderRadiusMedium, fontSizeBase300, fontFamilyBase, fontWeightSemibold, lineHeightBase300, durationFaster, curveEasyEase, spacingHorizontalMNudge, colorNeutralBackground1Hover, colorNeutralForeground1Hover, colorNeutralStroke1Hover, colorNeutralBackground1Pressed, colorNeutralStroke1Pressed, colorNeutralForeground1Pressed, colorTransparentStroke, strokeWidthThick, shadow4, colorStrokeFocus2, fontSizeBase600, spacingHorizontalXS, spacingHorizontalS, borderRadiusSmall, fontSizeBase200, lineHeightBase200, fontWeightRegular, spacingVerticalXXXL, spacingVerticalS, borderRadiusLarge, spacingHorizontalL, fontSizeBase400, lineHeightBase400, borderRadiusCircular, borderRadiusNone, colorNeutralBackground4Hover, colorNeutralStroke2, colorNeutralBackgroundInverted, colorNeutralForegroundOnBrand, shadow2, colorTransparentBackground, colorNeutralForeground2, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorSubtleBackground, colorSubtleBackgroundHover, colorNeutralForeground2Hover, colorSubtleBackgroundPressed, colorNeutralForeground2Pressed, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorBrandBackground, colorNeutralStrokeOnBrand, colorBrandBackgroundHover, colorBrandBackgroundPressed, colorNeutralBackgroundDisabled, colorNeutralStrokeDisabled, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorSubtleBackgroundSelected, colorNeutralForeground2Selected, colorTransparentBackgroundSelected, colorNeutralForeground2BrandSelected } from '@fluentui/web-components';
+import { sizeVerticalXXXL, sizeVerticalXL, sizeHorizontalXL, sizeVerticalXXL, sizeHorizontalXXL } from '@fabric-msft/theme';
+import '@microsoft/fast-web-utilities';
+import { forcedColorsStylesheetBehavior } from '../../util/match-media-stylesheet-behaviors.js';
+import '../../util/support.js';
+import { mediumState, largeState, iconOnlyState, smallState, circularState, squareState, primaryState, outlineState, subtleState, transparentState, pressedState } from '../styles/states/states.js';
+
 /**
  * The styles for the FilterPill component.
  *
  * @public
  * @privateRemarks
  */
-export const styles = css `
+const styles = css`
   ${display("inline-flex")}
 
-  :host {
-    --icon-spacing: ${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: ${colorNeutralBackground4};
-    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;
-    user-select: none;
-    width: fit-content;
-  }
-
-  .content {
-    display: inherit;
-    padding: 0 ${spacingHorizontalSNudge};
-  }
-
-  :host(${mediumState}) .content {
-    padding: 0 ${spacingHorizontalMNudge};
-  }
-
-  :host(${largeState}) .content {
-    padding: 0 ${spacingHorizontalM};
-  }
-
-  :host(:hover) {
-    background-color: ${colorNeutralBackground1Hover};
-    color: ${colorNeutralForeground1Hover};
-    border-color: ${colorNeutralStroke1Hover};
-  }
-
-  :host(:hover:active) {
-    background-color: ${colorNeutralBackground1Pressed};
-    border-color: ${colorNeutralStroke1Pressed};
-    color: ${colorNeutralForeground1Pressed};
-    outline-style: none;
-  }
-
-  :host(: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;
-  }
-
-  :is([slot="start"], ::slotted([slot="start"])) {
-    margin-inline-end: var(--icon-spacing);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  :is([slot="end"], ::slotted([slot="end"])) {
-    margin-inline-start: var(--icon-spacing);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  :host(${iconOnlyState}) {
-    width: 32px;
-    height: 32px;
-    min-width: 32px;
-    min-height: 32px;
-    max-width: 32px;
-    max-height: 32px;
-  }
-
-  :host(${smallState}) {
-    --icon-spacing: ${spacingHorizontalXS};
-    min-height: 24px;
-    min-width: 64px;
-    padding: 0 ${spacingHorizontalS};
-    border-radius: ${borderRadiusSmall};
-    font-size: ${fontSizeBase200};
-    line-height: ${lineHeightBase200};
-    font-weight: ${fontWeightRegular};
-  }
-
-  :host(${smallState}${iconOnlyState}) {
-    width: 24px;
-    height: 24px;
-    min-width: 24px;
-    min-height: 24px;
-    max-width: 24px;
-    max-height: 24px;
-  }
-
-  :host(${largeState}) {
-    min-height: 40px;
-    border-radius: ${borderRadiusLarge};
-    padding: 0 ${spacingHorizontalL};
-    font-size: ${fontSizeBase400};
-    line-height: ${lineHeightBase400};
-  }
-
-  :host(${largeState}${iconOnlyState}) {
-    min-width: 40px;
-    max-width: 40px;
-    max-height: 40px;
-    min-height: 40px;
-    width: 40px;
-    height: 40px;
-  }
-
-  :host(${largeState}) ::slotted(svg) {
-    font-size: 24px;
-    height: 24px;
-    width: 24px;
-  }
-
-  :host(:is(${circularState}, ${circularState}:focus-visible)) {
-    border-radius: ${borderRadiusCircular};
-  }
-
-  :host(:is(${squareState}, ${squareState}:focus-visible)) {
-    border-radius: ${borderRadiusNone};
-  }
-
-  :host(${primaryState}) {
-    background-color: ${colorNeutralBackground4};
-    color: ${colorNeutralForeground1};
-    border-color: transparent;
-  }
-
-  :host(${primaryState}:hover) {
-    background-color: ${colorNeutralBackground4Hover};
-    color: ${colorNeutralForeground1};
-  }
-
-  :host(${primaryState}:is(:hover, :hover:active)) {
-    border-color: ${colorNeutralStroke2};
-  }
-
-  :host(${primaryState}:hover:active) {
-    border-color: ${colorTransparentStroke};
-    background-color: ${colorNeutralBackgroundInverted};
-    color: ${colorNeutralForegroundOnBrand};
-  }
-
-  :host(${primaryState}:focus-visible) {
-    border-color: ${colorNeutralForegroundOnBrand};
-    box-shadow: ${shadow2}, 0 0 0 2px ${colorStrokeFocus2};
-  }
-
-  :host(${outlineState}) {
-    background-color: ${colorTransparentBackground};
-    color: ${colorNeutralForeground2};
-  }
-
-  :host(${outlineState}:hover) {
-    background-color: ${colorTransparentBackgroundHover};
-  }
-
-  :host(${outlineState}:hover:active) {
-    background-color: ${colorTransparentBackgroundPressed};
-  }
-
-  :host(${subtleState}) {
-    background-color: ${colorSubtleBackground};
-    color: ${colorNeutralForeground2};
-    border-color: transparent;
-  }
-
-  :host(${subtleState}:hover) {
-    background-color: ${colorSubtleBackgroundHover};
-    color: ${colorNeutralForeground2Hover};
-    border-color: transparent;
-  }
-
-  :host(${subtleState}:hover:active) {
-    background-color: ${colorSubtleBackgroundPressed};
-    color: ${colorNeutralForeground2Pressed};
-    border-color: transparent;
-  }
-
-  :host(${subtleState}:hover) ::slotted(svg) {
-    fill: ${colorNeutralForeground2BrandHover};
-  }
-
-  :host(${subtleState}:hover:active) ::slotted(svg) {
-    fill: ${colorNeutralForeground2BrandPressed};
-  }
-
-  :host(${transparentState}) {
-    background-color: ${colorTransparentBackground};
-    color: ${colorNeutralForeground2};
-  }
-
-  :host(${transparentState}:hover) {
-    background-color: ${colorTransparentBackgroundHover};
-    color: ${colorNeutralForeground2BrandHover};
-  }
-
-  :host(${transparentState}:hover:active) {
-    background-color: ${colorTransparentBackgroundPressed};
-    color: ${colorNeutralForeground2BrandPressed};
-  }
-
-  :host(:is(${transparentState}, ${transparentState}:is(:hover, :active))) {
-    border-color: transparent;
-  }
-
-  :host([appearance="primary-on-brand"]) {
-    background-color: ${colorBrandBackground};
-    color: ${colorNeutralForegroundOnBrand};
-    border-color: ${colorNeutralStrokeOnBrand};
-  }
-
-  :host(
-      [appearance="primary-on-brand"]:is(:hover, :hover:active):not(
-          :focus-visible
-        )
-    ) {
-    border-color: ${colorNeutralStrokeOnBrand};
-  }
-
-  :host([appearance="primary-on-brand"]:is(:hover, :hover:active)) {
-    color: ${colorNeutralForegroundOnBrand};
-    background-color: ${colorBrandBackgroundHover};
-  }
-
-  :host([appearance="primary-on-brand"]:hover:active) {
-    background-color: ${colorBrandBackgroundPressed};
-  }
-
-  :host([appearance="primary-on-brand"]:focus-visible) {
-    border-color: ${colorNeutralForegroundOnBrand};
-    box-shadow: ${shadow2}, 0 0 0 2px ${colorStrokeFocus2};
-  }
-  :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: ${colorNeutralBackgroundDisabled};
-    border-color: ${colorNeutralStrokeDisabled};
-    color: ${colorNeutralForegroundDisabled};
-    cursor: not-allowed;
-  }
-
-  :host(${primaryState}:is(:disabled, [disabled-focusable])),
-  :host(
-      ${primaryState}:is(:disabled, [disabled-focusable]):is(
-          :hover,
-          :hover:active
-        )
-    ) {
-    border-color: transparent;
-  }
-
-  :host(${outlineState}:is(:disabled, [disabled-focusable])),
-  :host(
-      ${outlineState}:is(:disabled, [disabled-focusable]):is(
-          :hover,
-          :hover:active
-        )
-    ) {
-    background-color: ${colorTransparentBackground};
-  }
-
-  :host(${subtleState}:is(:disabled, [disabled-focusable])),
-  :host(
-      ${subtleState}:is(:disabled, [disabled-focusable]):is(
-          :hover,
-          :hover:active
-        )
-    ) {
-    background-color: ${colorTransparentBackground};
-    border-color: transparent;
-  }
-
-  :host(${transparentState}:is(:disabled, [disabled-focusable])),
-  :host(
-      ${transparentState}:is(:disabled, [disabled-focusable]):is(
-          :hover,
-          :hover:active
-        )
-    ) {
-    border-color: transparent;
-    background-color: ${colorTransparentBackground};
-  }
-
-  :host(${pressedState}) {
-    border-color: ${colorTransparentStroke};
-    background-color: ${colorNeutralBackgroundInverted};
-    color: ${colorNeutralForegroundOnBrand};
-    border-width: ${strokeWidthThin};
-  }
-
-  :host(${pressedState}:hover) {
-    border-color: ${colorNeutralStroke1Hover};
-    background-color: ${colorNeutralBackground1Hover};
-  }
-
-  :host(${pressedState}:active) {
-    border-color: ${colorNeutralStroke1Pressed};
-    background-color: ${colorNeutralBackground1Pressed};
-  }
-
-  :host(${pressedState}${primaryState}) {
-    border-color: ${colorTransparentStroke};
-    background-color: ${colorNeutralBackgroundInverted};
-    color: ${colorNeutralForegroundOnBrand};
-  }
-
-  :host(${pressedState}${primaryState}:hover) {
-    background-color: ${colorNeutralForeground1};
-  }
-
-  :host(${pressedState}${primaryState}:active) {
-    border-color: ${colorTransparentStroke};
-    background-color: ${colorNeutralBackgroundInverted};
-    color: ${colorNeutralForegroundOnBrand};
-  }
-
-  :host(${pressedState}${subtleState}) {
-    border-color: transparent;
-    background-color: ${colorSubtleBackgroundSelected};
-    color: ${colorNeutralForeground2Selected};
-  }
-
-  :host(${pressedState}${subtleState}:hover) {
-    background-color: ${colorSubtleBackgroundHover};
-    color: ${colorNeutralForeground2Hover};
-  }
-
-  :host(${pressedState}${subtleState}:active) {
-    background-color: ${colorSubtleBackgroundPressed};
-    color: ${colorNeutralForeground2Pressed};
-  }
-
-  :host(${pressedState}${outlineState}),
-  :host(${pressedState}${transparentState}) {
-    background-color: ${colorTransparentBackgroundSelected};
-    color: ${colorNeutralForeground1};
-    border-color: ${colorNeutralStroke1Pressed};
-  }
-
-  :host(${pressedState}${outlineState}) {
-    border-width: ${strokeWidthThick};
-  }
-
-  :host(${pressedState}${outlineState}:hover),
-  :host(${pressedState}${transparentState}:hover) {
-    background-color: ${colorTransparentBackgroundHover};
-  }
-
-  :host(${pressedState}${outlineState}:active),
-  :host(${pressedState}${transparentState}:active) {
-    background-color: ${colorTransparentBackgroundPressed};
-    border-width: ${strokeWidthThick};
-  }
-
-  :host(${pressedState}${transparentState}) {
-    border-color: transparent;
-    color: ${colorNeutralForeground2BrandSelected};
-  }
-
-  :host(${pressedState}${transparentState}:hover) {
-    color: ${colorNeutralForeground2BrandHover};
-  }
-
-  :host(${pressedState}${transparentState}:active) {
-    color: ${colorNeutralForeground2BrandPressed};
-  }
-`.withBehaviors(forcedColorsStylesheetBehavior(css `
-    :host(${pressedState}),
-    :host(${pressedState}${primaryState}),
-    :host(${pressedState}${subtleState}),
-    :host(${pressedState}${outlineState}),
-    :host(${pressedState}${transparentState}) {
-      background: SelectedItem;
-      color: SelectedItemText;
-    }
-  `));
-//# sourceMappingURL=filter-pill.styles.js.map
+  :host{--icon-spacing:${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:${sizeVerticalXXXL};outline-style:none;background-color:${colorNeutralBackground4};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:calc(${spacingHorizontalXXXL} * 3);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;user-select:none;width:fit-content}.content{display:inherit;padding:0 ${spacingHorizontalSNudge}}:host(${mediumState}) .content{padding:0 ${spacingHorizontalMNudge}}:host(${largeState}) .content{padding:0 ${spacingHorizontalM}}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 ${strokeWidthThick} ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:${fontSizeBase600};height:${sizeVerticalXL};width:${sizeHorizontalXL}}:is([slot="start"],::slotted([slot="start"])){margin-inline-end:var(--icon-spacing);display:flex;justify-content:center;align-items:center}:is([slot="end"],::slotted([slot="end"])){margin-inline-start:var(--icon-spacing);display:flex;justify-content:center;align-items:center}:host(${iconOnlyState}){width:${sizeVerticalXXXL};height:${sizeVerticalXXXL};min-width:${sizeVerticalXXXL};min-height:${sizeVerticalXXXL};max-width:${sizeVerticalXXXL};max-height:${sizeVerticalXXXL}}:host(${smallState}){--icon-spacing:${spacingHorizontalXS};min-height:${sizeVerticalXXL};min-width:calc(${spacingHorizontalXXXL} * 2);padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host(${smallState}${iconOnlyState}){width:${sizeVerticalXXL};height:${sizeVerticalXXL};min-width:${sizeVerticalXXL};min-height:${sizeVerticalXXL};max-width:${sizeVerticalXXL};max-height:${sizeVerticalXXL}}:host(${largeState}){min-height:calc(${spacingVerticalXXXL} + ${spacingVerticalS});border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${largeState}${iconOnlyState}){min-width:calc(${spacingVerticalXXXL} + ${spacingVerticalS});max-width:calc(${spacingVerticalXXXL} + ${spacingVerticalS});max-height:calc(${spacingVerticalXXXL} + ${spacingVerticalS});min-height:calc(${spacingVerticalXXXL} + ${spacingVerticalS});width:calc(${spacingVerticalXXXL} + ${spacingVerticalS});height:calc(${spacingVerticalXXXL} + ${spacingVerticalS})}:host(${largeState}) ::slotted(svg){font-size:${fontSizeBase600};height:${sizeVerticalXXL};width:${sizeHorizontalXXL}}:host(:is(${circularState},${circularState}:focus-visible)){border-radius:${borderRadiusCircular}}:host(:is(${squareState},${squareState}:focus-visible)){border-radius:${borderRadiusNone}}:host(${primaryState}){background-color:${colorNeutralBackground4};color:${colorNeutralForeground1};border-color:transparent}:host(${primaryState}:hover){background-color:${colorNeutralBackground4Hover};color:${colorNeutralForeground1}}:host(${primaryState}:is(:hover,:hover:active)){border-color:${colorNeutralStroke2}}:host(${primaryState}:hover:active){border-color:${colorTransparentStroke};background-color:${colorNeutralBackgroundInverted};color:${colorNeutralForegroundOnBrand}}:host(${primaryState}:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 ${strokeWidthThick} ${colorStrokeFocus2}}:host(${outlineState}){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host(${outlineState}:hover){background-color:${colorTransparentBackgroundHover}}:host(${outlineState}:hover:active){background-color:${colorTransparentBackgroundPressed}}:host(${subtleState}){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host(${subtleState}:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host(${subtleState}:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(${subtleState}:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host(${subtleState}:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host(${transparentState}){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host(${transparentState}:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host(${transparentState}:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host(:is(${transparentState},${transparentState}:is(:hover,:active))){border-color:transparent}:host([appearance="primary-on-brand"]){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:${colorNeutralStrokeOnBrand}}:host(
+    [appearance="primary-on-brand"]:is(:hover,:hover:active):not(
+        :focus-visible
+      )
+  ){border-color:${colorNeutralStrokeOnBrand}}:host([appearance="primary-on-brand"]:is(:hover,:hover:active)){color:${colorNeutralForegroundOnBrand};background-color:${colorBrandBackgroundHover}}:host([appearance="primary-on-brand"]:hover:active){background-color:${colorBrandBackgroundPressed}}:host([appearance="primary-on-brand"]:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 ${strokeWidthThick} ${colorStrokeFocus2}}: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:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}:host(${primaryState}:is(:disabled,[disabled-focusable])),:host(
+    ${primaryState}:is(:disabled,[disabled-focusable]):is(
+      :hover,:hover:active
+    )
+  ){border-color:transparent}:host(${outlineState}:is(:disabled,[disabled-focusable])),:host(
+    ${outlineState}:is(:disabled,[disabled-focusable]):is(
+      :hover,:hover:active
+    )
+  ){background-color:${colorTransparentBackground}}:host(${subtleState}:is(:disabled,[disabled-focusable])),:host(
+    ${subtleState}:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)
+  ){background-color:${colorTransparentBackground};border-color:transparent}:host(${transparentState}:is(:disabled,[disabled-focusable])),:host(
+    ${transparentState}:is(:disabled,[disabled-focusable]):is(
+      :hover,:hover:active
+    )
+  ){border-color:transparent;background-color:${colorTransparentBackground}}:host(${pressedState}){border-color:${colorTransparentStroke};background-color:${colorNeutralBackgroundInverted};color:${colorNeutralForegroundInverted};border-width:${strokeWidthThin}}:host(${pressedState}:hover){border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover}}:host(${pressedState}:active){border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed};color:${colorNeutralForeground1Pressed}}:host(${pressedState}${primaryState}){border-color:${colorTransparentStroke};background-color:${colorNeutralBackgroundInverted};color:${colorNeutralForegroundInverted}}:host(${pressedState}${primaryState}:hover){background-color:${colorNeutralForeground1};color:${colorNeutralForegroundInverted}}:host(${pressedState}${primaryState}:active){border-color:${colorTransparentStroke};background-color:${colorNeutralBackgroundInverted};color:${colorNeutralForegroundInverted}}:host(${pressedState}${subtleState}){border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host(${pressedState}${subtleState}:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host(${pressedState}${subtleState}:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host(${pressedState}${outlineState}),:host(${pressedState}${transparentState}){background-color:${colorTransparentBackgroundSelected};color:${colorNeutralForeground1};border-color:${colorNeutralStroke1Pressed}}:host(${pressedState}${outlineState}){border-width:${strokeWidthThick}}:host(${pressedState}${outlineState}:hover),:host(${pressedState}${transparentState}:hover){background-color:${colorTransparentBackgroundHover}}:host(${pressedState}${outlineState}:active),:host(${pressedState}${transparentState}:active){background-color:${colorTransparentBackgroundPressed};border-width:${strokeWidthThick}}:host(${pressedState}${transparentState}){border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host(${pressedState}${transparentState}:hover){color:${colorNeutralForeground2BrandHover}}:host(${pressedState}${transparentState}:active){color:${colorNeutralForeground2BrandPressed}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host(${pressedState}),:host(${pressedState}${primaryState}),:host(${pressedState}${subtleState}),:host(${pressedState}${outlineState}),:host(${pressedState}${transparentState}){background:SelectedItem;color:SelectedItemText}`));
+
+export { styles };

package/dist/esm/components/filter-pill/filter-pill.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-pill.styles.js","sourceRoot":"","sources":["../../../../../../../src/components/filter-pill/filter-pill.styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"filter-pill.styles.js","sourceRoot":"","sources":["../../../../../../../src/components/filter-pill/filter-pill.styles.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/filter-pill/filter-pill.template.js

@@ -1,35 +1,18 @@
-import { html, slotted } from "@microsoft/fast-element";
-import { endSlotTemplate, startSlotTemplate } from "@fluentui/web-components";
+import { slotted, html } from '@microsoft/fast-element';
+
 /**
  * Generates a template for the Button component.
  *
  * @public
  */
-export function filterPillTemplate(options = {}) {
-    return html `
-    <template
-      tabindex="${(x) => (x.disabled ? -1 : 0)}"
-      @click="${(x, c) => x.clickHandler(c.event)}"
-      @keypress="${(x, c) => x.keypressHandler(c.event)}"
-      appearance="${(x) => x.appearance}"
-      shape="${(x) => x.shape}"
-      size="${(x) => x.size}"
-      icon-only="${(x) => x.iconOnly}"
-      aria-pressed="${(x) => x.pressed}"
-      aria-label="${(x) => x.ariaLabel}"
-    >
-      ${startSlotTemplate(options)}
-      <span class="content" part="content">
-        <slot ${slotted("defaultSlottedContent")}></slot>
-      </span>
-      ${endSlotTemplate(options)}
-    </template>
-  `;
+function filterPillTemplate() {
+  return html`<template tabindex="${x => x.disabled ? -1 : 0}" appearance="${x => x.appearance}" shape="${x => x.shape}" size="${x => x.size}" icon-only="${x => x.iconOnly}" aria-label="${x => x.ariaLabel}" ?pressed="${x => x.pressed}" ?disabled="${x => x.disabled}"><slot name="start"></slot><span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot></span><slot name="end"></slot></template>`;
 }
 /**
  * The template for the Button component.
  *
  * @public
  */
-export const template = filterPillTemplate();
-//# sourceMappingURL=filter-pill.template.js.map
+const template = filterPillTemplate();
+
+export { filterPillTemplate, template };

package/dist/esm/components/filter-pill/filter-pill.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-pill.template.js","sourceRoot":"","sources":["../../../../../../../src/components/filter-pill/filter-pill.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAI9E;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAChC,UAA6B,EAAE;IAE/B,OAAO,IAAI,CAAG;;kBAEE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC9B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;mBAC5C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAsB,CAAC;oBACpD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU;eACxB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK;cACf,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI;mBACR,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;sBACd,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO;oBAClB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS;;QAE9B,iBAAiB,CAAC,OAAO,CAAC;;gBAElB,OAAO,CAAC,uBAAuB,CAAC;;QAExC,eAAe,CAAC,OAAO,CAAC;;GAE7B,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"filter-pill.template.js","sourceRoot":"","sources":["../../../../../../../src/components/filter-pill/filter-pill.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAIxD;;;;GAIG;AACH,MAAM,UAAU,kBAAkB;IAGhC,OAAO,IAAI,CAAG;;kBAEE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBAC1B,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU;eACxB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK;cACf,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI;mBACR,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;oBAChB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS;kBACpB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO;mBACf,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;;;;gBAIpB,OAAO,CAAC,uBAAuB,CAAC;;;;GAI7C,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC,kBAAkB,EAAE,CAAC"}

package/dist/esm/components/filter-pill/index.js

@@ -1,6 +1,4 @@
-export { definition as FilterPillDefinition } from "./filter-pill.definition";
-export { FilterPill } from "./filter-pill";
-export { styles as FilterPillStyles } from "./filter-pill.styles";
-export { template as FilterPillTemplate } from "./filter-pill.template";
-export { FilterPillAppearance, FilterPillEventNames, FilterPillShape, FilterPillSize, FilterPillFormTarget, FilterPillType } from "./filter-pill.options";
+export { definition as FilterPillDefinition } from "./filter-pill.definition.js";
+export { FilterPill } from "./filter-pill.js";
+export { FilterPillAppearances, FilterPillShapes, FilterPillSizes, FilterPillFormTargets, FilterPillTypes, FilterPillEventNames } from "./filter-pill.options.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/filter-pill/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/filter-pill/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EACpB,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,cAAc,EACf,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/filter-pill/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACrB,eAAe,EACf,oBAAoB,EACrB,MAAM,0BAA0B,CAAC"}

package/dist/esm/components/image/define.js

@@ -1,4 +1,4 @@
-import { definition } from "./image.definition";
-import { DesignSystem } from "../design-system";
+import { definition } from "./image.definition.js";
+import { DesignSystem } from "../design-system.js";
 definition.define(DesignSystem.registry);
 //# sourceMappingURL=define.js.map

package/dist/esm/components/image/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/image/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/image/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/components/image/image.definition.js

@@ -1,16 +1,19 @@
-import { Image, ImageStyles, ImageTemplate } from "@fluentui/web-components";
-import { DesignSystem } from "../design-system";
+import { Image } from './image.js';
+import { ImageStyles, ImageTemplate } from '@fluentui/web-components';
+import { DesignSystem } from '../design-system.js';
+
 /**
  * The Fabric Image component.
  *
  * @public
  */
-export const definition = Image.compose({
-    name: `${DesignSystem.prefix}-image`,
-    template: ImageTemplate,
-    styles: ImageStyles,
-    shadowOptions: {
-        delegatesFocus: true
-    }
+const definition = Image.compose({
+  name: `${DesignSystem.prefix}-image`,
+  template: ImageTemplate,
+  styles: ImageStyles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
 });
-//# sourceMappingURL=image.definition.js.map
+
+export { definition };

package/dist/esm/components/image/image.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/image/image.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;IACtC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,QAAQ;IACpC,QAAQ,EAAE,aAAa;IACvB,MAAM,EAAE,WAAW;IACnB,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}
+{"version":3,"file":"image.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/image/image.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;IACtC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,QAAQ;IACpC,QAAQ,EAAE,aAAa;IACvB,MAAM,EAAE,WAAW;IACnB,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/dist/esm/components/image/image.js

@@ -1,4 +1,5 @@
-import { Image as FluentImage } from "@fluentui/web-components";
+import { Image as Image$1 } from '@fluentui/web-components';
+
 /**
  * Image
  * @summary A Fabric UI Image component that provides a customizable image element with layout, border, shadow, fit, and shape options.
@@ -28,6 +29,6 @@ import { Image as FluentImage } from "@fluentui/web-components";
  * @tagname fabric-image
  * @public
  */
-export class Image extends FluentImage {
-}
-//# sourceMappingURL=image.js.map
+class Image extends Image$1 {}
+
+export { Image };