@fluentui/web-components 1.5.6 → 1.6.3

package/dist/esm/number-field/number-field.stories.js

@@ -34,6 +34,7 @@ export default {
         },
         step: {
             control: { type: 'number' },
+            defaultValue: 1,
         },
         size: {
             control: { type: 'number' },
@@ -71,7 +72,7 @@ NumberField.args = {
     required: false,
 };
 const example = `
-<fluent-number-field></fluent-number-field>
+<fluent-number-field appearance="outline" ></fluent-number-field>
 `;
 NumberField.parameters = {
     docs: {

package/dist/esm/progress/progress/index.js

@@ -1,5 +1,11 @@
-import { BaseProgress as Progress, progressTemplate as template } from '@microsoft/fast-foundation';
+import { BaseProgress, progressTemplate as template } from '@microsoft/fast-foundation';
 import { progressStyles as styles } from './progress.styles';
+/**
+ * Progress base class
+ * @public
+ */
+export class Progress extends BaseProgress {
+}
 /**
  * The Fluent Progress Element. Implements {@link @microsoft/fast-foundation#BaseProgress},
  * {@link @microsoft/fast-foundation#progressTemplate}
@@ -25,8 +31,3 @@ export const fluentProgress = Progress.compose({
  * @public
  */
 export const progressStyles = styles;
-/**
- * Progress base class
- * @public
- */
-export { Progress };

package/dist/esm/progress/progress/progress.stories.js

@@ -16,16 +16,44 @@ const ProgressTemplate = ({ paused, value }) => `
 `;
 export const Progress = ProgressTemplate.bind({});
 Progress.args = {
-    value: 50,
     paused: false,
+    value: 50,
 };
-const example = `
-<fluent-progress min="0" max="100" value="75"></fluent-progress>
+const defaultExample = `
+<fluent-progress min="0" max="100" value="${Progress.args.value}"></fluent-progress>
 `;
 Progress.parameters = {
     docs: {
         source: {
-            code: example,
+            code: defaultExample,
+        },
+    },
+};
+export const ProgressAnimated = ProgressTemplate.bind({});
+ProgressAnimated.args = {
+    paused: false,
+};
+export const ProgressPaused = ProgressTemplate.bind({});
+ProgressPaused.args = {
+    paused: true,
+};
+const animatedExample = `
+<fluent-progress></fluent-progress>
+`;
+const pausedExample = `
+<fluent-progress paused></fluent-progress>
+`;
+ProgressAnimated.parameters = {
+    docs: {
+        source: {
+            code: animatedExample,
+        },
+    },
+};
+ProgressPaused.parameters = {
+    docs: {
+        source: {
+            code: pausedExample,
         },
     },
 };

package/dist/esm/progress/progress-ring/index.js

@@ -1,5 +1,11 @@
-import { BaseProgress as ProgressRing, progressRingTemplate as template, } from '@microsoft/fast-foundation';
+import { BaseProgress, progressRingTemplate as template } from '@microsoft/fast-foundation';
 import { progressRingStyles as styles } from './progress-ring.styles';
+/**
+ * Progress Ring base class
+ * @public
+ */
+export class ProgressRing extends BaseProgress {
+}
 /**
  * The Fluent Progress Ring Element. Implements {@link @microsoft/fast-foundation#BaseProgress},
  * {@link @microsoft/fast-foundation#progressRingTemplate}
@@ -37,8 +43,3 @@ export const fluentProgressRing = ProgressRing.compose({
  * @public
  */
 export const progressRingStyles = styles;
-/**
- * Progress Ring base class
- * @public
- */
-export { ProgressRing };

package/dist/esm/progress/progress-ring/progress-ring.stories.js

@@ -8,22 +8,52 @@ export default {
         },
     },
 };
-const ProgressRingTemplate = ({ paused }) => `
-  <fluent-progress-ring 
+const ProgressRingTemplate = ({ paused, value }) => `
+  <fluent-progress-ring
+    ${value ? `value="${value}"` : ''}
     ${paused ? `paused="${paused}"` : ''}
   ></fluent-progress-ring>
 `;
 export const ProgressRing = ProgressRingTemplate.bind({});
 ProgressRing.args = {
     paused: false,
+    value: 65,
 };
-const example = `
-<fluent-progress-ring min="0" max="100" value="75"></fluent-progress-ring>
+const defaultExample = `
+<fluent-progress-ring min="0" max="100" value="${ProgressRing.args.value}"></fluent-progress-ring>
 `;
 ProgressRing.parameters = {
     docs: {
         source: {
-            code: example,
+            code: defaultExample,
+        },
+    },
+};
+export const ProgressRingAnimated = ProgressRingTemplate.bind({});
+ProgressRingAnimated.args = {
+    paused: false,
+};
+export const ProgressRingPaused = ProgressRingTemplate.bind({});
+ProgressRingPaused.args = {
+    paused: true,
+};
+const animatedExample = `
+<fluent-progress-ring></fluent-progress-ring>
+`;
+const pausedExample = `
+<fluent-progress-ring paused></fluent-progress-ring>
+`;
+ProgressRingAnimated.parameters = {
+    docs: {
+        source: {
+            code: animatedExample,
+        },
+    },
+};
+ProgressRingPaused.parameters = {
+    docs: {
+        source: {
+            code: pausedExample,
         },
     },
 };

package/dist/esm/radio-group/radio-group.stories.js

@@ -18,6 +18,7 @@ const RadioGroupTemplate = ({ disabled, required }) => `
   >
     <fluent-radio>Apples</fluent-radio>
     <fluent-radio>Bananas</fluent-radio>
+    <fluent-radio>Tomatoes</fluent-radio>
   </fluent-radio-group>`;
 export const RadioGroup = RadioGroupTemplate.bind({});
 RadioGroup.args = {
@@ -25,10 +26,11 @@ RadioGroup.args = {
     required: false,
 };
 const example = `
-<fluent-radio-group name="numbers">
+<fluent-radio-group name="fruits" >
   <label style="color: --var(neutral-foreground-rest)" slot="label"> Numbers </label>
-  <fluent-radio value="one">One</fluent-radio>
-  <fluent-radio value="two">Two</fluent-radio>
+  <fluent-radio>Apples</fluent-radio>
+  <fluent-radio>Bananas</fluent-radio>
+  <fluent-radio>Bananas</fluent-radio>
 </fluent-radio-group>
 `;
 RadioGroup.parameters = {

package/dist/esm/slider/slider.stories.js

@@ -10,9 +10,9 @@ export default {
     },
 };
 const SliderTemplate = ({ orientation }) => `
-  <fluent-slider 
+  <fluent-slider
     ${orientation ? `orientation="${orientation}"` : ''}
-    min="0" max="100" step="10"
+    min="0" max="100" step="10" style="width:80%;"
   >
     <fluent-slider-label position="0"> 0&#8451; </fluent-slider-label>
     <fluent-slider-label position="10"> 10&#8451; </fluent-slider-label>
@@ -24,7 +24,12 @@ Slider.args = {
     orientation: 'horizontal',
 };
 const example = `
-<fluent-slider></fluent-slider>
+<fluent-slider min="0" max="100" step="10" orientation="horizontal" style="width:80%;">
+  <fluent-slider-label position="0"> 0&#8451; </fluent-slider-label>
+  <fluent-slider-label position="10"> 10&#8451; </fluent-slider-label>
+  <fluent-slider-label position="90"> 90&#8451; </fluent-slider-label>
+  <fluent-slider-label position="100"> 100&#8451; </fluent-slider-label>
+</fluent-slider>
 `;
 Slider.parameters = {
     docs: {

package/dist/esm/styles/elevation.js

@@ -6,10 +6,12 @@
  * https://github.com/microsoft/fast/issues/2778
  *
  * @internal
+ * @deprecated Will be replaced
  */
 export const ambientShadow = '0 0 calc((var(--elevation) * 0.225px) + 2px) rgba(0, 0, 0, calc(.11 * (2 - var(--background-luminance, 1))))';
 /**
  * @internal
+ * @deprecated Will be replaced
  */
 export const directionalShadow = '0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgba(0, 0, 0, calc(.13 * (2 - var(--background-luminance, 1))))';
 /**
@@ -18,5 +20,6 @@ export const directionalShadow = '0 calc(var(--elevation) * 0.4px) calc((var(--e
  * by setting --elevation to a number.
  *
  * @public
+ * @deprecated Will be replaced
  */
 export const elevation = `box-shadow: ${ambientShadow}, ${directionalShadow};`;

package/dist/esm/switch/switch.stories.js

@@ -15,7 +15,11 @@ const SwitchTemplate = ({ checked, disabled }) => `
 <fluent-switch
   ${checked ? 'checked' : ''}
   ${disabled ? 'disabled' : ''}
-></fluent-switch>
+>
+  <span slot="checked-message">On</span>
+  <span slot="unchecked-message">Off</span>
+  <label for="direction-switch">Captions:</label>
+</fluent-switch>
 `;
 export const Switch = SwitchTemplate.bind({});
 Switch.args = {
@@ -23,7 +27,11 @@ Switch.args = {
     disabled: false,
 };
 const example = `
-<fluent-switch></fluent-switch>
+<fluent-switch>
+  <span slot="checked-message">On</span>
+  <span slot="unchecked-message">Off</span>
+  <label for="direction-switch">Captions:</label>
+</fluent-switch>
 `;
 Switch.parameters = {
     docs: {

package/dist/esm/tabs/tabs.stories.js

@@ -29,10 +29,10 @@ export const Tabs = TabsTemplate.bind({});
 Tabs.args = {
     activeId: 'TabTwo',
     activeIndicator: true,
-    orientation: 'vertical',
+    orientation: 'horizontal',
 };
 const example = `
-<fluent-tabs id="myTab" activeId="TabTwo">
+<fluent-tabs id="myTab" activeId="TabTwo" orientation="horizontal">
   <fluent-tab id="TabOne">Tab one</fluent-tab>
   <fluent-tab id="TabTwo">Tab two</fluent-tab>
   <fluent-tab id="TabThree">Tab three</fluent-tab>

package/dist/esm/text-area/text-area.stories.js

@@ -4,7 +4,8 @@ export default {
     component: fluentTextArea,
     argTypes: {
         appearance: {
-            options: ['filled'],
+            options: ['filled', 'outline'],
+            defaultValue: 'outline',
             control: { type: 'radio' },
         },
         autoFocus: {
@@ -44,7 +45,7 @@ TextArea.args = {
     required: false,
 };
 const example = `
-<fluent-text-area></fluent-text-area>
+<fluent-text-area appearance="outline"></fluent-text-area>
 `;
 TextArea.parameters = {
     docs: {

package/dist/esm/text-field/text-field.stories.js

@@ -4,8 +4,8 @@ export default {
     component: fluentTextField,
     argTypes: {
         appearance: {
-            defaultValue: 'outlined',
-            options: ['filled', 'outlined'],
+            options: ['filled', 'outline'],
+            defaultValue: 'outline',
             control: { type: 'radio' },
         },
         autoFocus: {
@@ -77,7 +77,7 @@ TextField.args = {
     required: false,
 };
 const example = `
-<fluent-text-field></fluent-text-field>
+<fluent-text-field appearance="outline"></fluent-text-field>
 `;
 TextField.parameters = {
     docs: {

package/dist/esm/tree-view/tree-view.stories.js

@@ -12,6 +12,11 @@ export default {
     },
 };
 const TreeViewTemplate = ({ disabled, renderCollapsedNodes }) => `
+<style>
+div.docs-story>div:first-child {
+  height: 22em !important;
+}
+</style>
 <fluent-tree-view
   ${disabled ? 'disabled' : ''}
   ${renderCollapsedNodes ? `render-collapsed-nodes="${renderCollapsedNodes}` : ''}
@@ -48,14 +53,31 @@ TreeView.args = {
 };
 const example = `
 <fluent-tree-view>
-  <fluent-tree-item selected>Daisy</fluent-tree-item>
-  <fluent-tree-item>Sunflower</fluent-tree-item>
-  <fluent-tree-item>Rose</fluent-tree-item>
-  <fluent-divider></fluent-divider>
-  <fluent-tree-item>Petunia</fluent-tree-item>
-  <fluent-tree-item>Tulip</fluent-tree-item>
-</fluent-tree-view>
-`;
+  <fluent-tree-item>
+    Root item 1
+    <fluent-tree-item>
+      Flowers
+      <fluent-tree-item disabled>Daisy</fluent-tree-item>
+      <fluent-tree-item>Sunflower</fluent-tree-item>
+      <fluent-tree-item>Rose</fluent-tree-item>
+    </fluent-tree-item>
+    <fluent-tree-item>Nested item 2</fluent-tree-item>
+    <fluent-tree-item>Nested item 3</fluent-tree-item>
+  </fluent-tree-item>
+  <fluent-tree-item>
+    Root item 2
+    <fluent-divider></fluent-divider>
+    <fluent-tree-item>
+      Flowers
+      <fluent-tree-item disabled>Daisy</fluent-tree-item>
+      <fluent-tree-item>Sunflower</fluent-tree-item>
+      <fluent-tree-item>Rose</fluent-tree-item>
+    </fluent-tree-item>
+    <fluent-tree-item>Nested item 2</fluent-tree-item>
+    <fluent-tree-item>Nested item 3</fluent-tree-item>
+  </fluent-tree-item>
+  <fluent-tree-item> Root item 3 - Leaf Erikson </fluent-tree-item>
+</fluent-tree-view>`;
 TreeView.parameters = {
     docs: {
         source: {

package/dist/esm/utilities/math.js

@@ -18,6 +18,7 @@ const _divide = performOperation((a, b) => a / b);
 /**
  * Adds numbers or functions that accept a design system and return a number.
  * @internal
+ * @deprecated
  */
 export function add(...args) {
     return _add.apply(this, args);
@@ -25,6 +26,7 @@ export function add(...args) {
 /**
  * Subtract numbers or functions that accept a design system and return a number.
  * @internal
+ * @deprecated
  */
 export function subtract(...args) {
     return _subtract.apply(this, args);
@@ -32,6 +34,7 @@ export function subtract(...args) {
 /**
  * Multiplies numbers or functions that accept a design system and return a number.
  * @internal
+ * @deprecated
  */
 export function multiply(...args) {
     return _multiply.apply(this, args);
@@ -39,6 +42,7 @@ export function multiply(...args) {
 /**
  * Divides numbers or functions that accept a design system and return a number.
  * @internal
+ * @deprecated
  */
 export function divide(...args) {
     return _divide.apply(this, args);

package/dist/fluent-web-components.api.json

@@ -6124,7 +6124,7 @@
         {
           "kind": "Variable",
           "canonicalReference": "@fluentui/web-components!elevation:var",
-          "docComment": "/**\n * 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.\n *\n * @public\n */\n",
+          "docComment": "/**\n * 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.\n *\n * @deprecated\n *\n * Will be replaced\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -9400,7 +9400,7 @@
         {
           "kind": "Variable",
           "canonicalReference": "@fluentui/web-components!foregroundOnAccentActiveLarge:var",
-          "docComment": "/**\n * @public\n */\n",
+          "docComment": "/**\n * @deprecated\n *\n * Not used\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -9478,7 +9478,7 @@
         {
           "kind": "Variable",
           "canonicalReference": "@fluentui/web-components!foregroundOnAccentFocusLarge:var",
-          "docComment": "/**\n * @public\n */\n",
+          "docComment": "/**\n * @deprecated\n *\n * Not used\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -9556,7 +9556,7 @@
         {
           "kind": "Variable",
           "canonicalReference": "@fluentui/web-components!foregroundOnAccentHoverLarge:var",
-          "docComment": "/**\n * @public\n */\n",
+          "docComment": "/**\n * @deprecated\n *\n * Not used\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -9595,7 +9595,7 @@
         {
           "kind": "Variable",
           "canonicalReference": "@fluentui/web-components!foregroundOnAccentLargeRecipe:var",
-          "docComment": "/**\n * @public\n */\n",
+          "docComment": "/**\n * @deprecated\n *\n * Not used\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -9704,7 +9704,7 @@
         {
           "kind": "Variable",
           "canonicalReference": "@fluentui/web-components!foregroundOnAccentRestLarge:var",
-          "docComment": "/**\n * @public\n */\n",
+          "docComment": "/**\n * @deprecated\n *\n * Not used\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -11070,7 +11070,7 @@
         {
           "kind": "Variable",
           "canonicalReference": "@fluentui/web-components!neutralFillInverseActive:var",
-          "docComment": "/**\n * @public\n */\n",
+          "docComment": "/**\n * @deprecated\n *\n * Not used\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -11139,7 +11139,7 @@
         {
           "kind": "Variable",
           "canonicalReference": "@fluentui/web-components!neutralFillInverseFocus:var",
-          "docComment": "/**\n * @public\n */\n",
+          "docComment": "/**\n * @deprecated\n *\n * Not used\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -11208,7 +11208,7 @@
         {
           "kind": "Variable",
           "canonicalReference": "@fluentui/web-components!neutralFillInverseHover:var",
-          "docComment": "/**\n * @public\n */\n",
+          "docComment": "/**\n * @deprecated\n *\n * Not used\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -11277,7 +11277,7 @@
         {
           "kind": "Variable",
           "canonicalReference": "@fluentui/web-components!neutralFillInverseRecipe:var",
-          "docComment": "/**\n * @public\n */\n",
+          "docComment": "/**\n * @deprecated\n *\n * Not used\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -11312,7 +11312,7 @@
         {
           "kind": "Variable",
           "canonicalReference": "@fluentui/web-components!neutralFillInverseRest:var",
-          "docComment": "/**\n * @public\n */\n",
+          "docComment": "/**\n * @deprecated\n *\n * Not used\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -14701,6 +14701,62 @@
             "endIndex": 7
           }
         },
+        {
+          "kind": "Class",
+          "canonicalReference": "@fluentui/web-components!Progress:class",
+          "docComment": "/**\n * Progress base class\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare class Progress extends "
+            },
+            {
+              "kind": "Reference",
+              "text": "BaseProgress",
+              "canonicalReference": "@microsoft/fast-foundation!BaseProgress:class"
+            },
+            {
+              "kind": "Content",
+              "text": " "
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "Progress",
+          "members": [],
+          "extendsTokenRange": {
+            "startIndex": 1,
+            "endIndex": 3
+          },
+          "implementsTokenRanges": []
+        },
+        {
+          "kind": "Class",
+          "canonicalReference": "@fluentui/web-components!ProgressRing:class",
+          "docComment": "/**\n * Progress Ring base class\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare class ProgressRing extends "
+            },
+            {
+              "kind": "Reference",
+              "text": "BaseProgress",
+              "canonicalReference": "@microsoft/fast-foundation!BaseProgress:class"
+            },
+            {
+              "kind": "Content",
+              "text": " "
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "ProgressRing",
+          "members": [],
+          "extendsTokenRange": {
+            "startIndex": 1,
+            "endIndex": 3
+          },
+          "implementsTokenRanges": []
+        },
         {
           "kind": "Variable",
           "canonicalReference": "@fluentui/web-components!progressRingStyles:var",