@fluentui/web-components 2.0.0 → 2.1.1

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

@@ -21,9 +21,63 @@ const TabsTemplate = ({ activeId, activeIndicator, orientation }) => `
   <fluent-tab id="TabOne">Tab one</fluent-tab>
   <fluent-tab id="TabTwo">Tab two</fluent-tab>
   <fluent-tab id="TabThree">Tab three</fluent-tab>
-  <fluent-tab-panel> Tab one content. This is for testing. </fluent-tab-panel>
+  <fluent-tab-panel>
+    Tab one content. This is for testing. Tab three content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+  </fluent-tab-panel>
   <fluent-tab-panel> Tab two content. This is for testing. </fluent-tab-panel>
-  <fluent-tab-panel> Tab three content. This is for testing. </fluent-tab-panel>
+  <fluent-tab-panel>
+    Tab three content. This is for testing. Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+  </fluent-tab-panel>
 </fluent-tabs>`;
 export const Tabs = TabsTemplate.bind({});
 Tabs.args = {

package/dist/esm/tabs/tabs.styles.js

@@ -63,6 +63,7 @@ export const tabsStyles = (context, definition) => css `
         position: relative;
         width: max-content;
         justify-self: end;
+        align-self: flex-start;
         width: 100%;
       }
 
@@ -93,7 +94,6 @@ export const tabsStyles = (context, definition) => css `
     `.withBehaviors(forcedColorsStylesheetBehavior(css `
         .activeIndicator,
         :host(.vertical) .activeIndicator {
-          forced-color-adjust: none;
           background: ${SystemColors.Highlight};
         }
       `));

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

@@ -4,8 +4,8 @@ export default {
     component: fluentTextArea,
     argTypes: {
         appearance: {
-            options: ['filled', 'outline'],
-            defaultValue: 'outline',
+            defaultValue: 'outlined',
+            options: ['filled', 'outlined'],
             control: { type: 'radio' },
         },
         autoFocus: {

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

@@ -197,33 +197,42 @@ export const treeItemStyles = (context, definition) => css `
     }
   `.withBehaviors(new DirectionalStyleSheetBehavior(ltr, rtl), forcedColorsStylesheetBehavior(css `
         :host {
-          forced-color-adjust: none;
-          border-color: transparent;
-          background: ${SystemColors.Field};
-          color: ${SystemColors.FieldText};
+          color: ${SystemColors.ButtonText};
+        }
+        .positioning-region {
+          border-color: ${SystemColors.ButtonFace};
+          background: ${SystemColors.ButtonFace};
         }
         :host(:not([disabled])) .positioning-region:hover,
-        :host([selected]) .positioning-region {
+        :host(:not([disabled])) .positioning-region:active,
+        :host(:not([disabled])[selected]) .positioning-region {
           background: ${SystemColors.Highlight};
         }
         :host .positioning-region:hover .content-region,
         :host([selected]) .positioning-region .content-region {
+          forced-color-adjust: none;
           color: ${SystemColors.HighlightText};
         }
+        :host([disabled][selected]) .positioning-region .content-region {
+          color: ${SystemColors.GrayText};
+        }
         :host([selected])::after {
-          background: ${SystemColors.Field};
+          background: ${SystemColors.HighlightText};
         }
         :host(:${focusVisible}) .positioning-region {
-          border-color: ${SystemColors.FieldText};
-          box-shadow: 0 0 0 2px inset ${SystemColors.Field};
+          forced-color-adjust: none;
+          border-color: ${SystemColors.ButtonText};
+          box-shadow: 0 0 0 2px inset ${SystemColors.ButtonFace};
         }
+        :host([disabled]),
         :host([disabled]) .content-region,
         :host([disabled]) .positioning-region:hover .content-region {
           opacity: 1;
           color: ${SystemColors.GrayText};
         }
-        :host(.nested) .expand-collapse-button:hover {
-          background: ${SystemColors.Field};
-          fill: ${SystemColors.FieldText};
+        :host(.nested) .expand-collapse-button:hover,
+        :host(:not([disabled])[selected]) .expand-collapse-button:hover {
+          background: ${SystemColors.ButtonFace};
+          fill: ${SystemColors.ButtonText};
         }
       `));

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

@@ -8,40 +8,57 @@ export default {
         },
     },
 };
-const TreeViewTemplate = ({ disabled, renderCollapsedNodes }) => `
-  <style>
-    div.docs-story>div:first-child {
-      height: 22em !important;
-    }
-  </style>
-  <fluent-tree-view
-    ${renderCollapsedNodes ? `render-collapsed-nodes="${renderCollapsedNodes}` : ''}
-  ">
+const TreeViewTemplate = ({ renderCollapsedNodes }) => `
+<style>
+div.docs-story>div:first-child {
+  height: 26em !important;
+}
+</style>
+<fluent-tree-view
+  ${renderCollapsedNodes ? `render-collapsed-nodes="${renderCollapsedNodes}` : ''}
+">
+  <fluent-tree-item>
+    Root item 1
     <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>
+          Sunflower
+          <svg slot="start" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M12 5.5a1 1 0 100 2 1 1 0 000-2zm-5 1a1 1 0 112 0 1 1 0 01-2 0zm3.5-4a.5.5 0 00-1 0V3h-3C5.67 3 5 3.67 5 4.5v4c0 .83.67 1.5 1.5 1.5h7c.83 0 1.5-.67 1.5-1.5v-4c0-.83-.67-1.5-1.5-1.5h-3v-.5zM6.5 4h7c.28 0 .5.22.5.5v4a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5v-4c0-.28.22-.5.5-.5zm3.75 14c2.62-.04 4.2-.6 5.12-1.44A3.52 3.52 0 0016.5 14h.01v-.69c0-1-.81-1.8-1.8-1.8h-3.2v-.01H5.3c-.99 0-1.8.81-1.8 1.81v.7c.04.77.25 1.75 1.13 2.55.93.84 2.5 1.4 5.12 1.44h.5zm-4.94-5.5h9.38c.45 0 .81.37.81.81v.44c0 .69-.13 1.46-.8 2.07C14 16.45 12.66 17 10 17s-4.01-.55-4.7-1.18a2.63 2.63 0 01-.8-2.07v-.44c0-.44.36-.8.8-.8z"
+            />
+          </svg>
+          <svg slot="end" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M12 5.5a1 1 0 100 2 1 1 0 000-2zm-5 1a1 1 0 112 0 1 1 0 01-2 0zm3.5-4a.5.5 0 00-1 0V3h-3C5.67 3 5 3.67 5 4.5v4c0 .83.67 1.5 1.5 1.5h7c.83 0 1.5-.67 1.5-1.5v-4c0-.83-.67-1.5-1.5-1.5h-3v-.5zM6.5 4h7c.28 0 .5.22.5.5v4a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5v-4c0-.28.22-.5.5-.5zm3.75 14c2.62-.04 4.2-.6 5.12-1.44A3.52 3.52 0 0016.5 14h.01v-.69c0-1-.81-1.8-1.8-1.8h-3.2v-.01H5.3c-.99 0-1.8.81-1.8 1.81v.7c.04.77.25 1.75 1.13 2.55.93.84 2.5 1.4 5.12 1.44h.5zm-4.94-5.5h9.38c.45 0 .81.37.81.81v.44c0 .69-.13 1.46-.8 2.07C14 16.45 12.66 17 10 17s-4.01-.55-4.7-1.18a2.63 2.63 0 01-.8-2.07v-.44c0-.44.36-.8.8-.8z"
+            />
+          </svg>
+        </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>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>
-      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>
+      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> Root item 3 - Leaf Erikson </fluent-tree-item>
-  </fluent-tree-view>`;
+    <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>`;
 export const TreeView = TreeViewTemplate.bind({});
 TreeView.args = {
     renderCollapsedNodes: false,

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

@@ -1588,7 +1588,61 @@
             },
             {
               "kind": "Content",
-              "text": ">;\n    fluentCard: (overrideDefinition?: import(\"@microsoft/fast-foundation\")."
+              "text": ">;\n    fluentCalendar: (overrideDefinition?: import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "OverrideFoundationElementDefinition",
+              "canonicalReference": "@microsoft/fast-foundation!OverrideFoundationElementDefinition:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "CalendarOptions",
+              "canonicalReference": "@microsoft/fast-foundation!CalendarOptions:type"
+            },
+            {
+              "kind": "Content",
+              "text": "> | undefined) => import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "FoundationElementRegistry",
+              "canonicalReference": "@microsoft/fast-foundation!FoundationElementRegistry:class"
+            },
+            {
+              "kind": "Content",
+              "text": "<import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "CalendarOptions",
+              "canonicalReference": "@microsoft/fast-foundation!CalendarOptions:type"
+            },
+            {
+              "kind": "Content",
+              "text": ", import(\"@microsoft/fast-element\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "Constructable",
+              "canonicalReference": "@microsoft/fast-element!Constructable:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "FoundationElement",
+              "canonicalReference": "@microsoft/fast-foundation!FoundationElement:class"
+            },
+            {
+              "kind": "Content",
+              "text": ">>;\n    fluentCard: (overrideDefinition?: import(\"@microsoft/fast-foundation\")."
             },
             {
               "kind": "Reference",
@@ -3269,7 +3323,7 @@
           "name": "allComponents",
           "variableTypeTokenRange": {
             "startIndex": 1,
-            "endIndex": 458
+            "endIndex": 470
           }
         },
         {
@@ -7554,6 +7608,81 @@
             "endIndex": 12
           }
         },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@fluentui/web-components!fluentCalendar:var",
+          "docComment": "/**\n * The Fluent Calendar Element. Implements {@link @microsoft/fast-foundation#Calendar}, {@link @microsoft/fast-foundation#calendarTemplate}\n *\n * @remarks\n *\n * HTML Element \\<fluent-calendar\\>\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "fluentCalendar: "
+            },
+            {
+              "kind": "Content",
+              "text": "(overrideDefinition?: import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "OverrideFoundationElementDefinition",
+              "canonicalReference": "@microsoft/fast-foundation!OverrideFoundationElementDefinition:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "CalendarOptions",
+              "canonicalReference": "@microsoft/fast-foundation!CalendarOptions:type"
+            },
+            {
+              "kind": "Content",
+              "text": "> | undefined) => import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "FoundationElementRegistry",
+              "canonicalReference": "@microsoft/fast-foundation!FoundationElementRegistry:class"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "CalendarOptions",
+              "canonicalReference": "@microsoft/fast-foundation!CalendarOptions:type"
+            },
+            {
+              "kind": "Content",
+              "text": ", import(\"@microsoft/fast-element\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "Constructable",
+              "canonicalReference": "@microsoft/fast-element!Constructable:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "FoundationElement",
+              "canonicalReference": "@microsoft/fast-foundation!FoundationElement:class"
+            },
+            {
+              "kind": "Content",
+              "text": ">>"
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "fluentCalendar",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 14
+          }
+        },
         {
           "kind": "Variable",
           "canonicalReference": "@fluentui/web-components!fluentCard:var",

package/dist/web-components.d.ts

@@ -10,6 +10,7 @@ import { Breadcrumb } from '@microsoft/fast-foundation';
 import { BreadcrumbItem } from '@microsoft/fast-foundation';
 import { BreadcrumbItemOptions } from '@microsoft/fast-foundation';
 import { Button as Button_2 } from '@microsoft/fast-foundation';
+import { CalendarOptions } from '@microsoft/fast-foundation';
 import { Card as Card_2 } from '@microsoft/fast-foundation';
 import { CheckboxOptions } from '@microsoft/fast-foundation';
 import { Combobox as Combobox_2 } from '@microsoft/fast-foundation';
@@ -184,6 +185,7 @@ export declare const allComponents: {
     fluentBreadcrumb: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Breadcrumb>;
     fluentBreadcrumbItem: (overrideDefinition?: OverrideFoundationElementDefinition<BreadcrumbItemOptions> | undefined) => FoundationElementRegistry<BreadcrumbItemOptions, Constructable<FoundationElement>>;
     fluentButton: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Button>;
+    fluentCalendar: (overrideDefinition?: OverrideFoundationElementDefinition<CalendarOptions> | undefined) => FoundationElementRegistry<CalendarOptions, Constructable<FoundationElement>>;
     fluentCard: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Card>;
     fluentCheckbox: (overrideDefinition?: OverrideFoundationElementDefinition<CheckboxOptions> | undefined) => FoundationElementRegistry<CheckboxOptions, Constructable<FoundationElement>>;
     fluentCombobox: (overrideDefinition?: OverrideFoundationElementDefinition<ComboboxOptions> | undefined) => FoundationElementRegistry<ComboboxOptions, Constructable<FoundationElement>>;
@@ -1307,6 +1309,16 @@ export declare const fluentBreadcrumbItem: (overrideDefinition?: OverrideFoundat
  */
 export declare const fluentButton: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Button>;
 
+/**
+ * The Fluent Calendar Element. Implements {@link @microsoft/fast-foundation#Calendar},
+ * {@link @microsoft/fast-foundation#calendarTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element \<fluent-calendar\>
+ */
+export declare const fluentCalendar: (overrideDefinition?: OverrideFoundationElementDefinition<CalendarOptions> | undefined) => FoundationElementRegistry<CalendarOptions, Constructable<FoundationElement>>;
+
 /**
  * The Fluent Card Element. Implements {@link @microsoft/fast-foundation#Card},
  * {@link @microsoft/fast-foundation#CardTemplate}