@fluentui/web-components 2.5.11 → 3.0.0-alpha.2

package/dist/esm/color/utilities/color-constants.js

@@ -1,19 +0,0 @@
-import { parseColorHexRGB } from '@microsoft/fast-colors';
-import { SwatchRGB } from '../swatch';
-/**
- * @internal
- */
-export const white = SwatchRGB.create(1, 1, 1);
-/**
- * @internal
- */
-export const black = SwatchRGB.create(0, 0, 0);
-/**
- * @internal
- */
-export const middleGrey = SwatchRGB.create(0.5, 0.5, 0.5);
-/**
- * @internal
- */
-const base = parseColorHexRGB('#0078D4');
-export const accentBase = SwatchRGB.create(base.r, base.g, base.b);

package/dist/esm/color/utilities/direction-by-is-dark.js

@@ -1,7 +0,0 @@
-import { isDark } from './is-dark';
-/**
- * @internal
- */
-export function directionByIsDark(color) {
-    return isDark(color) ? -1 : 1;
-}

package/dist/esm/color/utilities/is-dark.js

@@ -1,17 +0,0 @@
-/*
- * A color is in "dark" if there is more contrast between #000000 and a reference
- * color than #FFFFFF and the reference color. That threshold can be expressed as a relative luminance
- * using the contrast formula as (1 + 0.5) / (R + 0.05) === (R + 0.05) / (0 + 0.05),
- * which reduces to the following, where 'R' is the relative luminance of the reference color
- */
-const target = (-0.1 + Math.sqrt(0.21)) / 2;
-/**
- * Determines if a color should be considered Dark Mode
- * @param color - The color to check to mode of
- * @returns boolean
- *
- * @internal
- */
-export function isDark(color) {
-    return color.relativeLuminance <= target;
-}

package/dist/esm/color/utilities/relative-luminance.js

@@ -1,8 +0,0 @@
-/**
- * @internal
- */
-export function contrast(a, b) {
-    const L1 = a.relativeLuminance > b.relativeLuminance ? a : b;
-    const L2 = a.relativeLuminance > b.relativeLuminance ? b : a;
-    return (L1.relativeLuminance + 0.05) / (L2.relativeLuminance + 0.05);
-}

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

@@ -1,84 +0,0 @@
-import { fluentCombobox } from './index';
-export default {
-    title: 'Components/Combobox',
-    component: fluentCombobox,
-    argTypes: {
-        appearance: {
-            options: ['filled', 'outline'],
-            control: { type: 'radio' },
-        },
-        disabled: {
-            control: { type: 'boolean' },
-        },
-        autocomplete: {
-            options: ['inline', 'list', 'none', 'both'],
-            control: { type: 'radio' },
-        },
-        position: {
-            options: ['above', 'below'],
-            control: { type: 'radio' },
-        },
-        required: {
-            control: { type: 'boolean' },
-        },
-    },
-};
-const ComboboxTemplate = ({ appearance, disabled, autocomplete, position, required }) => `
-  <style>
-    div.docs-story>div:first-child {
-      height: 32em !important;
-    }
-  </style>
-  <fluent-combobox
-    ${appearance ? `appearance="${appearance}"` : ''}
-    ${disabled ? 'disabled' : ''} 
-    ${autocomplete ? `autocomplete="${autocomplete}"` : ''}
-    ${required ? 'required' : ''}
-    ${position ? `position="${position}"` : ''}
-    style="margin-bottom: 500px;"
-  >
-    <fluent-option>Please Please Me</fluent-option>
-    <fluent-option>With The Beatles</fluent-option>
-    <fluent-option>A Hard Day's Night</fluent-option>
-    <fluent-option>Beatles for Sale</fluent-option>
-    <fluent-option>Help!</fluent-option>
-    <fluent-option>Rubber Soul</fluent-option>
-    <fluent-option>Revolver</fluent-option>
-    <fluent-option>Sgt. Pepper's Lonely Hearts Club Band</fluent-option>
-    <fluent-option>Magical Mystery Tour</fluent-option>
-    <fluent-option>The Beatles</fluent-option>
-    <fluent-option>Yellow Submarine</fluent-option>
-    <fluent-option>Abbey Road</fluent-option>
-    <fluent-option>Let It Be</fluent-option>
-  </fluent-combobox>
-`;
-export const Combobox = ComboboxTemplate.bind({});
-Combobox.args = {
-    value: 'Christopher Eccleston',
-    appearance: 'outline',
-    disabled: false,
-};
-const example = `
-<fluent-combobox>
-  <fluent-option>Please Please Me</fluent-option>
-  <fluent-option>With The Beatles</fluent-option>
-  <fluent-option>A Hard Day's Night</fluent-option>
-  <fluent-option>Beatles for Sale</fluent-option>
-  <fluent-option>Help!</fluent-option>
-  <fluent-option>Rubber Soul</fluent-option>
-  <fluent-option>Revolver</fluent-option>
-  <fluent-option>Sgt. Pepper's Lonely Hearts Club Band</fluent-option>
-  <fluent-option>Magical Mystery Tour</fluent-option>
-  <fluent-option>The Beatles</fluent-option>
-  <fluent-option>Yellow Submarine</fluent-option>
-  <fluent-option>Abbey Road</fluent-option>
-  <fluent-option>Let It Be</fluent-option>
-</fluent-combobox>
-`;
-Combobox.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/combobox/combobox.styles.js

@@ -1,40 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { disabledCursor, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
-import { baseSelectStyles } from '../select/select.styles';
-import { appearanceBehavior } from '../utilities/behaviors';
-import { strokeWidth } from '../design-tokens';
-import { typeRampBase } from '../styles/patterns/type-ramp';
-import { inputFilledStyles, inputForcedColorStyles, inputOutlineStyles, inputStateStyles } from '../styles';
-const logicalControlSelector = '.control';
-const interactivitySelector = ':not([disabled]):not([open])';
-export const comboboxStyles = (context, definition) => css `
-    ${baseSelectStyles(context, definition)}
-
-    ${inputStateStyles(context, definition, logicalControlSelector)}
-
-    :host(:empty) .listbox {
-      display: none;
-    }
-
-    :host([disabled]) *,
-    :host([disabled]) {
-      cursor: ${disabledCursor};
-      user-select: none;
-    }
-
-    :host(:active) .selected-value {
-      user-select: none;
-    }
-
-    .selected-value {
-      -webkit-appearance: none;
-      background: transparent;
-      border: none;
-      color: inherit;
-      ${typeRampBase}
-      height: calc(100% - ${strokeWidth} * 1px));
-      margin: auto 0;
-      width: 100%;
-      outline: none;
-    }
-  `.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector, interactivitySelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector, interactivitySelector)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector, interactivitySelector)));

package/dist/esm/combobox/combobox.vscode.definition.json

@@ -1,121 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-combobox",
-            "title": "Combobox",
-            "description": "The Fluent UI combobox element",
-            "attributes": [
-                {
-                    "name": "appearance",
-                    "title": "Appearance",
-                    "description": "The combobox's visual treatment",
-                    "type": "string",
-                    "values": [
-                        {
-                            "name": "filled"
-                        },
-                        {
-                            "name": "outline"
-                        }
-                    ],
-                    "default": "outline",
-                    "required": false
-                },
-                {
-                    "name": "autocomplete",
-                    "title": "Autocomplete",
-                    "description": "Sets the autocomplete method to use when the combobox receives user input",
-                    "default": "",
-                    "type": "string",
-                    "values": [
-                        {
-                            "name": "inline"
-                        },
-                        {
-                            "name": "list"
-                        },
-                        {
-                            "name": "both"
-                        },
-                        {
-                            "name": "none"
-                        }
-                    ]
-                },
-                {
-                    "name": "disabled",
-                    "title": "Disabled",
-                    "description": "Sets the disabled state of the combobox",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "name",
-                    "title": "Name",
-                    "description": "This element's value will be surfaced during form submission under the provided name",
-                    "type": "string",
-                    "default": "",
-                    "required": false
-                },
-                {
-                    "name": "position",
-                    "title": "Position",
-                    "description": "Controls the placement of the combobox dropdown",
-                    "required": false,
-                    "type": "string",
-                    "values": [
-                        {
-                            "name": "above"
-                        },
-                        {
-                            "name": "below"
-                        }
-                    ]
-                },
-                {
-                    "name": "placeholder",
-                    "title": "Placeholder",
-                    "description": "Sets the placeholder value of the combobox to provide a hint to the user",
-                    "required": false,
-                    "type": "string"
-                },
-                {
-                    "name": "value",
-                    "title": "Value",
-                    "description": "The initial value of the combobox",
-                    "required": false,
-                    "type": "string"
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "Supports fluent-option, option elements, or elements with a role of option"
-                },
-                {
-                    "name": "control",
-                    "title": "Input Control slot",
-                    "description": "Slot to replace the contents of the control container"
-                },
-                {
-                    "name": "indicator",
-                    "title": "Indicator slot",
-                    "description": "Slot to provide a custom icon to represent the visual indicator"
-                },
-                {
-                    "name": "start",
-                    "title": "Start slot",
-                    "description": "Contents of the start slot are positioned before the contents of the control container"
-                },
-                {
-                    "name": "end",
-                    "title": "End slot",
-                    "description": "Contents of the end slot are positioned after the contents of the control container"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/combobox/index.js

@@ -1,63 +0,0 @@
-import { __decorate } from "tslib";
-import { attr } from '@microsoft/fast-element';
-import { Combobox as FoundationCombobox, comboboxTemplate as template, } from '@microsoft/fast-foundation';
-import { fillColor, neutralLayerFloating } from '../design-tokens';
-import { comboboxStyles as styles } from './combobox.styles';
-/**
- * The Fluent combobox class
- * @internal
- */
-export class Combobox extends FoundationCombobox {
-    /**
-     * @internal
-     */
-    appearanceChanged(oldValue, newValue) {
-        if (oldValue !== newValue) {
-            this.classList.add(newValue);
-            this.classList.remove(oldValue);
-        }
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        if (!this.appearance) {
-            this.appearance = 'outline';
-        }
-        if (this.listbox) {
-            fillColor.setValueFor(this.listbox, neutralLayerFloating);
-        }
-    }
-}
-__decorate([
-    attr({ mode: 'fromView' })
-], Combobox.prototype, "appearance", void 0);
-/**
- * The Fluent Combobox Custom Element. Implements {@link @microsoft/fast-foundation#Combobox},
- * {@link @microsoft/fast-foundation#comboboxTemplate}
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-combobox\>
- *
- */
-export const fluentCombobox = Combobox.compose({
-    baseName: 'combobox',
-    baseClass: FoundationCombobox,
-    shadowOptions: {
-        delegatesFocus: true,
-    },
-    template,
-    styles,
-    indicator: `
-    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
-      <path d="M2.15 4.65c.2-.2.5-.2.7 0L6 7.79l3.15-3.14a.5.5 0 11.7.7l-3.5 3.5a.5.5 0 01-.7 0l-3.5-3.5a.5.5 0 010-.7z"/>
-    </svg>
-  `,
-});
-/**
- * Styles for combobox
- * @public
- */
-export const comboboxStyles = styles;

package/dist/esm/component-definitions.js

@@ -1,84 +0,0 @@
-import fluentAccordionItemDefinition from './accordion/accordion-item/accordion-item.vscode.definition.json';
-export { fluentAccordionItemDefinition };
-import fluentAccordionDefinition from './accordion/accordion.vscode.definition.json';
-export { fluentAccordionDefinition };
-import fluentAnchorDefinition from './anchor/anchor.vscode.definition.json';
-export { fluentAnchorDefinition };
-import fluentAnchoredRegionDefinition from './anchored-region/anchored-region.vscode.definition.json';
-export { fluentAnchoredRegionDefinition };
-import fluentBadgeDefinition from './badge/badge.vscode.definition.json';
-export { fluentBadgeDefinition };
-import fluentBreadcrumbDefinition from './breadcrumb/breadcrumb.vscode.definition.json';
-export { fluentBreadcrumbDefinition };
-import fluentBreadcrumbItemDefinition from './breadcrumb-item/breadcrumb-item.vscode.definition.json';
-export { fluentBreadcrumbItemDefinition };
-import fluentButtonDefinition from './button/button.vscode.definition.json';
-export { fluentButtonDefinition };
-import fluentCardDefinition from './card/card.vscode.definition.json';
-export { fluentCardDefinition };
-import fluentCheckboxDefinition from './checkbox/checkbox.vscode.definition.json';
-export { fluentCheckboxDefinition };
-import fluentComboboxDefinition from './combobox/combobox.vscode.definition.json';
-export { fluentComboboxDefinition };
-import fluentDataGridDefinition from './data-grid/data-grid.vscode.definition.json';
-export { fluentDataGridDefinition };
-import fluentDataGridCellDefinition from './data-grid/data-grid-cell.vscode.definition.json';
-export { fluentDataGridCellDefinition };
-import fluentDataGridRowDefinition from './data-grid/data-grid-row.vscode.definition.json';
-export { fluentDataGridRowDefinition };
-import fluentDesignSystemProviderDefinition from './design-system-provider/design-system-provider.vscode.definition.json';
-export { fluentDesignSystemProviderDefinition };
-import fluentDialogDefinition from './dialog/dialog.vscode.definition.json';
-export { fluentDialogDefinition };
-import fluentDividerDefinition from './divider/divider.vscode.definition.json';
-export { fluentDividerDefinition };
-import fluentFlipperDefinition from './flipper/flipper.vscode.definition.json';
-export { fluentFlipperDefinition };
-import fluentHorizontalScrollDefinition from './horizontal-scroll/horizontal-scroll.vscode.definition.json';
-export { fluentHorizontalScrollDefinition };
-import fluentListboxDefinition from './listbox/listbox.vscode.definition.json';
-export { fluentListboxDefinition };
-import fluentListboxOptionDefinition from './listbox-option/listbox-option.vscode.definition.json';
-export { fluentListboxOptionDefinition };
-import fluentMenuDefinition from './menu/menu.vscode.definition.json';
-export { fluentMenuDefinition };
-import fluentMenuItemDefinition from './menu-item/menu-item.vscode.definition.json';
-export { fluentMenuItemDefinition };
-import fluentNumberFieldDefinition from './number-field/number-field.vscode.definition.json';
-export { fluentNumberFieldDefinition };
-import fluentProgressRingDefinition from './progress/progress-ring/progress-ring.vscode.definition.json';
-export { fluentProgressRingDefinition };
-import fluentProgressDefinition from './progress/progress/progress.vscode.definition.json';
-export { fluentProgressDefinition };
-import fluentRadioDefinition from './radio/radio.vscode.definition.json';
-export { fluentRadioDefinition };
-import fluentRadioGroupDefinition from './radio-group/radio-group.vscode.definition.json';
-export { fluentRadioGroupDefinition };
-import fluentSearchDefinition from './search/search.vscode.definition.json';
-export { fluentSearchDefinition };
-import fluentSelectDefinition from './select/select.vscode.definition.json';
-export { fluentSelectDefinition };
-import fluentSkeletonDefinition from './skeleton/skeleton.vscode.definition.json';
-export { fluentSkeletonDefinition };
-import fluentSliderDefinition from './slider/slider.vscode.definition.json';
-export { fluentSliderDefinition };
-import fluentSliderLabelDefinition from './slider-label/slider-label.vscode.definition.json';
-export { fluentSliderLabelDefinition };
-import fluentSwitchDefinition from './switch/switch.vscode.definition.json';
-export { fluentSwitchDefinition };
-import fluentTabPanelDefinition from './tabs/tab-panel/tab-panel.vscode.definition.json';
-export { fluentTabPanelDefinition };
-import fluentTabDefinition from './tabs/tab/tab.vscode.definition.json';
-export { fluentTabDefinition };
-import fluentTabsDefinition from './tabs/tabs.vscode.definition.json';
-export { fluentTabsDefinition };
-import fluentTextAreaDefinition from './text-area/text-area.vscode.definition.json';
-export { fluentTextAreaDefinition };
-import fluentTextFieldDefinition from './text-field/text-field.vscode.definition.json';
-export { fluentTextFieldDefinition };
-import fluentTooltipDefinition from './tooltip/tooltip.vscode.definition.json';
-export { fluentTooltipDefinition };
-import fluentTreeItemDefinition from './tree-item/tree-item.vscode.definition.json';
-export { fluentTreeItemDefinition };
-import fluentTreeViewDefinition from './tree-view/tree-view.vscode.definition.json';
-export { fluentTreeViewDefinition };

package/dist/esm/custom-elements.js

@@ -1,102 +0,0 @@
-import { fluentAccordion, fluentAccordionItem } from './accordion/index';
-import { fluentAnchor } from './anchor/index';
-import { fluentAnchoredRegion } from './anchored-region/index';
-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';
-import { fluentDataGrid, fluentDataGridCell, fluentDataGridRow } from './data-grid/index';
-import { fluentDesignSystemProvider } from './design-system-provider/index';
-import { fluentDialog } from './dialog/index';
-import { fluentDivider } from './divider/index';
-import { fluentFlipper } from './flipper/index';
-import { fluentHorizontalScroll } from './horizontal-scroll/index';
-import { fluentListbox } from './listbox/index';
-import { fluentOption } from './listbox-option/index';
-import { fluentMenu } from './menu/index';
-import { fluentMenuItem } from './menu-item/index';
-import { fluentNumberField } from './number-field/index';
-import { fluentProgress, fluentProgressRing } from './progress/index';
-import { fluentRadio } from './radio/index';
-import { fluentRadioGroup } from './radio-group/index';
-import { fluentSearch } from './search/index';
-import { fluentSelect } from './select/index';
-import { fluentSkeleton } from './skeleton/index';
-import { fluentSlider } from './slider/index';
-import { fluentSliderLabel } from './slider-label/index';
-import { fluentSwitch } from './switch/index';
-import { fluentTab, fluentTabPanel, fluentTabs } from './tabs/index';
-import { fluentTextArea } from './text-area/index';
-import { fluentTextField } from './text-field/index';
-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, fluentCalendar, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentOption, fluentMenu, fluentMenuItem, fluentNumberField, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSearch, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTabs, fluentTab, fluentTabPanel, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeView, fluentTreeItem, };
-/**
- * All Fluent UI Web Components
- * @public
- */
-export const allComponents = {
-    fluentAccordion,
-    fluentAccordionItem,
-    fluentAnchor,
-    fluentAnchoredRegion,
-    fluentBadge,
-    fluentBreadcrumb,
-    fluentBreadcrumbItem,
-    fluentButton,
-    fluentCalendar,
-    fluentCard,
-    fluentCheckbox,
-    fluentCombobox,
-    fluentDataGrid,
-    fluentDataGridCell,
-    fluentDataGridRow,
-    fluentDesignSystemProvider,
-    fluentDialog,
-    fluentDivider,
-    fluentFlipper,
-    fluentHorizontalScroll,
-    fluentListbox,
-    fluentOption,
-    fluentMenu,
-    fluentMenuItem,
-    fluentNumberField,
-    fluentProgress,
-    fluentProgressRing,
-    fluentRadio,
-    fluentRadioGroup,
-    fluentSearch,
-    fluentSelect,
-    fluentSkeleton,
-    fluentSlider,
-    fluentSliderLabel,
-    fluentSwitch,
-    fluentTabs,
-    fluentTab,
-    fluentTabPanel,
-    fluentTextArea,
-    fluentTextField,
-    fluentToolbar,
-    fluentTooltip,
-    fluentTreeView,
-    fluentTreeItem,
-    register(container, ...rest) {
-        if (!container) {
-            // preserve backward compatibility with code that loops through
-            // the values of this object and calls them as funcs with no args
-            return;
-        }
-        for (const key in this) {
-            if (key === 'register') {
-                continue;
-            }
-            this[key]().register(container, ...rest);
-        }
-    },
-};

package/dist/esm/data-grid/data-grid-cell.styles.js

@@ -1,36 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { controlCornerRadius, designUnit, focusStrokeWidth, neutralForegroundRest, strokeWidth, } from '../design-tokens';
-import { typeRampBase } from '../styles/patterns/type-ramp';
-import { focusTreatmentBase } from '../styles/focus';
-export const dataGridCellStyles = (context, definition) => css `
-    :host {
-      padding: calc((${designUnit} + ${focusStrokeWidth} - ${strokeWidth}) * 1px) calc(((${designUnit} * 3) + ${focusStrokeWidth} - ${strokeWidth}) * 1px);
-      color: ${neutralForegroundRest};
-      box-sizing: border-box;
-      ${typeRampBase}
-      border: transparent calc(${strokeWidth} * 1px) solid;
-      overflow: hidden;
-      white-space: nowrap;
-      border-radius: calc(${controlCornerRadius} * 1px);
-    }
-
-    :host(.column-header) {
-      font-weight: 600;
-    }
-
-    :host(:${focusVisible}) {
-      ${focusTreatmentBase}
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host {
-          forced-color-adjust: none;
-          background: ${SystemColors.Field};
-          color: ${SystemColors.FieldText};
-        }
-
-        :host(:${focusVisible}) {
-          outline-color: ${SystemColors.FieldText};
-        }
-      `));

package/dist/esm/data-grid/data-grid-cell.vscode.definition.json

@@ -1,34 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-data-grid-cell",
-            "title": "Data grid cell",
-            "description": "The Fluent UI data grid cell element",
-            "attributes": [
-                {
-                    "name": "cell-type",
-                    "title": "Cell type",
-                    "description": "The type of cell",
-                    "type": "string",
-                    "values": [{ "name": "default" }, { "name": "columnheader" }],
-                    "required": false
-                },
-                {
-                    "name": "grid-column",
-                    "title": "Grid column",
-                    "description": "Positions the cell in the column layout.",
-                    "type": "string",
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The cell content"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/data-grid/data-grid-row.styles.js

@@ -1,24 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { fillColor, neutralStrokeDividerRest, strokeWidth } from '../design-tokens';
-export const dataGridRowStyles = (context, definition) => css `
-    :host {
-      display: grid;
-      padding: 1px 0;
-      box-sizing: border-box;
-      width: 100%;
-      border-bottom: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest};
-    }
-
-    :host(.header) {
-    }
-
-    :host(.sticky-header) {
-      background: ${fillColor};
-      position: sticky;
-      top: 0;
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host {
-        }
-      `));