@fluentui/web-components 1.5.6 → 1.6.3

package/dist/dts/utilities/math.d.ts

@@ -1,20 +1,24 @@
 /**
  * Adds numbers or functions that accept a design system and return a number.
  * @internal
+ * @deprecated
  */
 export declare function add<T>(...args: Array<number | ((designSystem: T) => number)>): (designSystem?: T) => number;
 /**
  * Subtract numbers or functions that accept a design system and return a number.
  * @internal
+ * @deprecated
  */
 export declare function subtract<T>(...args: Array<number | ((designSystem: T) => number)>): (designSystem?: T) => number;
 /**
  * Multiplies numbers or functions that accept a design system and return a number.
  * @internal
+ * @deprecated
  */
 export declare function multiply<T>(...args: Array<number | ((designSystem: T) => number)>): (designSystem?: T) => number;
 /**
  * Divides numbers or functions that accept a design system and return a number.
  * @internal
+ * @deprecated
  */
 export declare function divide<T>(...args: Array<number | ((designSystem: T) => number)>): (designSystem?: T) => number;

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

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

package/dist/esm/anchored-region/anchored-region.stories.js

@@ -1,4 +1,4 @@
-import { STORY_RENDERED } from '@storybook/core-events';
+import { DOCS_RENDERED } from '@storybook/core-events';
 import addons from '@storybook/addons';
 import { Direction, RtlScrollConverter } from '@microsoft/fast-web-utilities';
 import { AnchoredRegion } from '@microsoft/fast-foundation';
@@ -6,8 +6,8 @@ import AnchoreRegionTemplate from './fixtures/base.html';
 import './index';
 let scalingViewportPreviousXValue = 250;
 let scalingViewportPreviousYValue = 250;
-addons.getChannel().addListener(STORY_RENDERED, (name) => {
-    if (name.toLowerCase().startsWith('components-anchored-region')) {
+addons.getChannel().addListener(DOCS_RENDERED, (name) => {
+    if (name.toLowerCase().includes('anchored region')) {
         scrollViewports();
         setButtonActions();
         const scalingViewportUpdate = document.getElementById('viewport-scaling-update');

package/dist/esm/badge/badge.stories.js

@@ -10,7 +10,7 @@ export default {
     },
 };
 const BadgeTemplate = ({ appearance, label }) => `
-  <fluent-badge 
+  <fluent-badge
     ${appearance ? `appearance="${appearance}"` : ''}
   >${label}</fluent-badge>`;
 export const Badge = BadgeTemplate.bind({});
@@ -21,7 +21,7 @@ Badge.args = {
 Badge.parameters = {
     docs: {
         source: {
-            code: `<fluent-badge appearance="neutral">Text</fluent-badge>`,
+            code: `<fluent-badge appearance="accent">Text</fluent-badge>`,
         },
     },
 };

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

@@ -96,15 +96,15 @@ export const breadcrumbItemStyles = (context, definition) => css `
       margin: 0 6px;
     }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host(:not([href])) {
+        :host(:not([href])),
+        .start,
+        .end,
+        .separator {
           color: ${SystemColors.ButtonText};
           fill: currentcolor;
         }
         .control:hover .content::before,
-      .control:${focusVisible} .content::before {
+        .control:${focusVisible} .content::before {
           background: ${SystemColors.LinkText};
         }
-        .separator {
-          fill: ${SystemColors.ButtonText};
-        }
       `));

package/dist/esm/card/card.stories.js

@@ -5,7 +5,7 @@ export default {
 };
 export const Card = () => CardTemplate;
 const example = `
-<fluent-card>Card Content</fluent-card>
+<fluent-card>Card content in default slot</fluent-card>
 `;
 Card.parameters = {
     docs: {

package/dist/esm/checkbox/checkbox.stories.js

@@ -26,13 +26,13 @@ const CheckboxTemplate = ({ checked, disabled, label, required }) => `<fluent-ch
     >${label}</fluent-checkbox>`;
 export const Checkbox = CheckboxTemplate.bind({});
 Checkbox.args = {
-    label: 'Label',
+    label: 'Label string',
     checked: false,
     disabled: false,
     required: false,
 };
 const example = `
-<fluent-checkbox>Checkbox</fluent-checkbox>
+<fluent-checkbox>Label string</fluent-checkbox>
 `;
 Checkbox.parameters = {
     docs: {

package/dist/esm/combobox/combobox.stories.js

@@ -21,6 +21,11 @@ export default {
     },
 };
 const ComboboxTemplate = ({ appearance, autocomplete, position, required }) => `
+  <style>
+    div.docs-story>div:first-child {
+      height: 32em !important;
+    }
+  </style>
   <fluent-combobox
     ${appearance ? `appearance="${appearance}"` : ''}
     ${appearance ? `autocomplete="${autocomplete}"` : ''}

package/dist/esm/data-grid/data-grid.stories.js

@@ -1,7 +1,7 @@
 import { html } from '@microsoft/fast-element';
 import { GenerateHeaderOptions } from '@microsoft/fast-foundation/dist/esm/data-grid/data-grid.options';
 import addons from '@storybook/addons';
-import { STORY_RENDERED } from '@storybook/core-events';
+import { DOCS_RENDERED } from '@storybook/core-events';
 import DataGridTemplate from './fixtures/base.html';
 import './index';
 /* eslint-disable @typescript-eslint/ban-types */
@@ -39,8 +39,8 @@ const customHeaderCellItemTemplate = html `
         :columnDefinition="${x => x}"
     ></fast-data-grid-header-cell>
 `;
-addons.getChannel().addListener(STORY_RENDERED, (name) => {
-    if (name.toLowerCase().startsWith('components-data-grid')) {
+addons.getChannel().addListener(DOCS_RENDERED, (name) => {
+    if (name.toLowerCase().includes('components/data grid')) {
         defaultGridElement = document.getElementById('defaultGrid');
         reset();
         const defaultGridRow = document.getElementById('defaultGridRow');