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

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

@@ -1,41 +0,0 @@
-import { MenuItem, menuItemTemplate as template } from '@microsoft/fast-foundation';
-import { menuItemStyles as styles } from './menu-item.styles';
-/**
- * The Fluent Menu Item Element. Implements {@link @microsoft/fast-foundation#MenuItem},
- * {@link @microsoft/fast-foundation#menuItemTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-menu-item\>
- */
-export const fluentMenuItem = MenuItem.compose({
-    baseName: 'menu-item',
-    template,
-    styles,
-    checkboxIndicator: `
-    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-      <path d="M13.86 3.66a.5.5 0 01-.02.7l-7.93 7.48a.6.6 0 01-.84-.02L2.4 9.1a.5.5 0 01.72-.7l2.4 2.44 7.65-7.2a.5.5 0 01.7.02z"/>
-    </svg>
-  `,
-    expandCollapseGlyph: `
-    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-      <path d="M5.65 3.15a.5.5 0 000 .7L9.79 8l-4.14 4.15a.5.5 0 00.7.7l4.5-4.5a.5.5 0 000-.7l-4.5-4.5a.5.5 0 00-.7 0z"/>
-    </svg>
-  `,
-    radioIndicator: `
-    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="8" cy="8" r="2"/>
-    </svg>
-  `,
-});
-/**
- * Styles for MenuItem
- * @public
- */
-export const menuItemStyles = styles;
-/**
- * Menu item base class
- * @public
- */
-export { MenuItem };

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

@@ -1,34 +0,0 @@
-import { fluentMenuItem } from './index';
-export default {
-    title: 'Components/Menu Item',
-    component: fluentMenuItem,
-    argTypes: {
-        checked: {
-            control: { type: 'boolean' },
-        },
-        disabled: {
-            control: { type: 'boolean' },
-        },
-    },
-};
-const MenuItemTemplate = ({ checked, disabled }) => `
-  <fluent-menu-item
-    ${checked ? 'checked role="menuitemcheckbox"' : ''}
-    ${disabled ? 'disabled' : ''}
-  >Menu item 1</fluent-menu-item>
-`;
-export const MenuItem = MenuItemTemplate.bind({});
-MenuItem.args = {
-    disabled: false,
-    checked: false,
-};
-const example = `
-<fluent-menu-item>Menu item</fluent-menu-item>
-`;
-MenuItem.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

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

@@ -1,265 +0,0 @@
-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 { controlCornerRadius, disabledOpacity, neutralFillStealthActive, neutralFillStealthHover, neutralForegroundHint, neutralForegroundRest, strokeWidth, } from '../design-tokens';
-import { typeRampBase } from '../styles/patterns/type-ramp';
-import { focusTreatmentBase } from '../styles/focus';
-export const menuItemStyles = (context, definition) => css `
-    ${display('grid')} :host {
-      contain: layout;
-      overflow: visible;
-      ${typeRampBase}
-      box-sizing: border-box;
-      height: calc(${heightNumber} * 1px);
-      grid-template-columns: minmax(32px, auto) 1fr minmax(32px, auto);
-      grid-template-rows: auto;
-      justify-items: center;
-      align-items: center;
-      padding: 0;
-      white-space: nowrap;
-      color: ${neutralForegroundRest};
-      fill: currentcolor;
-      cursor: pointer;
-      border-radius: calc(${controlCornerRadius} * 1px);
-      border: calc(${strokeWidth} * 1px) solid transparent;
-      position: relative;
-    }
-
-    :host(.indent-0) {
-      grid-template-columns: auto 1fr minmax(32px, auto);
-    }
-
-    :host(.indent-0) .content {
-      grid-column: 1;
-      grid-row: 1;
-      margin-inline-start: 10px;
-    }
-
-    :host(.indent-0) .expand-collapse-glyph-container {
-      grid-column: 5;
-      grid-row: 1;
-    }
-
-    :host(.indent-2) {
-      grid-template-columns: minmax(32px, auto) minmax(32px, auto) 1fr minmax(32px, auto) minmax(32px, auto);
-    }
-
-    :host(.indent-2) .content {
-      grid-column: 3;
-      grid-row: 1;
-      margin-inline-start: 10px;
-    }
-
-    :host(.indent-2) .expand-collapse-glyph-container {
-      grid-column: 5;
-      grid-row: 1;
-    }
-
-    :host(.indent-2) .start {
-      grid-column: 2;
-    }
-
-    :host(.indent-2) .end {
-      grid-column: 4;
-    }
-
-    :host(:${focusVisible}) {
-      ${focusTreatmentBase}
-    }
-
-    :host(:not([disabled]):hover) {
-      background: ${neutralFillStealthHover};
-    }
-
-    :host(:not([disabled]):active),
-    :host(.expanded) {
-      background: ${neutralFillStealthActive};
-      color: ${neutralForegroundRest};
-      z-index: 2;
-    }
-
-    :host([disabled]) {
-      cursor: ${disabledCursor};
-      opacity: ${disabledOpacity};
-    }
-
-    .content {
-      grid-column-start: 2;
-      justify-self: start;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .start,
-    .end {
-      display: flex;
-      justify-content: center;
-    }
-
-    :host(.indent-0[aria-haspopup='menu']) {
-      display: grid;
-      grid-template-columns: minmax(32px, auto) auto 1fr minmax(32px, auto) minmax(32px, auto);
-      align-items: center;
-      min-height: 32px;
-    }
-
-    :host(.indent-1[aria-haspopup='menu']),
-    :host(.indent-1[role='menuitemcheckbox']),
-    :host(.indent-1[role='menuitemradio']) {
-      display: grid;
-      grid-template-columns: minmax(32px, auto) auto 1fr minmax(32px, auto) minmax(32px, auto);
-      align-items: center;
-      min-height: 32px;
-    }
-
-    :host(.indent-2:not([aria-haspopup='menu'])) .end {
-      grid-column: 5;
-    }
-
-    :host .input-container,
-    :host .expand-collapse-glyph-container {
-      display: none;
-    }
-
-    :host([aria-haspopup='menu']) .expand-collapse-glyph-container,
-    :host([role='menuitemcheckbox']) .input-container,
-    :host([role='menuitemradio']) .input-container {
-      display: grid;
-    }
-
-    :host([aria-haspopup='menu']) .content,
-    :host([role='menuitemcheckbox']) .content,
-    :host([role='menuitemradio']) .content {
-      grid-column-start: 3;
-    }
-
-    :host([aria-haspopup='menu'].indent-0) .content {
-      grid-column-start: 1;
-    }
-
-    :host([aria-haspopup='menu']) .end,
-    :host([role='menuitemcheckbox']) .end,
-    :host([role='menuitemradio']) .end {
-      grid-column-start: 4;
-    }
-
-    :host .expand-collapse,
-    :host .checkbox,
-    :host .radio {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      box-sizing: border-box;
-    }
-
-    :host .checkbox-indicator,
-    :host .radio-indicator,
-    slot[name='checkbox-indicator'],
-    slot[name='radio-indicator'] {
-      display: none;
-    }
-
-    ::slotted([slot='end']:not(svg)) {
-      margin-inline-end: 10px;
-      color: ${neutralForegroundHint};
-    }
-
-    :host([aria-checked='true']) .checkbox-indicator,
-    :host([aria-checked='true']) slot[name='checkbox-indicator'],
-    :host([aria-checked='true']) .radio-indicator,
-    :host([aria-checked='true']) slot[name='radio-indicator'] {
-      display: flex;
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host,
-        ::slotted([slot='end']:not(svg)) {
-          forced-color-adjust: none;
-          color: ${SystemColors.ButtonText};
-          fill: currentcolor;
-        }
-        :host(:not([disabled]):hover) {
-          background: ${SystemColors.Highlight};
-          color: ${SystemColors.HighlightText};
-          fill: currentcolor;
-        }
-        :host(:hover) .start,
-        :host(:hover) .end,
-        :host(:hover)::slotted(svg),
-        :host(:active) .start,
-        :host(:active) .end,
-        :host(:active)::slotted(svg),
-        :host(:hover) ::slotted([slot='end']:not(svg)),
-        :host(:${focusVisible}) ::slotted([slot='end']:not(svg)) {
-          color: ${SystemColors.HighlightText};
-          fill: currentcolor;
-        }
-        :host(.expanded) {
-          background: ${SystemColors.Highlight};
-          color: ${SystemColors.HighlightText};
-        }
-        :host(:${focusVisible}) {
-          background: ${SystemColors.Highlight};
-          outline-color: ${SystemColors.ButtonText};
-          color: ${SystemColors.HighlightText};
-          fill: currentcolor;
-        }
-        :host([disabled]),
-        :host([disabled]:hover),
-        :host([disabled]:hover) .start,
-        :host([disabled]:hover) .end,
-        :host([disabled]:hover)::slotted(svg),
-        :host([disabled]:${focusVisible}) {
-          background: ${SystemColors.ButtonFace};
-          color: ${SystemColors.GrayText};
-          fill: currentcolor;
-          opacity: 1;
-        }
-        :host([disabled]:${focusVisible}) {
-          outline-color: ${SystemColors.GrayText};
-        }
-        :host .expanded-toggle,
-        :host .checkbox,
-        :host .radio {
-          border-color: ${SystemColors.ButtonText};
-          background: ${SystemColors.HighlightText};
-        }
-        :host([checked]) .checkbox,
-        :host([checked]) .radio {
-          background: ${SystemColors.HighlightText};
-          border-color: ${SystemColors.HighlightText};
-        }
-        :host(:hover) .expanded-toggle,
-            :host(:hover) .checkbox,
-            :host(:hover) .radio,
-            :host(:${focusVisible}) .expanded-toggle,
-            :host(:${focusVisible}) .checkbox,
-            :host(:${focusVisible}) .radio,
-            :host([checked]:hover) .checkbox,
-            :host([checked]:hover) .radio,
-            :host([checked]:${focusVisible}) .checkbox,
-            :host([checked]:${focusVisible}) .radio {
-          border-color: ${SystemColors.HighlightText};
-        }
-        :host([aria-checked='true']) {
-          background: ${SystemColors.Highlight};
-          color: ${SystemColors.HighlightText};
-        }
-        :host([aria-checked='true']) .checkbox-indicator,
-        :host([aria-checked='true']) ::slotted([slot='checkbox-indicator']),
-        :host([aria-checked='true']) ::slotted([slot='radio-indicator']) {
-          fill: ${SystemColors.Highlight};
-        }
-        :host([aria-checked='true']) .radio-indicator {
-          background: ${SystemColors.Highlight};
-        }
-      `), new DirectionalStyleSheetBehavior(css `
-        .expand-collapse-glyph-container {
-          transform: rotate(0deg);
-        }
-      `, css `
-        .expand-collapse-glyph-container {
-          transform: rotate(180deg);
-        }
-      `));

package/dist/esm/menu-item/menu-item.vscode.definition.json

@@ -1,82 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-menu-item",
-            "title": "Menu item",
-            "description": "The Fluent UI menu item element",
-            "attributes": [
-                {
-                    "name": "disabled",
-                    "title": "Disabled",
-                    "type": "boolean",
-                    "description": "Sets the disabled state of the item",
-                    "default": true,
-                    "required": false
-                },
-                {
-                    "name": "expanded",
-                    "title": "Expanded",
-                    "type": "boolean",
-                    "description": "The expanded state of the item",
-                    "default": true,
-                    "required": false
-                },
-                {
-                    "name": "role",
-                    "title": "Role",
-                    "type": "string",
-                    "description": "The ARIA role of the menu item",
-                    "default": "menuitem",
-                    "values": [{ "name": "menuitem" }, { "name": "menuitemcheckbox" }, { "name": "menuitemradio" }],
-                    "required": false
-                },
-                {
-                    "name": "checked",
-                    "title": "Checked",
-                    "type": "boolean",
-                    "description": "The checked state for elements with a role of menuitemradio or menuitemcheckbox",
-                    "default": true,
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The content of the menu item"
-                },
-                {
-                    "name": "start",
-                    "title": "Start slot",
-                    "description": "Contents of the start slot are positioned before the item content"
-                },
-                {
-                    "name": "end",
-                    "title": "End slot",
-                    "description": "Contents of the end slot are positioned after the item content"
-                },
-                {
-                    "name": "submenu",
-                    "title": "Sub menu slot",
-                    "description": "The submenu slot"
-                },
-                {
-                    "name": "checkbox-indicator",
-                    "title": "Checkbox indicator",
-                    "description": "The checkbox indicator slot"
-                },
-                {
-                    "name": "radio-indicator",
-                    "title": "Radio indicator",
-                    "description": "The radio indicator slot"
-                },
-                {
-                    "name": "expand-collapse-indicator",
-                    "title": "Expand/collapse indicator",
-                    "description": "The expand/collapse indicator slot"
-                }
-            ]
-        }
-    ]
-}

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

@@ -1,57 +0,0 @@
-import { __decorate } from "tslib";
-import { attr } from '@microsoft/fast-element';
-import { NumberField as FoundationNumberField, numberFieldTemplate as template, } from '@microsoft/fast-foundation';
-import { numberFieldStyles as styles } from './number-field.styles';
-/**
- * The Fluent number field class
- * @internal
- */
-export class NumberField extends FoundationNumberField {
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        if (!this.appearance) {
-            this.appearance = 'outline';
-        }
-    }
-}
-__decorate([
-    attr
-], NumberField.prototype, "appearance", void 0);
-/**
- * Styles for NumberField
- * @public
- */
-export const numberFieldStyles = styles;
-/**
- * The Fluent Number Field Custom Element. Implements {@link @microsoft/fast-foundation#NumberField},
- * {@link @microsoft/fast-foundation#numberFieldTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-number-field\>
- *
- * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
- */
-export const fluentNumberField = NumberField.compose({
-    baseName: 'number-field',
-    baseClass: FoundationNumberField,
-    styles,
-    template,
-    shadowOptions: {
-        delegatesFocus: true,
-    },
-    stepDownGlyph: `
-    <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>
-  `,
-    stepUpGlyph: `
-    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
-      <path d="M2.15 7.35c.2.2.5.2.7 0L6 4.21l3.15 3.14a.5.5 0 10.7-.7l-3.5-3.5a.5.5 0 00-.7 0l-3.5 3.5a.5.5 0 000 .7z"/>
-    </svg>
-`,
-});

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

@@ -1,83 +0,0 @@
-import { fluentNumberField } from './index';
-export default {
-    title: 'Components/Number Field',
-    component: fluentNumberField,
-    argTypes: {
-        appearance: {
-            defaultValue: 'outline',
-            options: ['filled', 'outline'],
-            control: { type: 'radio' },
-        },
-        autoFocus: {
-            control: { type: 'boolean' },
-        },
-        disabled: {
-            control: { type: 'boolean' },
-        },
-        hideStep: {
-            control: { type: 'boolean' },
-        },
-        maxlength: {
-            control: { type: 'number' },
-        },
-        minlength: {
-            control: { type: 'number' },
-        },
-        placeholder: {
-            control: { type: 'text' },
-        },
-        readonly: {
-            control: { type: 'boolean' },
-        },
-        required: {
-            control: { type: 'boolean' },
-        },
-        step: {
-            control: { type: 'number' },
-            defaultValue: 1,
-        },
-        size: {
-            control: { type: 'number' },
-        },
-        value: {
-            control: { type: 'text' },
-        },
-    },
-};
-const NumberFieldTemplate = ({ appearance, autoFocus, disabled, hideStep, label, maxlength, minlength, placeholder, readonly, required, size, step, value, }) => `
-  <fluent-number-field
-    ${appearance ? `appearance="${appearance}"` : ''}
-    ${autoFocus ? 'autofocus' : ''}
-    ${disabled ? 'disabled' : ''}
-    ${hideStep ? 'hide-step' : ''}
-    ${maxlength ? `maxlength="${maxlength}"` : ''}
-    ${minlength ? `minlength="${minlength}"` : ''}
-    ${placeholder ? `placeholder="${placeholder}"` : ''}
-    ${readonly ? 'readonly' : ''}
-    ${required ? 'required' : ''}
-    ${size ? `size="${size}"` : ''}
-    ${step ? `step="${step}"` : ''}
-    ${value ? `value="${value}"` : ''}
-  >
-    ${label ? `${label}` : ''}
-  </fluent-number-field>
-`;
-export const NumberField = NumberFieldTemplate.bind({});
-NumberField.args = {
-    placeholder: 'type a number',
-    autoFocus: false,
-    disabled: false,
-    hideStep: false,
-    readonly: false,
-    required: false,
-};
-const example = `
-<fluent-number-field appearance="outline" ></fluent-number-field>
-`;
-NumberField.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

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

@@ -1,71 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { baseInputStyles, inputFilledStyles, inputForcedColorStyles, inputOutlineStyles, inputStateStyles, } from '../styles/index';
-import { appearanceBehavior } from '../utilities/behaviors';
-import { designUnit } from '../design-tokens';
-const logicalControlSelector = '.root';
-export const numberFieldStyles = (context, definition) => css `
-    ${display('inline-block')}
-
-    ${baseInputStyles(context, definition, logicalControlSelector)}
-
-    ${inputStateStyles(context, definition, logicalControlSelector)}
-
-    .root {
-      display: flex;
-      flex-direction: row;
-    }
-
-    .control {
-      -webkit-appearance: none;
-      color: inherit;
-      background: transparent;
-      border: 0;
-      height: calc(100% - 4px);
-      margin-top: auto;
-      margin-bottom: auto;
-      padding: 0 calc(${designUnit} * 2px + 1px);
-      font-family: inherit;
-      font-size: inherit;
-      line-height: inherit;
-    }
-
-    .start,
-    .end {
-      margin: auto;
-      fill: currentcolor;
-    }
-
-    .start {
-      display: flex;
-      margin-inline-start: 11px;
-    }
-
-    .end {
-      display: flex;
-      margin-inline-end: 11px;
-    }
-
-    .controls {
-      opacity: 0;
-      position: relative;
-      top: -1px;
-      z-index: 3;
-    }
-
-    :host(:hover:not([disabled])) .controls,
-    :host(:focus-within:not([disabled])) .controls {
-      opacity: 1;
-    }
-
-    .step-up,
-    .step-down {
-      display: flex;
-      padding: 0 8px;
-      cursor: pointer;
-    }
-
-    .step-up {
-      padding-top: 3px;
-    }
-  `.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector)));