@fluentui/web-components 3.0.0-rc.20 → 3.0.0-rc.22

package/dist/esm/textarea/textarea.definition-async.js

@@ -0,0 +1,17 @@
+import { tagName } from './textarea.options.js';
+/**
+ * The async definition configuration for the fluent-textarea element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const definition = {
+    name: tagName,
+    templateOptions: 'defer-and-hydrate',
+    shadowOptions: {
+        delegatesFocus: true,
+    },
+};
+//# sourceMappingURL=textarea.definition-async.js.map

package/dist/esm/textarea/textarea.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.definition-async.js","sourceRoot":"","sources":["../../../src/textarea/textarea.definition-async.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,eAAe,EAAE,mBAAmB;IACpC,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC"}

package/dist/esm/textarea/textarea.styles.css

@@ -0,0 +1,258 @@
+
+  :host([hidden]){display:none}:host{display:inline-block}
+
+  :host {
+    /* typography */
+    --font-size: var(--fontSizeBase300);
+    --line-height: var(--lineHeightBase300);
+
+    /* layout */
+    --padding-inline: var(--spacingHorizontalMNudge);
+    --padding-block: var(--spacingVerticalSNudge);
+    --min-block-size: 52px;
+    --block-size: var(--min-block-size);
+    --inline-size: 18rem;
+    --border-width: var(--strokeWidthThin);
+    --control-padding-inline: var(--spacingHorizontalXXS);
+
+    /* colors */
+    --color: var(--colorNeutralForeground1);
+    --background-color: var(--colorNeutralBackground1);
+    --border-color: var(--colorNeutralStroke1);
+    --border-block-end-color: var(--colorNeutralStrokeAccessible);
+    --placeholder-color: var(--colorNeutralForeground4);
+    --focus-indicator-color: var(--colorCompoundBrandStroke);
+
+    /* elevations */
+    --box-shadow: none;
+
+    /* others */
+    --contain-size: size;
+    --resize: none;
+
+    color: var(--color);
+    font-family: var(--fontFamilyBase);
+    font-size: var(--font-size);
+    font-weight: var(--fontWeightRegular);
+    line-height: var(--line-height);
+    position: relative;
+  }
+
+  :host(:hover) {
+    --border-color: var(--colorNeutralStroke1Hover);
+    --border-block-end-color: var(--colorNeutralStrokeAccessibleHover);
+  }
+
+  :host(:active) {
+    --border-color: var(--colorNeutralStroke1Pressed);
+    --border-block-end-color: var(--colorNeutralStrokeAccessiblePressed);
+  }
+
+  :host(:focus-within) {
+    outline: none;
+  }
+
+  :host([block]:not([hidden])) {
+    display: block;
+  }
+
+  :host([size='small']) {
+    --font-size: var(--fontSizeBase200);
+    --line-height: var(--lineHeightBase200);
+    --min-block-size: 40px;
+    --padding-block: var(--spacingVerticalXS);
+    --padding-inline: var(--spacingHorizontalSNudge);
+    --control-padding-inline: var(--spacingHorizontalXXS);
+  }
+
+  :host([size='large']) {
+    --font-size: var(--fontSizeBase400);
+    --line-height: var(--lineHeightBase400);
+    --min-block-size: 64px;
+    --padding-block: var(--spacingVerticalS);
+    --padding-inline: var(--spacingHorizontalM);
+    --control-padding-inline: var(--spacingHorizontalSNudge);
+  }
+
+  :host([resize='both']:not(:disabled)) {
+    --resize: both;
+  }
+
+  :host([resize='horizontal']:not(:disabled)) {
+    --resize: horizontal;
+  }
+
+  :host([resize='vertical']:not(:disabled)) {
+    --resize: vertical;
+  }
+
+  :host([auto-resize]) {
+    --block-size: auto;
+    --contain-size: inline-size;
+  }
+
+  :host([appearance='filled-darker']) {
+    --background-color: var(--colorNeutralBackground3);
+    --border-color: var(--background-color);
+    --border-block-end-color: var(--border-color);
+  }
+
+  :host([appearance='filled-lighter']) {
+    --border-color: var(--background-color);
+    --border-block-end-color: var(--border-color);
+  }
+
+  :host([appearance='filled-darker'][display-shadow]),
+  :host([appearance='filled-lighter'][display-shadow]) {
+    --box-shadow: var(--shadow2);
+  }
+
+  :host(:state(user-invalid)) {
+    --border-color: var(--colorPaletteRedBorder2);
+    --border-block-end-color: var(--colorPaletteRedBorder2);
+  }
+
+  :host(:disabled) {
+    --color: var(--colorNeutralForegroundDisabled);
+    --background-color: var(--colorTransparentBackground);
+    --border-color: var(--colorNeutralStrokeDisabled);
+    --border-block-end-color: var(--border-color);
+    --box-shadow: none;
+    --placeholder-color: var(--colorNeutralForegroundDisabled);
+
+    cursor: no-drop;
+    user-select: none;
+  }
+
+  .root {
+    background-color: var(--background-color);
+    border: var(--border-width) solid var(--border-color);
+    border-block-end-color: var(--border-block-end-color);
+    border-radius: var(--borderRadiusMedium);
+    box-sizing: border-box;
+    box-shadow: var(--box-shadow);
+    contain: paint layout style var(--contain-size);
+    display: grid;
+    grid-template: 1fr / 1fr;
+    inline-size: var(--inline-size);
+    min-block-size: var(--min-block-size);
+    block-size: var(--block-size);
+    overflow: hidden;
+    padding: var(--padding-block) var(--padding-inline);
+    position: relative;
+    resize: var(--resize);
+  }
+
+  :host([block]) .root {
+    inline-size: auto;
+  }
+
+  .root::after {
+    border-bottom: 2px solid var(--focus-indicator-color);
+    border-radius: 0 0 var(--borderRadiusMedium) var(--borderRadiusMedium);
+    box-sizing: border-box;
+    clip-path: inset(calc(100% - 2px) 1px 0px);
+    content: '';
+    height: max(2px, var(--borderRadiusMedium));
+    inset: auto -1px 0;
+    position: absolute;
+    transform: scaleX(0);
+    transition-delay: var(--curveAccelerateMid);
+    transition-duration: var(--durationUltraFast);
+    transition-property: transform;
+  }
+
+  :host(:focus-within) .root::after {
+    transform: scaleX(1);
+    transition-property: transform;
+    transition-duration: var(--durationNormal);
+    transition-delay: var(--curveDecelerateMid);
+  }
+
+  :host([readonly]) .root::after,
+  :host(:disabled) .root::after {
+    content: none;
+  }
+
+  label {
+    color: var(--color);
+    display: flex;
+    inline-size: fit-content;
+    padding-block-end: var(--spacingVerticalXS);
+    padding-inline-end: var(--spacingHorizontalXS);
+  }
+
+  :host(:empty) label,
+  label[hidden] {
+    display: none;
+  }
+
+  .auto-sizer,
+  .control {
+    box-sizing: border-box;
+    font: inherit;
+    grid-column: 1 / -1;
+    grid-row: 1 / -1;
+    letter-space: inherit;
+    padding: 0 var(--control-padding-inline);
+  }
+
+  .auto-sizer {
+    display: none;
+    padding-block-end: 2px; /* avoid scroll bar in Firefox */
+    pointer-events: none;
+    visibility: hidden;
+    white-space: pre-wrap;
+  }
+
+  :host([auto-resize]) .auto-sizer {
+    display: block;
+  }
+
+  .control {
+    appearance: none;
+    background-color: transparent;
+    border: 0;
+    color: inherit;
+    field-sizing: content;
+    max-block-size: 100%;
+    outline: 0;
+    resize: none;
+    text-align: inherit;
+  }
+
+  .control:disabled {
+    cursor: inherit;
+  }
+
+  .control::placeholder {
+    color: var(--placeholder-color);
+  }
+
+  ::selection {
+    color: var(--colorNeutralForegroundInverted);
+    background-color: var(--colorNeutralBackgroundInverted);
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --border-color: FieldText;
+      --border-block-end-color: FieldText;
+      --focus-indicator-color: Highlight;
+      --placeholder-color: FieldText;
+    }
+
+    :host(:hover),
+    :host(:active),
+    :host(:focus-within) {
+      --border-color: Highlight;
+      --border-block-end-color: Highlight;
+    }
+
+    :host(:disabled) {
+      --color: GrayText;
+      --border-color: GrayText;
+      --border-block-end-color: GrayText;
+      --placeholder-color: GrayText;
+    }
+  }

package/dist/esm/textarea/textarea.template.html

@@ -0,0 +1,29 @@
+<f-template name="fluent-textarea" shadowrootmode="open" shadowrootdelegatesfocus>
+<template>{{styles}}
+      <label f-ref="{labelEl}" for="control" part="label">
+        <slot name="label" f-slotted="{labelSlottedNodes}"></slot>
+      </label>
+      <div class="root" part="root" f-ref="{rootEl}">
+        <textarea
+          f-ref="{controlEl}"
+          id="control"
+          class="control"
+          part="control"
+          ?required="{{required}}"
+          ?disabled="{{disabled}}"
+          ?readonly="{{readOnly}}"
+          ?spellcheck="{{spellcheck}}"
+          autocomplete="{{autocomplete}}"
+          maxlength="{{maxLength}}"
+          minlength="{{minLength}}"
+          placeholder="{{placeholder}}"
+          @change="{handleControlChange()}"
+          @select="{handleControlSelect()}"
+          @input="{handleControlInput()}"
+        ></textarea>
+      </div>
+      <div hidden>
+        <slot f-slotted="{defaultSlottedNodes}"></slot>
+      </div>
+    </template>
+</f-template>

package/dist/esm/toggle-button/define-async.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/toggle-button/define-async.js

@@ -0,0 +1,5 @@
+import { RenderableFASTElement } from '@microsoft/fast-html';
+import { definition } from './toggle-button.definition-async.js';
+import { ToggleButton } from './toggle-button.js';
+RenderableFASTElement(ToggleButton).defineAsync(definition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/toggle-button/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/toggle-button/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,qBAAqB,CAAC,YAAY,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/toggle-button/toggle-button.definition-async.d.ts

@@ -0,0 +1,10 @@
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+/**
+ * The async definition configuration for the fluent-toggle-button element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/toggle-button/toggle-button.definition-async.js

@@ -0,0 +1,14 @@
+import { tagName } from './toggle-button.options.js';
+/**
+ * The async definition configuration for the fluent-toggle-button element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const definition = {
+    name: tagName,
+    templateOptions: 'defer-and-hydrate',
+};
+//# sourceMappingURL=toggle-button.definition-async.js.map

package/dist/esm/toggle-button/toggle-button.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.definition-async.js","sourceRoot":"","sources":["../../../src/toggle-button/toggle-button.definition-async.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,eAAe,EAAE,mBAAmB;CACrC,CAAC"}

package/dist/esm/toggle-button/toggle-button.js

@@ -46,9 +46,8 @@ export class ToggleButton extends Button {
      * @internal
      */
     setPressedState() {
-        if (this.$fastController.isConnected) {
-            const ariaPressed = `${this.mixed ? 'mixed' : !!this.pressed}`;
-            this.elementInternals.ariaPressed = ariaPressed;
+        if (this.elementInternals) {
+            this.elementInternals.ariaPressed = `${this.mixed ? 'mixed' : !!this.pressed}`;
             toggleState(this.elementInternals, 'pressed', !!this.pressed || !!this.mixed);
         }
     }

package/dist/esm/toggle-button/toggle-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../../../src/toggle-button/toggle-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,OAAO,YAAa,SAAQ,MAAM;IAWtC;;;;OAIG;IACO,cAAc;QACtB,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAYD;;;;;;OAMG;IACO,YAAY;QACpB,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED;;;;OAIG;IACO,KAAK;QACb,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC/B,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED;;;;OAIG;IACK,eAAe;QACrB,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC;YACrC,MAAM,WAAW,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAC/D,IAAI,CAAC,gBAAgB,CAAC,WAAW,GAAG,WAAW,CAAC;YAChD,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChF,CAAC;IACH,CAAC;CACF;AA1DQ;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CACD;AAmBlB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CACH"}
+{"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../../../src/toggle-button/toggle-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,OAAO,YAAa,SAAQ,MAAM;IAWtC;;;;OAIG;IACO,cAAc;QACtB,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAYD;;;;;;OAMG;IACO,YAAY;QACpB,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED;;;;OAIG;IACO,KAAK;QACb,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC/B,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED;;;;OAIG;IACK,eAAe;QACrB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,IAAI,CAAC,gBAAgB,CAAC,WAAW,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAC/E,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChF,CAAC;IACH,CAAC;CACF;AAzDQ;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CACD;AAmBlB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CACH"}