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

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

package/dist/esm/search/search.template.js

@@ -1,82 +0,0 @@
-import { html, ref, slotted } from '@microsoft/fast-element';
-import { endSlotTemplate, startSlotTemplate, whitespaceFilter, } from '@microsoft/fast-foundation';
-/**
- * @public
- */
-export const searchTemplate = (context, definition) => html `
-  <template
-    class="
-            ${x => (x.readOnly ? 'readonly' : '')}
-        "
-  >
-    <label
-      part="label"
-      for="control"
-      class="${x => (x.defaultSlottedNodes && x.defaultSlottedNodes.length ? 'label' : 'label label__hidden')}"
-    >
-      <slot ${slotted({ property: 'defaultSlottedNodes', filter: whitespaceFilter })}></slot>
-    </label>
-    <div class="root" part="root" ${ref('root')}>
-      ${startSlotTemplate(context, definition)}
-      <div class="input-wrapper" part="input-wrapper">
-        <input
-          class="control"
-          part="control"
-          id="control"
-          @input="${x => x.handleTextInput()}"
-          @change="${x => x.handleChange()}"
-          ?autofocus="${x => x.autofocus}"
-          ?disabled="${x => x.disabled}"
-          list="${x => x.list}"
-          maxlength="${x => x.maxlength}"
-          minlength="${x => x.minlength}"
-          pattern="${x => x.pattern}"
-          placeholder="${x => x.placeholder}"
-          ?readonly="${x => x.readOnly}"
-          ?required="${x => x.required}"
-          size="${x => x.size}"
-          ?spellcheck="${x => x.spellcheck}"
-          :value="${x => x.value}"
-          type="search"
-          aria-atomic="${x => x.ariaAtomic}"
-          aria-busy="${x => x.ariaBusy}"
-          aria-controls="${x => x.ariaControls}"
-          aria-current="${x => x.ariaCurrent}"
-          aria-describedby="${x => x.ariaDescribedby}"
-          aria-details="${x => x.ariaDetails}"
-          aria-disabled="${x => x.ariaDisabled}"
-          aria-errormessage="${x => x.ariaErrormessage}"
-          aria-flowto="${x => x.ariaFlowto}"
-          aria-haspopup="${x => x.ariaHaspopup}"
-          aria-hidden="${x => x.ariaHidden}"
-          aria-invalid="${x => x.ariaInvalid}"
-          aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
-          aria-label="${x => x.ariaLabel}"
-          aria-labelledby="${x => x.ariaLabelledby}"
-          aria-live="${x => x.ariaLive}"
-          aria-owns="${x => x.ariaOwns}"
-          aria-relevant="${x => x.ariaRelevant}"
-          aria-roledescription="${x => x.ariaRoledescription}"
-          ${ref('control')}
-        />
-        <slot name="clear-button">
-          <button
-            class="clear-button ${x => (x.value ? '' : 'clear-button__hidden')}"
-            part="clear-button"
-            tabindex="-1"
-            @click=${x => x.handleClearInput()}
-          >
-            <slot name="clear-glyph">
-              <svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-                <path
-                  d="m2.09 2.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L6 5.29l3.15-3.14a.5.5 0 1 1 .7.7L6.71 6l3.14 3.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L6 6.71 2.85 9.85a.5.5 0 0 1-.7-.7L5.29 6 2.15 2.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
-                />
-              </svg>
-            </slot>
-          </button>
-        </slot>
-      </div>
-      ${endSlotTemplate(context, definition)}
-    </div>
-  </template>
-`;

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

@@ -1,145 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-search",
-            "title": "Search",
-            "description": "The Fluent UI search element",
-            "attributes": [
-                {
-                    "name": "value",
-                    "title": "Value",
-                    "description": "The HTML value attribute of the search",
-                    "required": false,
-                    "type": "string"
-                },
-                {
-                    "name": "appearance",
-                    "title": "Appearance",
-                    "description": "The field's visual treatment",
-                    "default": "outline",
-                    "values": [{ "name": "outline" }, { "name": "filled" }],
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "autofocus",
-                    "title": "Autofocus",
-                    "description": "Determines if the element should receive document focus on page load",
-                    "required": false,
-                    "type": "boolean",
-                    "default": false
-                },
-                {
-                    "name": "placeholder",
-                    "title": "Placeholder",
-                    "description": "Sets the placeholder value of the element, generally used to provide a hint to the user",
-                    "required": false,
-                    "type": "string"
-                },
-                {
-                    "name": "list",
-                    "title": "List ID",
-                    "description": "Allows associating a datalist to the component",
-                    "required": false,
-                    "type": "string",
-                    "default": ""
-                },
-                {
-                    "name": "maxlength",
-                    "title": "Maximum length",
-                    "description": "The maximum number of characters a user can enter",
-                    "required": false,
-                    "type": "number"
-                },
-                {
-                    "name": "minlength",
-                    "title": "Minimum length",
-                    "description": "The minimum number of characters a user can enter",
-                    "required": false,
-                    "type": "number"
-                },
-                {
-                    "name": "pattern",
-                    "title": "Validation pattern",
-                    "description": "A regular expression that the value must match to pass validation",
-                    "required": false,
-                    "type": "string"
-                },
-                {
-                    "name": "size",
-                    "title": "Size",
-                    "description": "Sets the width of the element to a specified number of characters",
-                    "required": false,
-                    "type": "number"
-                },
-                {
-                    "name": "spellcheck",
-                    "title": "Spellcheck",
-                    "description": "Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used",
-                    "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 field",
-                    "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 field represents its visual label"
-                },
-                {
-                    "name": "start",
-                    "title": "Start slot",
-                    "description": "Contents of the start slot are positioned before the input area"
-                },
-                {
-                    "name": "end",
-                    "title": "End slot",
-                    "description": "Contents of the end slot are positioned after the input area"
-                },
-                {
-                    "name": "clear-button",
-                    "title": "Clear button slot",
-                    "description": "Contents of the clear button slot are positioned after the content and is what clears the value when a value is set"
-                },
-                {
-                    "name": "clear-glyph",
-                    "title": "Clear glyph slot",
-                    "description": "Contents of the clear button"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/select/index.js

@@ -1,61 +0,0 @@
-import { __decorate } from "tslib";
-import { attr } from '@microsoft/fast-element';
-import { Select as FoundationSelect, selectTemplate as template } from '@microsoft/fast-foundation';
-import { fillColor, neutralLayerFloating } from '../design-tokens';
-import { selectStyles as styles } from './select.styles';
-/**
- * The Fluent select class
- * @internal
- */
-export class Select extends FoundationSelect {
-    /**
-     * @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' })
-], Select.prototype, "appearance", void 0);
-/**
- * The Fluent select Custom Element. Implements, {@link @microsoft/fast-foundation#Select}
- * {@link @microsoft/fast-foundation#selectTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-select\>
- *
- */
-export const fluentSelect = Select.compose({
-    baseName: 'select',
-    baseClass: FoundationSelect,
-    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 Select
- * @public
- */
-export const selectStyles = styles;

package/dist/esm/select/select.stories.js

@@ -1,53 +0,0 @@
-import '../listbox-option';
-import { fluentSelect } from './index';
-export default {
-    title: 'Components/Select',
-    component: fluentSelect,
-    argTypes: {
-        appearance: {
-            options: ['filled', 'outline', 'stealth'],
-            control: { type: 'radio' },
-            defaultValue: 'outline',
-        },
-        disabled: {
-            control: { type: 'boolean' },
-        },
-        position: {
-            options: ['above', 'below'],
-            control: { type: 'radio' },
-            defaultValue: 'below',
-        },
-    },
-};
-const SelectTemplate = ({ appearance, disabled, position }) => `
-  <fluent-select
-    ${appearance ? `appearance="${appearance}"` : ''}
-    ${disabled ? 'disabled' : ''} 
-    ${position ? `position="${position}"` : ''}
-    style="margin-bottom: 200px;"
-  >
-    <fluent-option>Option One</fluent-option>
-    <fluent-option>Option Two</fluent-option>
-    <fluent-option>Option Three</fluent-option>
-    <fluent-option>Option Four</fluent-option>
-  </fluent-select>
-`;
-export const Select = SelectTemplate.bind({});
-Select.args = {
-    disabled: false,
-};
-const example = `
-<fluent-select>
-  <fluent-option>This option has no value</fluent-option>
-  <fluent-option disabled>This option is disabled</fluent-option>
-  <fluent-option value="hi">This option has a value</fluent-option>
-  <fluent-option selected>This option is selected by default</fluent-option>
-</fluent-select>
-`;
-Select.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/select/select.styles.js

@@ -1,139 +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 { elevationShadowFlyout } from '../styles/elevation';
-import { heightNumber } from '../styles/size';
-import { appearanceBehavior } from '../utilities/behaviors';
-import { bodyFont, controlCornerRadius, designUnit, disabledOpacity, fillColor, layerCornerRadius, neutralForegroundRest, strokeWidth, } from '../design-tokens';
-import { typeRampBase } from '../styles/patterns/type-ramp';
-import { focusTreatmentBase } from '../styles/focus';
-import { inputFilledStyles, inputForcedColorStyles, NeutralButtonStyles, StealthButtonStyles } from '../styles';
-const logicalControlSelector = '.control';
-const interactivitySelector = ':not([disabled]):not([open])';
-const nonInteractivitySelector = '[disabled]';
-/**
- * The base styles for a select and combobox, without `appearance` visual differences.
- *
- * @internal
- */
-export const baseSelectStyles = (context, definition) => css `
-    ${display('inline-flex')}
-    
-    :host {
-      border-radius: calc(${controlCornerRadius} * 1px);
-      box-sizing: border-box;
-      color: ${neutralForegroundRest};
-      fill: currentcolor;
-      font-family: ${bodyFont};
-      position: relative;
-      user-select: none;
-      min-width: 250px;
-      vertical-align: top;
-    }
-
-    .listbox {
-      box-shadow: ${elevationShadowFlyout};
-      background: ${fillColor};
-      border-radius: calc(${layerCornerRadius} * 1px);
-      box-sizing: border-box;
-      display: inline-flex;
-      flex-direction: column;
-      left: 0;
-      max-height: calc(var(--max-height) - (${heightNumber} * 1px));
-      padding: calc((${designUnit} - ${strokeWidth} ) * 1px);
-      overflow-y: auto;
-      position: absolute;
-      width: 100%;
-      z-index: 1;
-      margin: 1px 0;
-      border: calc(${strokeWidth} * 1px) solid transparent;
-    }
-
-    .listbox[hidden] {
-      display: none;
-    }
-
-    .control {
-      border: calc(${strokeWidth} * 1px) solid transparent;
-      border-radius: calc(${controlCornerRadius} * 1px);
-      height: calc(${heightNumber} * 1px);
-      align-items: center;
-      box-sizing: border-box;
-      cursor: pointer;
-      display: flex;
-      ${typeRampBase}
-      min-height: 100%;
-      padding: 0 calc(${designUnit} * 2.25px);
-      width: 100%;
-    }
-
-    :host(:${focusVisible}) {
-      ${focusTreatmentBase}
-    }
-
-    :host([disabled]) .control {
-      cursor: ${disabledCursor};
-      opacity: ${disabledOpacity};
-      user-select: none;
-    }
-
-    :host([open][position='above']) .listbox {
-      bottom: calc((${heightNumber} + ${designUnit} * 2) * 1px);
-    }
-
-    :host([open][position='below']) .listbox {
-      top: calc((${heightNumber} + ${designUnit} * 2) * 1px);
-    }
-
-    .selected-value {
-      font-family: inherit;
-      flex: 1 1 auto;
-      text-align: start;
-    }
-
-    .indicator {
-      flex: 0 0 auto;
-      margin-inline-start: 1em;
-    }
-
-    slot[name='listbox'] {
-      display: none;
-      width: 100%;
-    }
-
-    :host([open]) slot[name='listbox'] {
-      display: flex;
-      position: absolute;
-    }
-
-    .start {
-      margin-inline-end: 11px;
-    }
-
-    .end {
-      margin-inline-start: 11px;
-    }
-
-    .start,
-    .end,
-    .indicator,
-    ::slotted(svg) {
-      display: flex;
-    }
-
-    ::slotted([role='option']) {
-      flex: 0 0 auto;
-    }
-  `;
-/**
- * @internal
- */
-export const baseSelectForcedColorStyles = (context, definition) => css `
-    :host([open]) .listbox {
-      background: ${SystemColors.ButtonFace};
-      border-color: ${SystemColors.CanvasText};
-    }
-  `;
-export const selectStyles = (context, definition) => baseSelectStyles(context, definition)
-    .withBehaviors(appearanceBehavior('outline', NeutralButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector, interactivitySelector)
-    .withBehaviors(forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector, interactivitySelector)))), appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), forcedColorsStylesheetBehavior(baseSelectForcedColorStyles(context, definition)));

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

@@ -1,79 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-select",
-            "title": "Select",
-            "description": "The Fluent UI select element",
-            "attributes": [
-                {
-                    "name": "appearance",
-                    "title": "Appearance",
-                    "description": "The select's visual treatment",
-                    "type": "string",
-                    "values": [
-                        {
-                            "name": "filled"
-                        },
-                        {
-                            "name": "outline"
-                        },
-                        {
-                            "name": "stealth"
-                        }
-                    ],
-                    "default": "outline",
-                    "required": false
-                },
-                {
-                    "name": "disabled",
-                    "title": "Disabled",
-                    "description": "Sets the disabled state of the select",
-                    "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
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "Supports fluent-option or option elements"
-                },
-                {
-                    "name": "button-container",
-                    "title": "Button container slot",
-                    "description": "Slot to replace the entire invoking element and its contents"
-                },
-                {
-                    "name": "selected-value",
-                    "title": "Selected value slot",
-                    "description": "Slot to replace the displayed value contents"
-                },
-                {
-                    "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 button container"
-                },
-                {
-                    "name": "end",
-                    "title": "End slot",
-                    "description": "Contents of the end slot are positioned after the button container and after the indicator"
-                }
-            ]
-        }
-    ]
-}