@fluentui/web-components 2.0.1 → 2.1.2

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));

package/dist/esm/calendar/index.js

@@ -0,0 +1,31 @@
+import { __decorate } from "tslib";
+import { attr, booleanConverter } from '@microsoft/fast-element';
+import { CalendarTitleTemplate, Calendar as FoundationCalendar, calendarTemplate as template, } from '@microsoft/fast-foundation';
+import { calendarStyles as styles } from './calendar.styles';
+/**
+ * Updated Calendar class that is readonly by default
+ */
+export class Calendar extends FoundationCalendar {
+    constructor() {
+        super(...arguments);
+        this.readonly = true;
+    }
+}
+__decorate([
+    attr({ converter: booleanConverter })
+], Calendar.prototype, "readonly", void 0);
+/**
+ * The Fluent Calendar Element. Implements {@link @microsoft/fast-foundation#Calendar},
+ * {@link @microsoft/fast-foundation#calendarTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element \<fluent-calendar\>
+ */
+export const fluentCalendar = Calendar.compose({
+    baseName: 'calendar',
+    template,
+    styles,
+    title: CalendarTitleTemplate,
+});
+export { styles as calendarStyles };

package/dist/esm/checkbox/checkbox.styles.js

@@ -7,7 +7,6 @@ export const checkboxStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
       align-items: center;
       outline: none;
-      margin: calc(${designUnit} * 1px) 0;
       ${
 /*
  * Chromium likes to select label text or the default slot when

package/dist/esm/custom-elements.js

@@ -5,6 +5,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';
@@ -34,7 +35,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
@@ -48,6 +49,7 @@ export const allComponents = {
     fluentBreadcrumb,
     fluentBreadcrumbItem,
     fluentButton,
+    fluentCalendar,
     fluentCard,
     fluentCheckbox,
     fluentCombobox,

package/dist/esm/divider/divider.styles.js

@@ -1,11 +1,10 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { designUnit, neutralStrokeDividerRest, strokeWidth } from '../design-tokens';
+import { neutralStrokeDividerRest, strokeWidth } from '../design-tokens';
 export const dividerStyles = (context, definition) => css `
     ${display('block')} :host {
       box-sizing: content-box;
       height: 0;
-      margin: calc(${designUnit} * 1px) 0;
       border: none;
       border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest};
     }

package/dist/esm/flipper/flipper.styles.js

@@ -8,7 +8,6 @@ export const flipperStyles = (context, definition) => css `
       height: calc((${heightNumber} + ${designUnit}) * 1px);
       justify-content: center;
       align-items: center;
-      margin: 0;
       fill: currentcolor;
       color: ${neutralFillStrongRest};
       background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),

package/dist/esm/listbox/listbox.styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, } from '@microsoft/fast-foundation';
+import { display, ListboxOption } from '@microsoft/fast-foundation';
 import { controlCornerRadius, designUnit, focusStrokeOuter, neutralStrokeRest, strokeWidth, } from '../design-tokens';
 export const listboxStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
@@ -11,6 +11,10 @@ export const listboxStyles = (context, definition) => css `
       outline: none;
     }
 
+    ::slotted(${context.tagFor(ListboxOption)}) {
+      margin: 0 calc(${designUnit} * 1px);
+    }
+
     :host(:focus-within:not([disabled])) {
       border-color: ${focusStrokeOuter};
       box-shadow: 0 0 0 1px ${focusStrokeOuter} inset;

package/dist/esm/listbox-option/listbox-option.styles.js

@@ -17,7 +17,6 @@ export const optionStyles = (context, definition) => css `
       font-size: ${typeRampBaseFontSize};
       height: calc(${heightNumber} * 1px);
       line-height: ${typeRampBaseLineHeight};
-      margin: 0 calc(${designUnit} * 1px);
       outline: none;
       overflow: hidden;
       align-items: center;

package/dist/esm/menu/menu.styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { display, Divider, forcedColorsStylesheetBehavior, MenuItem } from '@microsoft/fast-foundation';
 import { SystemColors } from "@microsoft/fast-web-utilities";
 import { elevationShadowFlyout } from '../styles/index';
 import { designUnit, layerCornerRadius, neutralLayerFloating, neutralStrokeDividerRest, strokeWidth, } from '../design-tokens';
@@ -9,7 +9,6 @@ export const menuStyles = (context, definition) => css `
       border: calc(${strokeWidth} * 1px) solid transparent;
       border-radius: calc(${layerCornerRadius} * 1px);
       box-shadow: ${elevationShadowFlyout};
-      margin: 0;
       padding: calc(${designUnit} * 1px) 0;
       max-width: 368px;
       min-width: 64px;
@@ -20,6 +19,14 @@ export const menuStyles = (context, definition) => css `
       margin: 0 calc(${designUnit} * 2px);
     }
 
+    ::slotted(${context.tagFor(MenuItem)}) {
+      margin: 0 calc(${designUnit} * 1px);
+    }
+
+    ::slotted(${context.tagFor(Divider)}) {
+      margin: calc(${designUnit} * 1px) 0;
+    }
+
     ::slotted(hr) {
       box-sizing: content-box;
       height: 0;

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

@@ -2,7 +2,7 @@ import { css } from '@microsoft/fast-element';
 import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { DirectionalStyleSheetBehavior, heightNumber } from '../styles/index';
-import { bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeOuter, focusStrokeWidth, neutralFillStealthActive, neutralFillStealthHover, neutralForegroundHint, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { bodyFont, controlCornerRadius, disabledOpacity, focusStrokeOuter, focusStrokeWidth, neutralFillStealthActive, neutralFillStealthHover, neutralForegroundHint, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
 export const menuItemStyles = (context, definition) => css `
     ${display('grid')} :host {
       contain: layout;
@@ -16,7 +16,6 @@ export const menuItemStyles = (context, definition) => css `
       justify-items: center;
       align-items: center;
       padding: 0;
-      margin: 0 calc(${designUnit} * 1px);
       white-space: nowrap;
       color: ${neutralForegroundRest};
       fill: currentcolor;

package/dist/esm/progress/progress/progress.styles.js

@@ -7,7 +7,6 @@ export const progressStyles = (context, definition) => css `
       align-items: center;
       outline: none;
       height: calc((${strokeWidth} * 3) * 1px);
-      margin: calc(${designUnit} * 1px) 0;
     }
 
     .progress {

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

@@ -9,7 +9,6 @@ export const progressRingStyles = (context, definition) => css `
       outline: none;
       height: calc(${heightNumber} * 1px);
       width: calc(${heightNumber} * 1px);
-      margin: calc(${heightNumber} * 1px) 0;
     }
 
     .progress {

package/dist/esm/radio/radio.styles.js

@@ -8,7 +8,6 @@ export const radioStyles = (context, definition) => css `
       --input-size: calc((${heightNumber} / 2) + ${designUnit});
       align-items: center;
       outline: none;
-      margin: calc(${designUnit} * 1px) 0;
       ${
 /*
  * Chromium likes to select label text or the default slot when

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

@@ -1,10 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { designUnit } from '../design-tokens';
 export const radioGroupStyles = (context, definition) => css `
   ${display('flex')} :host {
     align-items: flex-start;
-    margin: calc(${designUnit} * 1px) 0;
     flex-direction: column;
   }
 

package/dist/esm/slider/slider.styles.js

@@ -11,7 +11,6 @@ export const sliderStyles = (context, definition) => css `
       --track-width: ${designUnit};
       align-items: center;
       width: 100%;
-      margin: calc(${designUnit} * 1px) 0;
       user-select: none;
       box-sizing: border-box;
       border-radius: calc(${controlCornerRadius} * 1px);

package/dist/esm/switch/switch.styles.js

@@ -12,7 +12,6 @@ export const switchStyles = (context, definition) => css `
       align-items: center;
       outline: none;
       font-family: ${bodyFont};
-      margin: calc(${designUnit} * 1px) 0;
       ${
 /*
  * Chromium likes to select label text or the default slot when
@@ -104,8 +103,9 @@ export const switchStyles = (context, definition) => css `
       cursor: pointer;
     }
 
-    .status-message {
-      margin-inline-start: calc(${designUnit} * 2px + 2px);
+    ::slotted([slot="checked-message"]),
+    ::slotted([slot="unchecked-message"]) {
+        margin-inline-start: calc(${designUnit} * 2px + 2px);
     }
 
     :host(.checked) .switch {

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%;
       }