@fluentui/web-components 2.0.0 → 2.1.1

package/CHANGELOG.json

@@ -2,7 +2,109 @@
   "name": "@fluentui/web-components",
   "entries": [
     {
-      "date": "Fri, 22 Oct 2021 23:03:40 GMT",
+      "date": "Thu, 02 Dec 2021 07:35:43 GMT",
+      "tag": "@fluentui/web-components_v2.1.1",
+      "version": "2.1.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "jes@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "a69b283c2eb799c0edc5276d9d1094d1f3d4e4ac",
+            "comment": "fix: tabpanel shifting in vertical layout"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 23 Nov 2021 07:27:34 GMT",
+      "tag": "@fluentui/web-components_v2.1.0",
+      "version": "2.1.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "jes@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "2dbe9eadd8ae071bbb056ad15461c1c7ea8d9430",
+            "comment": "fix: remove margins from host elements"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 09 Nov 2021 07:38:11 GMT",
+      "tag": "@fluentui/web-components_v2.0.2",
+      "version": "2.0.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "robarb@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "55a9400f93758ad7cb37789aa524a6eb6b2a5322",
+            "comment": "FluentUI calendar component"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 02 Nov 2021 07:37:01 GMT",
+      "tag": "@fluentui/web-components_v2.0.1",
+      "version": "2.0.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "chhol@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "71d4e117d0bad7e238ff53e4d1a0671a6ead7085",
+            "comment": "fix web components webpack integration docs and update the package dependencies"
+          },
+          {
+            "author": "khamu@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "2cb0ac33d03c843c556c2cd554fd6ac9a91f4f33",
+            "comment": "fixed high contrast visual for web components"
+          },
+          {
+            "author": "chhol@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "e9e7f438f1530d5629108a27dfd1d81d7c107293",
+            "comment": "change input state styles to fix height and prevent z-index from blocking cursor"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 01 Nov 2021 21:28:50 GMT",
+      "tag": "@fluentui/web-components_v2.0.0",
+      "version": "2.0.0",
+      "comments": {
+        "none": [
+          {
+            "author": "brookdozer@gmail.com",
+            "package": "@fluentui/web-components",
+            "commit": "197823fe1233c21127dbce9c546c90e3e0e548be",
+            "comment": "Fixing visual update merge conflicts"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 25 Oct 2021 07:38:02 GMT",
+      "tag": "@fluentui/web-components_v2.0.0",
+      "version": "2.0.0",
+      "comments": {
+        "none": [
+          {
+            "author": "chhol@microsoft.com",
+            "package": "@fluentui/web-components",
+            "comment": "remove beachball configuration override to again disallow major versions",
+            "commit": "a88fb53fb38a20912b7ddea33b5f3313a721e148"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 22 Oct 2021 23:04:22 GMT",
       "tag": "@fluentui/web-components_v2.0.0",
       "version": "2.0.0",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,50 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Fri, 22 Oct 2021 23:03:40 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Dec 2021 07:35:43 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [2.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.1.1)
+
+Thu, 02 Dec 2021 07:35:43 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.1.0..@fluentui/web-components_v2.1.1)
+
+### Patches
+
+- fix: tabpanel shifting in vertical layout ([PR #20641](https://github.com/microsoft/fluentui/pull/20641) by jes@microsoft.com)
+
+## [2.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.1.0)
+
+Tue, 23 Nov 2021 07:27:34 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.0.2..@fluentui/web-components_v2.1.0)
+
+### Minor changes
+
+- fix: remove margins from host elements ([PR #20710](https://github.com/microsoft/fluentui/pull/20710) by jes@microsoft.com)
+
+## [2.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.0.2)
+
+Tue, 09 Nov 2021 07:38:11 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.0.1..@fluentui/web-components_v2.0.2)
+
+### Patches
+
+- FluentUI calendar component ([PR #20356](https://github.com/microsoft/fluentui/pull/20356) by robarb@microsoft.com)
+
+## [2.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.0.1)
+
+Tue, 02 Nov 2021 07:37:01 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.0.0..@fluentui/web-components_v2.0.1)
+
+### Patches
+
+- fix web components webpack integration docs and update the package dependencies ([PR #20429](https://github.com/microsoft/fluentui/pull/20429) by chhol@microsoft.com)
+- fixed high contrast visual for web components ([PR #20418](https://github.com/microsoft/fluentui/pull/20418) by khamu@microsoft.com)
+- change input state styles to fix height and prevent z-index from blocking cursor ([PR #20445](https://github.com/microsoft/fluentui/pull/20445) by chhol@microsoft.com)
+
 ## [2.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.0.0)
 
-Fri, 22 Oct 2021 23:03:40 GMT 
+Fri, 22 Oct 2021 23:04:22 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v1.6.3..@fluentui/web-components_v2.0.0)
 
 ### Major changes

package/dist/dts/calendar/calendar.stories.d.ts

@@ -0,0 +1,86 @@
+import './index';
+declare const _default: {
+    title: string;
+    component: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").CalendarOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").CalendarOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
+    argTypes: {
+        month: {
+            description: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+            default: string;
+        };
+        year: {
+            description: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+            default: string;
+        };
+        locale: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            default: string;
+            description: string;
+        };
+        dayFormat: {
+            description: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+            default: string;
+        };
+        weekdayFormat: {
+            description: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+            default: string;
+        };
+        monthFormat: {
+            description: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+            default: string;
+        };
+        yearFormat: {
+            description: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+            default: string;
+        };
+        disabledDates: {
+            description: string;
+            options: any;
+            control: {
+                type: string;
+            };
+        };
+        selectedDates: {
+            description: string;
+            options: any;
+            control: {
+                type: string;
+            };
+        };
+        readonly: {
+            description: string;
+            control: {
+                type: string;
+            };
+            default: boolean;
+        };
+    };
+};
+export default _default;
+export declare const Calendar: any;

package/dist/dts/calendar/calendar.styles.d.ts

@@ -0,0 +1,7 @@
+import { ElementStyles } from "@microsoft/fast-element";
+import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+/**
+ * Styles for calendar
+ * @public
+ */
+export declare const calendarStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;

package/dist/dts/calendar/index.d.ts

@@ -0,0 +1,18 @@
+import { CalendarOptions, Calendar as FoundationCalendar } from '@microsoft/fast-foundation';
+import { calendarStyles as styles } from './calendar.styles';
+/**
+ * Updated Calendar class that is readonly by default
+ */
+export declare class Calendar extends FoundationCalendar {
+    readonly: boolean;
+}
+/**
+ * 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?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<CalendarOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<CalendarOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
+export { styles as calendarStyles };

package/dist/dts/custom-elements.d.ts

@@ -9,6 +9,7 @@ import { fluentBadge } from './badge/index';
 import { fluentBreadcrumb } from './breadcrumb/index';
 import { fluentBreadcrumbItem } from './breadcrumb-item/index';
 import { fluentButton } from './button/index';
+import { fluentCalendar } from './calendar/index';
 import { fluentCard } from './card/index';
 import { fluentCheckbox } from './checkbox/index';
 import { fluentCombobox } from './combobox/index';
@@ -38,7 +39,7 @@ import { fluentToolbar } from './toolbar/index';
 import { fluentTooltip } from './tooltip/index';
 import { fluentTreeView } from './tree-view/index';
 import { fluentTreeItem } from './tree-item/index';
-export { fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegion, fluentBadge, fluentBreadcrumb, fluentBreadcrumbItem, fluentButton, fluentCard, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentOption, fluentMenu, fluentMenuItem, fluentNumberField, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTabs, fluentTab, fluentTabPanel, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeView, fluentTreeItem, };
+export { fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegion, fluentBadge, fluentBreadcrumb, fluentBreadcrumbItem, fluentButton, fluentCard, fluentCalendar, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentOption, fluentMenu, fluentMenuItem, fluentNumberField, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTabs, fluentTab, fluentTabPanel, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeView, fluentTreeItem, };
 /**
  * All Fluent UI Web Components
  * @public
@@ -52,6 +53,7 @@ export declare const allComponents: {
     fluentBreadcrumb: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").Breadcrumb>;
     fluentBreadcrumbItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").BreadcrumbItemOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").BreadcrumbItemOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     fluentButton: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./button").Button>;
+    fluentCalendar: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").CalendarOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").CalendarOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     fluentCard: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./card").Card>;
     fluentCheckbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").CheckboxOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").CheckboxOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     fluentCombobox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").ComboboxOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").ComboboxOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/dist/dts/text-area/text-area.stories.d.ts

@@ -3,8 +3,8 @@ declare const _default: {
     component: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import(".").TextArea>;
     argTypes: {
         appearance: {
-            options: string[];
             defaultValue: string;
+            options: string[];
             control: {
                 type: string;
             };

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

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

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

@@ -78,10 +78,24 @@ export const breadcrumbItemStyles = (context, definition) => css `
         .start,
         .end,
         .separator {
+          background: ${SystemColors.ButtonFace};
           color: ${SystemColors.ButtonText};
           fill: currentcolor;
         }
         .separator {
           fill: ${SystemColors.ButtonText};
         }
+        :host([href]) {
+          forced-color-adjust: none;
+          background: ${SystemColors.ButtonFace};
+          color: ${SystemColors.LinkText};
+        }
+        :host([href]) .control:hover {
+          background: ${SystemColors.LinkText};
+          color: ${SystemColors.HighlightText};
+          fill: currentcolor;
+        }
+        :host([href]) .control:${focusVisible}::after {
+          box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.LinkText} inset;
+        }
       `));

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

@@ -1,5 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { disabledCursor, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
+import { SystemColors } from "@microsoft/fast-web-utilities";
 import { AccentButtonStyles, baseButtonStyles, LightweightButtonStyles, OutlineButtonStyles, StealthButtonStyles, } from '../styles/';
 import { appearanceBehavior } from '../utilities/behaviors';
 import { disabledOpacity } from '../design-tokens';
@@ -16,4 +17,33 @@ export const buttonStyles = (context, definition) => css `
         :host([disabled]) {
           opacity: 1;
         }
-      `), appearanceBehavior('accent', AccentButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('lightweight', LightweightButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('outline', OutlineButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)));
+        :host([disabled]) .control {
+          border-color: ${SystemColors.GrayText};
+          color: ${SystemColors.GrayText};
+          fill: currentcolor;
+        }
+      `), appearanceBehavior('accent', css `
+      ${AccentButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)},
+      `.withBehaviors(forcedColorsStylesheetBehavior(css `
+            :host([disabled]) .control {
+              background: ${SystemColors.ButtonFace};
+            }
+          `))), appearanceBehavior('lightweight', css `
+      ${LightweightButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)},
+      `.withBehaviors(forcedColorsStylesheetBehavior(css `
+            :host([disabled]) .control {
+              border-color: ${SystemColors.ButtonFace};
+            }
+          `))), appearanceBehavior('outline', css `
+      ${OutlineButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
+      `.withBehaviors(forcedColorsStylesheetBehavior(css `
+            :host([disabled]) .control {
+              border-color: ${SystemColors.GrayText};
+            }
+          `))), appearanceBehavior('stealth', css `
+      ${StealthButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
+      `.withBehaviors(forcedColorsStylesheetBehavior(css `
+            :host([disabled]) .control {
+              border-color: ${SystemColors.ButtonFace};
+            }
+          `))));

package/dist/esm/calendar/calendar.stories.js

@@ -0,0 +1,115 @@
+import './index';
+import { fluentCalendar } from './index';
+const now = new Date();
+const years = new Array(9).fill(null).map((_, index) => (now.getFullYear() - 4 + index).toString());
+const groupsToDates = matrix => matrix.map(days => days.map(day => `${now.getMonth() + 1}-${day}-${now.getFullYear()}`).join(','));
+const disabledDates = groupsToDates([
+    [1, 2, 3, 4, now.getDate()],
+    [6, 7, 10, 18],
+    [8, 17, 24, 25],
+    [4, 11, 18, 25],
+]);
+export default {
+    title: 'Components/Calendar',
+    component: fluentCalendar,
+    argTypes: {
+        month: {
+            description: 'Month of the calendar to display.',
+            control: { type: 'select' },
+            options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+            default: 'The current month',
+        },
+        year: {
+            description: 'Year of the calendar to display.',
+            control: { type: 'select' },
+            options: years,
+            default: 'The current year',
+        },
+        locale: {
+            control: { type: 'select' },
+            options: ['en-US', 'fr-FR', 'de-DE', 'th-TH-u-ca-buddhist-nu-thai', 'ar-XE-u-ca-islamic-nu-arab'],
+            default: 'en-US',
+            description: 'Locale information which can include market (language and country), calendar type and numbering type.',
+        },
+        dayFormat: {
+            description: 'Formatting for the numbered days.',
+            options: ['2-digit', 'numeric'],
+            control: { type: 'select' },
+            default: 'numeric',
+        },
+        weekdayFormat: {
+            description: 'Formatting for the weekday titles.',
+            options: ['long', 'narrow', 'short'],
+            control: { type: 'select' },
+            default: 'short',
+        },
+        monthFormat: {
+            description: 'Formatting for the month name in the title.',
+            options: ['2-digit', 'long', 'narrow', 'numeric', 'short'],
+            control: { type: 'select' },
+            default: 'long',
+        },
+        yearFormat: {
+            description: 'Formatting for the year in the title.',
+            options: ['2-digit', 'numeric'],
+            control: { type: 'select' },
+            default: 'numeric',
+        },
+        disabledDates: {
+            description: 'Dates to be shown as disabled.',
+            options: disabledDates,
+            control: { type: 'select' },
+        },
+        selectedDates: {
+            description: 'Dates to be shown as selected',
+            options: disabledDates,
+            control: { type: 'select' },
+        },
+        readonly: {
+            description: 'A readonly version of the calendar without AT interactions.',
+            control: { type: 'boolean' },
+            default: true,
+        },
+    },
+};
+const CalendarTemplate = ({ month, year, locale, dayFormat, weekdayFormat, monthFormat, yearFormat, disabledDates, selectedDates, readonly, }) => `
+  <style>
+    div.docs-story > div:first-child {
+      height: 22em !important;
+    }
+  </style>
+  <fluent-calendar
+    ${month ? `month="${month}"` : ''}
+    ${year ? `year="${year}"` : ''}
+    ${locale ? `locale="${locale}"` : ''}
+    ${dayFormat ? `day-format="${dayFormat}"` : ''}
+    ${weekdayFormat ? `weekday-format="${weekdayFormat}"` : ''}
+    ${monthFormat ? `month-format="${monthFormat}"` : ''}
+    ${yearFormat ? `year-format="${yearFormat}"` : ''}
+    ${disabledDates ? `disabled-dates="${disabledDates}"` : ''}
+    ${selectedDates ? `selected-dates="${selectedDates}"` : ''}
+    ${readonly === false ? `readonly="false"` : ''}
+    ></fluent-calendar>
+  `;
+export const Calendar = CalendarTemplate.bind({});
+Calendar.args = {
+    label: 'Calendar',
+    month: (now.getMonth() + 1).toString(),
+    year: now.getFullYear().toString(),
+    locale: 'en-US',
+    readonly: true,
+    dayFormat: 'numeric',
+    weekdayFormat: 'short',
+    monthFormat: 'long',
+    yearFormat: 'numeric',
+};
+const example = `
+  <fluent-calendar></fluent-calendar>
+  `;
+Calendar.parameters = {
+    docs: {
+        source: {
+            code: example,
+        },
+    },
+};

package/dist/esm/calendar/calendar.styles.js

@@ -0,0 +1,133 @@
+import { css } from "@microsoft/fast-element";
+import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { SystemColors } from '@microsoft/fast-web-utilities';
+import { accentFillRest, baseHeightMultiplier, bodyFont, controlCornerRadius, density, designUnit, fillColor, foregroundOnAccentRest, neutralForegroundHint, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { DirectionalStyleSheetBehavior } from '../styles';
+/**
+ * LTR styles for calendar
+ * @internal
+ */
+const ltrStyles = css `
+.day.disabled::before {
+  transform: translate(-50%, 0) rotate(45deg);
+}
+`;
+/**
+ * RTL styles for calendar
+ * @internal
+ */
+const rtlStyles = css `
+.day.disabled::before {
+  transform: translate(50%, 0) rotate(-45deg);
+}
+`;
+/**
+ * Styles for calendar
+ * @public
+ */
+export const calendarStyles = (context, definition) => css `
+${display("inline-block")} :host {
+  --calendar-cell-size: calc((${baseHeightMultiplier} + 2 + ${density}) * ${designUnit} * 1px);
+  --calendar-gap: 2px;
+  font-family: ${bodyFont};
+  font-size: ${typeRampBaseFontSize};
+  line-height: ${typeRampBaseLineHeight};
+  color: ${neutralForegroundRest};
+}
+
+.title {
+  padding: calc(${designUnit} * 2px);
+  font-weight: 600;
+}
+
+.days {
+  text-align: center;
+}
+
+.week-days,
+.week {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-gap: var(--calendar-gap);
+  border: 0;
+  padding: 0;
+}
+
+.day,
+.week-day {
+  border: 0;
+  width: var(--calendar-cell-size);
+  height: var(--calendar-cell-size);
+  line-height: var(--calendar-cell-size);
+  padding: 0;
+  box-sizing: initial;
+}
+
+.week-day {
+  font-weight: 600;
+}
+
+.day {
+  border: calc(${strokeWidth} * 1px) solid transparent;
+  border-radius: calc(${controlCornerRadius} * 1px);
+}
+
+.interact .day {
+  cursor: pointer;
+}
+
+.date {
+  height: 100%;
+}
+
+.inactive .date,
+.inactive.disabled::before {
+  color: ${neutralForegroundHint};
+}
+
+.disabled::before {
+  content: '';
+  display: inline-block;
+  width: calc(var(--calendar-cell-size) * .8);
+  height: calc(${strokeWidth} * 1px);
+  background: currentColor;
+  position: absolute;
+  margin-top: calc(var(--calendar-cell-size) / 2);
+  transform-origin: center;
+  z-index: 1;
+}
+
+.selected {
+  color: ${accentFillRest};
+  border: 1px solid ${accentFillRest};
+  background: ${fillColor};
+}
+
+.selected + .selected {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-inline-start-width: 0;
+  padding-inline-start: calc(var(--calendar-gap) + (${strokeWidth} + ${controlCornerRadius}) * 1px);
+  margin-inline-start: calc((${controlCornerRadius} * -1px) - var(--calendar-gap));
+}
+
+.today.disabled::before {
+  color: ${foregroundOnAccentRest};
+}
+
+.today .date {
+  color: ${foregroundOnAccentRest};
+  background: ${accentFillRest};
+  border-radius: 50%;
+  position: relative;
+}
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
+          .day.selected {
+              color: ${SystemColors.Highlight};
+          }
+
+          .today .date {
+              background: ${SystemColors.Highlight};
+              color: ${SystemColors.HighlightText};
+          }
+      `), new DirectionalStyleSheetBehavior(ltrStyles, rtlStyles));