@fluentui/web-components 3.0.0-beta.7 → 3.0.0-beta.70

package/dist/esm/textarea/textarea.styles.js

@@ -0,0 +1,268 @@
+import { css } from '@microsoft/fast-element';
+import { borderRadiusMedium, colorCompoundBrandStroke, colorNeutralBackground1, colorNeutralBackground3, colorNeutralBackgroundInverted, colorNeutralForeground1, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorPaletteRedBorder2, colorTransparentBackground, curveAccelerateMid, curveDecelerateMid, durationNormal, durationUltraFast, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, lineHeightBase200, lineHeightBase300, lineHeightBase400, shadow2, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, spacingVerticalS, spacingVerticalSNudge, spacingVerticalXS, strokeWidthThin, } from '../theme/design-tokens.js';
+import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-stylesheet-behavior.js';
+import { display } from '../utils/display.js';
+import { autoResizeState, blockState, displayShadowState, filledDarkerState, filledLighterState, largeState, resizeBothState, resizeHorizontalState, resizeVerticalState, smallState, userInvalidState, } from '../styles/states/index.js';
+/**
+ * Styles for the TextArea component.
+ *
+ * @public
+ */
+export const styles = css `
+  ${display('inline-block')}
+
+  :host {
+    /* typography */
+    --font-size: ${fontSizeBase300};
+    --line-height: ${lineHeightBase300};
+
+    /* layout */
+    --padding-inline: ${spacingHorizontalMNudge};
+    --padding-block: ${spacingVerticalSNudge};
+    --min-block-size: 52px;
+    --block-size: var(--min-block-size);
+    --inline-size: 18rem;
+    --border-width: ${strokeWidthThin};
+    --control-padding-inline: ${spacingHorizontalXXS};
+
+    /* colors */
+    --color: ${colorNeutralForeground1};
+    --background-color: ${colorNeutralBackground1};
+    --border-color: ${colorNeutralStroke1};
+    --border-block-end-color: ${colorNeutralStrokeAccessible};
+    --placeholder-color: ${colorNeutralForeground4};
+    --focus-indicator-color: ${colorCompoundBrandStroke};
+
+    /* elevations */
+    --box-shadow: none;
+
+    /* others */
+    --contain-size: size;
+    --resize: none;
+
+    color: var(--color);
+    font-family: ${fontFamilyBase};
+    font-size: var(--font-size);
+    font-weight: ${fontWeightRegular};
+    line-height: var(--line-height);
+    position: relative;
+  }
+
+  :host(:hover) {
+    --border-color: ${colorNeutralStroke1Hover};
+    --border-block-end-color: ${colorNeutralStrokeAccessibleHover};
+  }
+
+  :host(:active) {
+    --border-color: ${colorNeutralStroke1Pressed};
+    --border-block-end-color: ${colorNeutralStrokeAccessiblePressed};
+  }
+
+  :host(:focus-within) {
+    outline: none;
+  }
+
+  :host(${blockState}:not([hidden])) {
+    display: block;
+  }
+
+  :host(${smallState}) {
+    --font-size: ${fontSizeBase200};
+    --line-height: ${lineHeightBase200};
+    --min-block-size: 40px;
+    --padding-block: ${spacingVerticalXS};
+    --padding-inline: ${spacingHorizontalSNudge};
+    --control-padding-inline: ${spacingHorizontalXXS};
+  }
+
+  :host(${largeState}) {
+    --font-size: ${fontSizeBase400};
+    --line-height: ${lineHeightBase400};
+    --min-block-size: 64px;
+    --padding-block: ${spacingVerticalS};
+    --padding-inline: ${spacingHorizontalM};
+    --control-padding-inline: ${spacingHorizontalSNudge};
+  }
+
+  :host(${resizeBothState}:not(:disabled)) {
+    --resize: both;
+  }
+
+  :host(${resizeHorizontalState}:not(:disabled)) {
+    --resize: horizontal;
+  }
+
+  :host(${resizeVerticalState}:not(:disabled)) {
+    --resize: vertical;
+  }
+
+  :host(${autoResizeState}) {
+    --block-size: auto;
+    --contain-size: inline-size;
+  }
+
+  :host(${filledDarkerState}) {
+    --background-color: ${colorNeutralBackground3};
+    --border-color: var(--background-color);
+    --border-block-end-color: var(--border-color);
+  }
+
+  :host(${filledLighterState}) {
+    --border-color: var(--background-color);
+    --border-block-end-color: var(--border-color);
+  }
+
+  :host(${filledDarkerState}${displayShadowState}),
+  :host(${filledLighterState}${displayShadowState}) {
+    --box-shadow: ${shadow2};
+  }
+
+  :host(${userInvalidState}) {
+    --border-color: ${colorPaletteRedBorder2};
+    --border-block-end-color: ${colorPaletteRedBorder2};
+  }
+
+  :host(:disabled) {
+    --color: ${colorNeutralForegroundDisabled};
+    --background-color: ${colorTransparentBackground};
+    --border-color: ${colorNeutralStrokeDisabled};
+    --border-block-end-color: var(--border-color);
+    --box-shadow: none;
+    --placeholder-color: ${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: ${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(${blockState}) .root {
+    inline-size: auto;
+  }
+
+  .root::after {
+    border-bottom: 2px solid var(--focus-indicator-color);
+    border-radius: 0 0 ${borderRadiusMedium} ${borderRadiusMedium};
+    box-sizing: border-box;
+    clip-path: inset(calc(100% - 2px) 1px 0px);
+    content: '';
+    height: max(2px, ${borderRadiusMedium});
+    inset: auto -1px 0;
+    position: absolute;
+    transform: scaleX(0);
+    transition-delay: ${curveAccelerateMid};
+    transition-duration: ${durationUltraFast};
+    transition-property: transform;
+  }
+
+  :host(:focus-within) .root::after {
+    transform: scaleX(1);
+    transition-property: transform;
+    transition-duration: ${durationNormal};
+    transition-delay: ${curveDecelerateMid};
+  }
+
+  :host([readonly]) .root::after,
+  :host(:disabled) .root::after {
+    content: none;
+  }
+
+  label {
+    color: var(--color);
+    display: flex;
+    inline-size: fit-content;
+    padding-block-end: ${spacingVerticalXS};
+    padding-inline-end: ${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(${autoResizeState}) .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: ${colorNeutralForegroundInverted};
+    background-color: ${colorNeutralBackgroundInverted};
+  }
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
+    :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;
+    }
+  `));
+//# sourceMappingURL=textarea.styles.js.map

package/dist/esm/textarea/textarea.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.styles.js","sourceRoot":"","sources":["../../../src/textarea/textarea.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,sBAAsB,EACtB,0BAA0B,EAC1B,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,8BAA8B,EAAE,MAAM,uDAAuD,CAAC;AACvG,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,eAAe,EACf,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,UAAU,EACV,eAAe,EACf,qBAAqB,EACrB,mBAAmB,EACnB,UAAU,EACV,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;IACpC,OAAO,CAAC,cAAc,CAAC;;;;mBAIR,eAAe;qBACb,iBAAiB;;;wBAGd,uBAAuB;uBACxB,qBAAqB;;;;sBAItB,eAAe;gCACL,oBAAoB;;;eAGrC,uBAAuB;0BACZ,uBAAuB;sBAC3B,mBAAmB;gCACT,4BAA4B;2BACjC,uBAAuB;+BACnB,wBAAwB;;;;;;;;;;mBAUpC,cAAc;;mBAEd,iBAAiB;;;;;;sBAMd,wBAAwB;gCACd,iCAAiC;;;;sBAI3C,0BAA0B;gCAChB,mCAAmC;;;;;;;UAOzD,UAAU;;;;UAIV,UAAU;mBACD,eAAe;qBACb,iBAAiB;;uBAEf,iBAAiB;wBAChB,uBAAuB;gCACf,oBAAoB;;;UAG1C,UAAU;mBACD,eAAe;qBACb,iBAAiB;;uBAEf,gBAAgB;wBACf,kBAAkB;gCACV,uBAAuB;;;UAG7C,eAAe;;;;UAIf,qBAAqB;;;;UAIrB,mBAAmB;;;;UAInB,eAAe;;;;;UAKf,iBAAiB;0BACD,uBAAuB;;;;;UAKvC,kBAAkB;;;;;UAKlB,iBAAiB,GAAG,kBAAkB;UACtC,kBAAkB,GAAG,kBAAkB;oBAC7B,OAAO;;;UAGjB,gBAAgB;sBACJ,sBAAsB;gCACZ,sBAAsB;;;;eAIvC,8BAA8B;0BACnB,0BAA0B;sBAC9B,0BAA0B;;;2BAGrB,8BAA8B;;;;;;;;;;qBAUpC,kBAAkB;;;;;;;;;;;;;;;UAe7B,UAAU;;;;;;yBAMK,kBAAkB,IAAI,kBAAkB;;;;uBAI1C,kBAAkB;;;;wBAIjB,kBAAkB;2BACf,iBAAiB;;;;;;;2BAOjB,cAAc;wBACjB,kBAAkB;;;;;;;;;;;;yBAYjB,iBAAiB;0BAChB,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;UA0BnC,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;aAyBZ,8BAA8B;wBACnB,8BAA8B;;CAErD,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;GAqBjC,CAAC,CACH,CAAC"}

package/dist/esm/textarea/textarea.template.js

@@ -0,0 +1,54 @@
+import { html, ref, slotted } from '@microsoft/fast-element';
+import { whitespaceFilter } from '../utils/index.js';
+/**
+ * Generates a template for the TextArea component.
+ *
+ * @public
+ */
+export function textAreaTemplate() {
+    return html `
+    <template>
+      <label ${ref('labelEl')} for="control" part="label">
+        <slot
+          name="label"
+          ${slotted({
+        property: 'labelSlottedNodes',
+        filter: whitespaceFilter,
+    })}
+        ></slot>
+      </label>
+      <div class="root" part="root">
+        <textarea
+          ${ref('controlEl')}
+          id="control"
+          class="control"
+          part="control"
+          ?required="${x => x.required}"
+          ?disabled="${x => x.disabled}"
+          ?readonly="${x => x.readOnly}"
+          ?spellcheck="${x => x.spellcheck}"
+          autocomplete="${x => x.autocomplete}"
+          maxlength="${x => x.maxLength}"
+          minlength="${x => x.minLength}"
+          placeholder="${x => x.placeholder}"
+          @change="${x => x.handleControlChange()}"
+          @select="${x => x.handleControlSelect()}"
+          @input="${x => x.handleControlInput()}"
+        ></textarea>
+      </div>
+      <div hidden>
+        <slot
+          ${slotted({
+        property: 'defaultSlottedNodes',
+        filter: whitespaceFilter,
+    })}
+        ></slot>
+      </div>
+    </template>
+  `;
+}
+/**
+ * @internal
+ */
+export const template = textAreaTemplate();
+//# sourceMappingURL=textarea.template.js.map

package/dist/esm/textarea/textarea.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.template.js","sourceRoot":"","sources":["../../../src/textarea/textarea.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGrD;;;;GAIG;AACH,MAAM,UAAU,gBAAgB;IAC9B,OAAO,IAAI,CAAG;;eAED,GAAG,CAAC,SAAS,CAAC;;;YAGjB,OAAO,CAAC;QACR,QAAQ,EAAE,mBAAmB;QAC7B,MAAM,EAAE,gBAAgB;KACzB,CAAC;;;;;YAKA,GAAG,CAAC,WAAW,CAAC;;;;uBAIL,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;0BAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;uBACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;uBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;yBACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;qBACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;qBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;oBAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE;;;;;YAKnC,OAAO,CAAC;QACR,QAAQ,EAAE,qBAAqB;QAC/B,MAAM,EAAE,gBAAgB;KACzB,CAAC;;;;GAIT,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAkC,gBAAgB,EAAE,CAAC"}