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

package/dist/esm/radio/index.js

@@ -1,31 +0,0 @@
-import { Radio, radioTemplate as template } from '@microsoft/fast-foundation';
-import { radioStyles as styles } from './radio.styles';
-/**
- * The Fluent Radio Element. Implements {@link @microsoft/fast-foundation#Radio},
- * {@link @microsoft/fast-foundation#radioTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-radio\>
- */
-export const fluentRadio = Radio.compose({
-    baseName: 'radio',
-    template,
-    styles,
-    checkedIndicator: `
-    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="8" cy="8" r="4"/>
-    </svg>
-  `,
-});
-/**
- * Styles for Radio
- * @public
- */
-export const RadioStyles = styles;
-/**
- * Radio base class
- * @public
- */
-export { Radio };

package/dist/esm/radio/radio.stories.js

@@ -1,41 +0,0 @@
-// import Examples from './fixtures/radio.html';
-import { fluentRadio } from './index';
-export default {
-    title: 'Components/Radio',
-    component: fluentRadio,
-    argTypes: {
-        checked: {
-            control: { type: 'boolean' },
-        },
-        disabled: {
-            control: { type: 'boolean' },
-        },
-        required: {
-            control: { type: 'boolean' },
-        },
-    },
-};
-const RadioTemplate = ({ checked, disabled, required, label }) => `
-  <fluent-radio
-    ${checked ? 'checked' : ''}
-    ${disabled ? 'disabled' : ''}
-    ${required ? 'required' : ''}
-  >${label}</fluent-radio>
-`;
-export const Radio = RadioTemplate.bind({});
-Radio.args = {
-    label: 'Label',
-    checked: false,
-    disabled: false,
-    required: false,
-};
-const example = `
-<fluent-radio></fluent-radio>
-`;
-Radio.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

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

@@ -1,152 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { heightNumber } from '../styles';
-import { accentFillActive, accentFillHover, accentFillRest, designUnit, disabledOpacity, foregroundOnAccentRest, neutralFillInputAltActive, neutralFillInputAltFocus, neutralFillInputAltHover, neutralFillInputAltRest, neutralForegroundRest, neutralStrokeStrongActive, neutralStrokeStrongHover, neutralStrokeStrongRest, strokeWidth, } from '../design-tokens';
-import { typeRampBase } from '../styles/patterns/type-ramp';
-import { focusTreatmentTight } from '../styles/focus';
-export const radioStyles = (context, definition) => css `
-    ${display('inline-flex')} :host {
-      --input-size: calc((${heightNumber} / 2) + ${designUnit});
-      align-items: center;
-      outline: none;
-      ${
-/*
- * Chromium likes to select label text or the default slot when
- * the radio button is clicked. Maybe there is a better solution here?
- */ ''} user-select: none;
-      position: relative;
-      flex-direction: row;
-      transition: all 0.2s ease-in-out;
-    }
-
-    .control {
-      position: relative;
-      width: calc(var(--input-size) * 1px);
-      height: calc(var(--input-size) * 1px);
-      box-sizing: border-box;
-      border-radius: 50%;
-      border: calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};
-      background: ${neutralFillInputAltRest};
-      cursor: pointer;
-    }
-
-    .label__hidden {
-      display: none;
-      visibility: hidden;
-    }
-
-    .label {
-      ${typeRampBase}
-      color: ${neutralForegroundRest};
-      ${
-/* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */ ''} padding-inline-start: calc(${designUnit} * 2px + 2px);
-      margin-inline-end: calc(${designUnit} * 2px + 2px);
-      cursor: pointer;
-    }
-
-    .control,
-    slot[name='checked-indicator'] {
-      flex-shrink: 0;
-    }
-
-    slot[name='checked-indicator'] {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-      fill: ${foregroundOnAccentRest};
-      opacity: 0;
-      pointer-events: none;
-    }
-
-    :host(:not(.disabled):hover) .control {
-      background: ${neutralFillInputAltHover};
-      border-color: ${neutralStrokeStrongHover};
-    }
-
-    :host(:not(.disabled):active) .control {
-      background: ${neutralFillInputAltActive};
-      border-color: ${neutralStrokeStrongActive};
-    }
-
-    :host(:not(.disabled):active) slot[name='checked-indicator'] {
-      opacity: 1;
-    }
-
-    :host(:${focusVisible}) .control {
-      ${focusTreatmentTight}
-      background: ${neutralFillInputAltFocus};
-    }
-
-    :host(.checked) .control {
-      background: ${accentFillRest};
-      border-color: transparent;
-    }
-
-    :host(.checked:not(.disabled):hover) .control {
-      background: ${accentFillHover};
-      border-color: transparent;
-    }
-
-    :host(.checked:not(.disabled):active) .control {
-      background: ${accentFillActive};
-      border-color: transparent;
-    }
-
-    :host(.disabled) .label,
-    :host(.readonly) .label,
-    :host(.readonly) .control,
-    :host(.disabled) .control {
-      cursor: ${disabledCursor};
-    }
-
-    :host(.checked) slot[name='checked-indicator'] {
-      opacity: 1;
-    }
-
-    :host(.disabled) {
-      opacity: ${disabledOpacity};
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        .control {
-          background: ${SystemColors.Field};
-          border-color: ${SystemColors.FieldText};
-        }
-        :host(:not(.disabled):hover) .control,
-        :host(:not(.disabled):active) .control {
-          border-color: ${SystemColors.Highlight};
-        }
-        :host(:${focusVisible}) .control {
-          forced-color-adjust: none;
-          background: ${SystemColors.Field};
-          outline-color: ${SystemColors.FieldText};
-        }
-        :host(.checked:not(.disabled):hover) .control,
-        :host(.checked:not(.disabled):active) .control {
-          border-color: ${SystemColors.Highlight};
-          background: ${SystemColors.Highlight};
-        }
-        :host(.checked) slot[name='checked-indicator'] {
-          fill: ${SystemColors.Highlight};
-        }
-        :host(.checked:hover) .control slot[name='checked-indicator'] {
-          fill: ${SystemColors.HighlightText};
-        }
-        :host(.disabled) {
-          opacity: 1;
-        }
-        :host(.disabled) .label {
-          color: ${SystemColors.GrayText};
-        }
-        :host(.disabled) .control,
-        :host(.checked.disabled) .control {
-          background: ${SystemColors.Field};
-          border-color: ${SystemColors.GrayText};
-        }
-        :host(.disabled) slot[name='checked-indicator'],
-        :host(.checked.disabled) slot[name='checked-indicator'] {
-          fill: ${SystemColors.GrayText};
-        }
-      `));

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

@@ -1,63 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-radio",
-            "title": "Radio",
-            "description": "The Fluent UI radio element",
-            "attributes": [
-                {
-                    "name": "checked",
-                    "title": "Checked",
-                    "description": "Whether or not this radio is checked by default",
-                    "required": false,
-                    "type": "boolean"
-                },
-                {
-                    "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": "required",
-                    "title": "Required",
-                    "description": "Require the field to be completed prior to form submission",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "disabled",
-                    "title": "Disabled",
-                    "description": "Sets the disabled state of the radio",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "readonly",
-                    "title": "Readonly",
-                    "description": "When true, the control will be immutable by user interaction",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The content of the radio represents its visual label"
-                },
-                {
-                    "name": "checked-indicator",
-                    "title": "Checked indicator slot",
-                    "description": "Slot to provide a custom icon to represent the checked state"
-                }
-            ]
-        }
-    ]
-}

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

@@ -1,26 +0,0 @@
-import { RadioGroup, radioGroupTemplate as template } from '@microsoft/fast-foundation';
-import { radioGroupStyles as styles } from './radio-group.styles';
-/**
- * The Fluent Radio Group Element. Implements {@link @microsoft/fast-foundation#RadioGroup},
- * {@link @microsoft/fast-foundation#radioGroupTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-radio-group\>
- */
-export const fluentRadioGroup = RadioGroup.compose({
-    baseName: 'radio-group',
-    template,
-    styles,
-});
-/**
- * Styles for RadioGroup
- * @public
- */
-export const radioGroupStyles = styles;
-/**
- * Radio group base class
- * @public
- */
-export { RadioGroup };

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

@@ -1,42 +0,0 @@
-import { fluentRadioGroup } from './index';
-export default {
-    title: 'Components/Radio Group',
-    component: fluentRadioGroup,
-    argTypes: {
-        disabled: {
-            control: { type: 'boolean' },
-        },
-        required: {
-            control: { type: 'boolean' },
-        },
-    },
-};
-const RadioGroupTemplate = ({ disabled, required }) => `
-  <fluent-radio-group
-    ${disabled ? 'disabled' : ''}
-    ${required ? 'required' : ''}
-  >
-    <fluent-radio>Apples</fluent-radio>
-    <fluent-radio>Bananas</fluent-radio>
-    <fluent-radio>Tomatoes</fluent-radio>
-  </fluent-radio-group>`;
-export const RadioGroup = RadioGroupTemplate.bind({});
-RadioGroup.args = {
-    disabled: false,
-    required: false,
-};
-const example = `
-<fluent-radio-group name="fruits" >
-  <label style="color: --var(neutral-foreground-rest)" slot="label"> Numbers </label>
-  <fluent-radio>Apples</fluent-radio>
-  <fluent-radio>Bananas</fluent-radio>
-  <fluent-radio>Bananas</fluent-radio>
-</fluent-radio-group>
-`;
-RadioGroup.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

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

@@ -1,21 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-export const radioGroupStyles = (context, definition) => css `
-  ${display('flex')} :host {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .positioning-region {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  :host([orientation='vertical']) .positioning-region {
-    flex-direction: column;
-  }
-
-  :host([orientation='horizontal']) .positioning-region {
-    flex-direction: row;
-  }
-`;

package/dist/esm/radio-group/radio-group.vscode.definition.json

@@ -1,64 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-radio-group",
-            "title": "Radio group",
-            "description": "The Fluent UI radio-group element",
-            "attributes": [
-                {
-                    "name": "value",
-                    "title": "Value",
-                    "description": "The value of the radio group",
-                    "required": false,
-                    "type": "string"
-                },
-                {
-                    "name": "orientation",
-                    "title": "Orientation",
-                    "description": "The visual orientation of the group",
-                    "default": "horizontal",
-                    "values": [{ "name": "horizontal" }, { "name": "vertical" }],
-                    "required": false,
-                    "type": "string"
-                },
-                {
-                    "name": "name",
-                    "title": "Name",
-                    "description": "Setting this value will set the name value for all child radios",
-                    "type": "string",
-                    "default": "",
-                    "required": false
-                },
-                {
-                    "name": "disabled",
-                    "title": "Disabled",
-                    "description": "Disables the radio group and child radios",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "readonly",
-                    "title": "Readonly",
-                    "description": "When true, the child radios will be immutable by user interaction",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "Supports fluent-radio elements or elements with a role of 'radio'"
-                },
-                {
-                    "name": "label",
-                    "title": "Label slot",
-                    "description": "The visual label for the group"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/search/index.js

@@ -1,52 +0,0 @@
-import { __decorate } from "tslib";
-import { attr } from '@microsoft/fast-element';
-import { Search as FoundationSearch } from '@microsoft/fast-foundation';
-import { searchTemplate as template } from './search.template';
-import { searchStyles as styles } from './search.styles';
-/**
- * The Fluent search class
- * @internal
- */
-export class Search extends FoundationSearch {
-    constructor() {
-        super(...arguments);
-        /**
-         * The appearance of the element.
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: appearance
-         */
-        this.appearance = 'outline';
-    }
-}
-__decorate([
-    attr
-], Search.prototype, "appearance", void 0);
-/**
- * The Fluent Search Custom Element. Implements {@link @microsoft/fast-foundation#Search},
- * {@link @microsoft/fast-foundation#searchTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-search\>
- *
- * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
- */
-export const fluentSearch = Search.compose({
-    baseName: 'search',
-    baseClass: FoundationSearch,
-    template,
-    styles,
-    start: `<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg%22%3E"><path d="M8.5 3a5.5 5.5 0 0 1 4.23 9.02l4.12 4.13a.5.5 0 0 1-.63.76l-.07-.06-4.13-4.12A5.5 5.5 0 1 1 8.5 3Zm0 1a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z"/></svg>`,
-    shadowOptions: {
-        delegatesFocus: true,
-    },
-});
-export * from './search.template';
-/**
- * Styles for Search
- * @public
- */
-export const searchStyles = styles;

package/dist/esm/search/search.stories.js

@@ -1,83 +0,0 @@
-import { fluentSearch } from './index';
-export default {
-    title: 'Components/Search',
-    component: fluentSearch,
-    argTypes: {
-        appearance: {
-            options: ['filled', 'outline'],
-            defaultValue: 'outline',
-            control: { type: 'radio' },
-        },
-        autoFocus: {
-            description: 'Automatically focuses the control',
-            control: { type: 'boolean' },
-        },
-        disabled: {
-            description: 'The search box should be submitted with the form but should not be editable',
-            control: { type: 'boolean' },
-        },
-        list: {
-            control: { type: 'text' },
-        },
-        maxlength: {
-            control: { type: 'number' },
-        },
-        name: {
-            control: { type: 'text' },
-        },
-        minlength: {
-            control: { type: 'number' },
-        },
-        pattern: {
-            description: `A regular expression the input's contents must match in order to be valid`,
-            control: { type: 'text' },
-        },
-        placeholder: {
-            description: 'An exemplar value to display in the input field whenever it is empty',
-            defaultValue: 'Placeholder',
-            control: { type: 'text' },
-        },
-        readonly: {
-            control: { type: 'boolean' },
-        },
-        required: {
-            control: { type: 'boolean' },
-        },
-        spellcheck: {
-            control: { type: 'boolean' },
-        },
-    },
-};
-const SearchTemplate = ({ appearance, autoFocus, disabled, list, maxlength, name, minlength, pattern, placeholder, readonly, required, size, spellcheck, }) => `<fluent-search
-    ${appearance ? `appearance="${appearance}"` : ''}
-    ${autoFocus ? 'autofocus' : ''}
-    ${disabled ? 'disabled' : ''}
-    ${list ? `list="${list}"` : ''}
-    ${maxlength ? `maxlength="${maxlength}"` : ''}
-    ${name ? `name="${name}"` : ''}
-    ${minlength ? `minlength="${minlength}"` : ''}
-    ${pattern ? `pattern="${pattern}"` : ''}
-    ${placeholder ? `placeholder="${placeholder}"` : ''}
-    ${readonly ? 'readonly' : ''}
-    ${required ? 'required' : ''}
-    ${spellcheck ? `spellcheck="${spellcheck}"` : ''}
-    ${size ? `size="${size}"` : ''}
-  ></fluent-search>`;
-export const Search = SearchTemplate.bind({});
-Search.args = {
-    placeholder: 'placeholder',
-    autoFocus: false,
-    disabled: false,
-    readonly: false,
-    required: false,
-};
-const example = `
-<fluent-search appearance="outline"></fluent-search>
-`;
-Search.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/search/search.styles.js

@@ -1,104 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { Button, DesignToken, display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { baseInputStyles, heightNumber, inputFilledStyles, inputForcedColorStyles, inputOutlineStyles, inputStateStyles, } from '../styles';
-import { appearanceBehavior } from '../utilities/behaviors';
-import { controlCornerRadius, density, designUnit, neutralFillInputRecipe, neutralFillStealthRecipe, neutralForegroundRest } from '../design-tokens';
-import { typeRampBase } from '../styles/patterns/type-ramp';
-const logicalControlSelector = '.root';
-const clearButtonHover = DesignToken.create("clear-button-hover").withDefault((target) => {
-    const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
-    const inputRecipe = neutralFillInputRecipe.getValueFor(target);
-    return buttonRecipe.evaluate(target, inputRecipe.evaluate(target).focus).hover;
-});
-const clearButtonActive = DesignToken.create("clear-button-active").withDefault((target) => {
-    const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
-    const inputRecipe = neutralFillInputRecipe.getValueFor(target);
-    return buttonRecipe.evaluate(target, inputRecipe.evaluate(target).focus).active;
-});
-export const searchStyles = (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;
-    }
-    .clear-button {
-      display: inline-flex;
-      align-items: center;
-      margin: 1px;
-      height: calc(100% - 2px);
-      opacity: 0;
-      background: transparent;
-      color: ${neutralForegroundRest};
-      fill: currentcolor;
-      border: none;
-      border-radius: calc(${controlCornerRadius} * 1px);
-      min-width: calc(${heightNumber} * 1px);
-      ${typeRampBase}
-      outline: none;
-      padding: 0 calc((10 + (${designUnit} * 2 * ${density})) * 1px);
-    }
-    .clear-button:hover {
-      background: ${clearButtonHover};
-    }
-    .clear-button:active {
-      background: ${clearButtonActive};
-    }
-    :host(:hover:not([disabled], [readOnly])) .clear-button,
-    :host(:active:not([disabled], [readOnly])) .clear-button,
-    :host(:focus-within:not([disabled], [readOnly])) .clear-button {
-        opacity: 1;
-    }
-    :host(:hover:not([disabled], [readOnly])) .clear-button__hidden,
-    :host(:active:not([disabled], [readOnly])) .clear-button__hidden,
-    :host(:focus-within:not([disabled], [readOnly])) .clear-button__hidden {
-        opacity: 0;
-    }
-    .control::-webkit-search-cancel-button {
-      -webkit-appearance: none;
-    }
-    .input-wrapper {
-      display: flex;
-      position: relative;
-      width: 100%;
-    }
-    .start,
-    .end {
-      display: flex;
-      margin: 1px;
-      align-items: center;
-    }
-    .start {
-      display: flex;
-      margin-inline-start: 11px;
-    }
-    ::slotted([slot="end"]) {
-      height: 100%
-    }
-    .clear-button__hidden {
-      opacity: 0;
-    }
-    .end {
-        margin-inline-end: 11px;
-    }
-    ::slotted(${context.tagFor(Button)}) {
-      margin-inline-end: 1px;
-    }
-  `.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector)));