@fluentui/web-components 2.1.2 → 2.2.2

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

@@ -0,0 +1,108 @@
+import { css } from '@microsoft/fast-element';
+import { Button, DesignToken, display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
+import { heightNumber, inputFilledForcedColorStyles, inputFilledStyles, inputForcedColorStyles, inputStateStyles, inputStyles, } from '../styles';
+import { appearanceBehavior } from '../utilities/behaviors';
+import { bodyFont, controlCornerRadius, density, designUnit, neutralFillInputRecipe, neutralFillStealthRecipe, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';
+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 searchFilledStyles = (context, definition) => css `
+    ${inputFilledStyles(context, definition, '.root')}
+  `.withBehaviors(forcedColorsStylesheetBehavior(css `
+        ${inputFilledForcedColorStyles(context, definition, '.root')}
+      `));
+export const searchStyles = (context, definition) => css `
+    ${display('inline-block')}
+    ${inputStyles(context, definition, '.root')}
+    ${inputStateStyles(context, definition, '.root')}
+    .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);
+      font-size: ${typeRampBaseFontSize};
+      line-height: ${typeRampBaseLineHeight};
+      outline: none;
+      font-family: ${bodyFont};
+      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('filled', searchFilledStyles(context, definition)), forcedColorsStylesheetBehavior(css `
+        ${inputForcedColorStyles(context, definition, '.root')}
+      `));

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

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,145 @@
+{
+    "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/tabs/tab-panel/tab-panel.styles.js

@@ -1,13 +1,13 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { bodyFont, density, designUnit, typeRampMinus1FontSize, typeRampMinus1LineHeight } from '../../design-tokens';
+import { bodyFont, density, designUnit, typeRampBaseFontSize, typeRampBaseLineHeight } from '../../design-tokens';
 export const tabPanelStyles = (context, definition) => css `
   ${display('block')} :host {
     box-sizing: border-box;
     font-family: ${bodyFont};
-    font-size: ${typeRampMinus1FontSize};
+    font-size: ${typeRampBaseFontSize};
     font-weight: 400;
-    line-height: ${typeRampMinus1LineHeight};
+    line-height: ${typeRampBaseLineHeight};
     padding: 0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);
   }
 `;

package/dist/fluent-web-components.api.json

@@ -2227,12 +2227,12 @@
             },
             {
               "kind": "Content",
-              "text": ", typeof import(\"@microsoft/fast-foundation\")."
+              "text": ", typeof import(\"./listbox/index\")."
             },
             {
               "kind": "Reference",
               "text": "Listbox",
-              "canonicalReference": "@microsoft/fast-foundation!Listbox:class"
+              "canonicalReference": "@fluentui/web-components!Listbox:class"
             },
             {
               "kind": "Content",
@@ -2641,7 +2641,61 @@
             },
             {
               "kind": "Content",
-              "text": ">;\n    fluentSelect: (overrideDefinition?: import(\"@microsoft/fast-foundation\")."
+              "text": ">;\n    fluentSearch: (overrideDefinition?: import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "OverrideFoundationElementDefinition",
+              "canonicalReference": "@microsoft/fast-foundation!OverrideFoundationElementDefinition:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "SearchOptions",
+              "canonicalReference": "@microsoft/fast-foundation!SearchOptions:type"
+            },
+            {
+              "kind": "Content",
+              "text": "> | undefined) => import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "FoundationElementRegistry",
+              "canonicalReference": "@microsoft/fast-foundation!FoundationElementRegistry:class"
+            },
+            {
+              "kind": "Content",
+              "text": "<import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "SearchOptions",
+              "canonicalReference": "@microsoft/fast-foundation!SearchOptions:type"
+            },
+            {
+              "kind": "Content",
+              "text": ", import(\"@microsoft/fast-element\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "Constructable",
+              "canonicalReference": "@microsoft/fast-element!Constructable:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "FoundationElement",
+              "canonicalReference": "@microsoft/fast-foundation!FoundationElement:class"
+            },
+            {
+              "kind": "Content",
+              "text": ">>;\n    fluentSelect: (overrideDefinition?: import(\"@microsoft/fast-foundation\")."
             },
             {
               "kind": "Reference",
@@ -3323,7 +3377,7 @@
           "name": "allComponents",
           "variableTypeTokenRange": {
             "startIndex": 1,
-            "endIndex": 470
+            "endIndex": 482
           }
         },
         {
@@ -8515,7 +8569,7 @@
             {
               "kind": "Reference",
               "text": "Listbox",
-              "canonicalReference": "@microsoft/fast-foundation!Listbox:class"
+              "canonicalReference": "@fluentui/web-components!Listbox:class"
             },
             {
               "kind": "Content",
@@ -9102,6 +9156,81 @@
             "endIndex": 12
           }
         },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@fluentui/web-components!fluentSearch:var",
+          "docComment": "/**\n * The Fluent Search Custom Element. Implements {@link @microsoft/fast-foundation#Search}, {@link @microsoft/fast-foundation#searchTemplate}\n *\n * @remarks\n *\n * HTML Element: \\<fluent-search\\>\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "fluentSearch: "
+            },
+            {
+              "kind": "Content",
+              "text": "(overrideDefinition?: import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "OverrideFoundationElementDefinition",
+              "canonicalReference": "@microsoft/fast-foundation!OverrideFoundationElementDefinition:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "SearchOptions",
+              "canonicalReference": "@microsoft/fast-foundation!SearchOptions:type"
+            },
+            {
+              "kind": "Content",
+              "text": "> | undefined) => import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "FoundationElementRegistry",
+              "canonicalReference": "@microsoft/fast-foundation!FoundationElementRegistry:class"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "SearchOptions",
+              "canonicalReference": "@microsoft/fast-foundation!SearchOptions:type"
+            },
+            {
+              "kind": "Content",
+              "text": ", import(\"@microsoft/fast-element\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "Constructable",
+              "canonicalReference": "@microsoft/fast-element!Constructable:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<import(\"@microsoft/fast-foundation\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "FoundationElement",
+              "canonicalReference": "@microsoft/fast-foundation!FoundationElement:class"
+            },
+            {
+              "kind": "Content",
+              "text": ">>"
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "fluentSearch",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 14
+          }
+        },
         {
           "kind": "Variable",
           "canonicalReference": "@fluentui/web-components!fluentSelect:var",
@@ -10954,6 +11083,34 @@
             "endIndex": 4
           }
         },
+        {
+          "kind": "Class",
+          "canonicalReference": "@fluentui/web-components!Listbox:class",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare class Listbox extends "
+            },
+            {
+              "kind": "Reference",
+              "text": "FoundationListboxElement",
+              "canonicalReference": "@microsoft/fast-foundation!Listbox:class"
+            },
+            {
+              "kind": "Content",
+              "text": " "
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "Listbox",
+          "members": [],
+          "extendsTokenRange": {
+            "startIndex": 1,
+            "endIndex": 3
+          },
+          "implementsTokenRanges": []
+        },
         {
           "kind": "Variable",
           "canonicalReference": "@fluentui/web-components!listboxStyles:var",
@@ -17615,6 +17772,114 @@
           ],
           "extendsTokenRanges": []
         },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@fluentui/web-components!SearchAppearance:type",
+          "docComment": "/**\n * Search appearances\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare type SearchAppearance = "
+            },
+            {
+              "kind": "Content",
+              "text": "'filled' | 'outline'"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "SearchAppearance",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          }
+        },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@fluentui/web-components!searchStyles:var",
+          "docComment": "/**\n * Styles for Search\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "searchStyles: "
+            },
+            {
+              "kind": "Content",
+              "text": "(context: any, definition: any) => import(\"@microsoft/fast-element\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "ElementStyles",
+              "canonicalReference": "@microsoft/fast-element!ElementStyles:class"
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "searchStyles",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 3
+          }
+        },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@fluentui/web-components!searchTemplate:var",
+          "docComment": "/**\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "searchTemplate: "
+            },
+            {
+              "kind": "Content",
+              "text": "(context: "
+            },
+            {
+              "kind": "Reference",
+              "text": "ElementDefinitionContext",
+              "canonicalReference": "@microsoft/fast-foundation!ElementDefinitionContext:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ", definition: "
+            },
+            {
+              "kind": "Reference",
+              "text": "SearchOptions",
+              "canonicalReference": "@microsoft/fast-foundation!SearchOptions:type"
+            },
+            {
+              "kind": "Content",
+              "text": ") => "
+            },
+            {
+              "kind": "Reference",
+              "text": "ViewTemplate",
+              "canonicalReference": "@microsoft/fast-element!ViewTemplate:class"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "Search",
+              "canonicalReference": "@microsoft/fast-foundation!Search:class"
+            },
+            {
+              "kind": "Content",
+              "text": ">"
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "searchTemplate",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 10
+          }
+        },
         {
           "kind": "TypeAlias",
           "canonicalReference": "@fluentui/web-components!SelectAppearance:type",