@fluentui/web-components 3.0.0-alpha.9 → 3.0.0-beta.10

package/dist/esm/text-input/text-input.styles.js

@@ -0,0 +1,200 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation/utilities.js';
+import { borderRadiusMedium, colorCompoundBrandStroke, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground3, colorNeutralBackgroundInverted, colorNeutralForeground1, colorNeutralForeground3, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorTransparentBackground, colorTransparentStroke, colorTransparentStrokeInteractive, curveAccelerateMid, curveDecelerateMid, durationNormal, durationUltraFast, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontWeightRegular, lineHeightBase200, lineHeightBase300, lineHeightBase400, shadow2, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, spacingVerticalXS, strokeWidthThin, } from '../theme/design-tokens.js';
+/** TextInput styles
+ * @public
+ */
+export const styles = css `
+  ${display('block')}
+
+  :host {
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase300};
+    font-weight: ${fontWeightRegular};
+    line-height: ${lineHeightBase300};
+    max-width: 400px;
+  }
+  .label {
+    display: flex;
+    color: ${colorNeutralForeground1};
+    padding-bottom: ${spacingVerticalXS};
+    flex-shrink: 0;
+    padding-inline-end: ${spacingHorizontalXS};
+  }
+  .label__hidden {
+    display: none;
+  }
+  .root {
+    position: relative;
+    box-sizing: border-box;
+    height: 32px;
+    display: inline-flex;
+    align-items: center;
+    flex-direction: row;
+    width: 100%;
+    padding: 0 ${spacingHorizontalMNudge};
+    border: ${strokeWidthThin} solid ${colorNeutralStroke1};
+    border-bottom-color: ${colorNeutralStrokeAccessible};
+    border-radius: ${borderRadiusMedium};
+    gap: ${spacingHorizontalXXS};
+  }
+  .root::after {
+    box-sizing: border-box;
+    content: '';
+    position: absolute;
+    left: -1px;
+    bottom: 0px;
+    right: -1px;
+    height: max(2px, ${borderRadiusMedium});
+    border-radius: 0 0 ${borderRadiusMedium} ${borderRadiusMedium};
+    border-bottom: 2px solid ${colorCompoundBrandStroke};
+    clip-path: inset(calc(100% - 2px) 1px 0px);
+    transform: scaleX(0);
+    transition-property: transform;
+    transition-duration: ${durationUltraFast};
+    transition-delay: ${curveAccelerateMid};
+  }
+  .control {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    color: ${colorNeutralForeground1};
+    border-radius: ${borderRadiusMedium};
+    background: ${colorTransparentBackground};
+    font-family: ${fontFamilyBase};
+    font-weight: ${fontWeightRegular};
+    font-size: ${fontSizeBase300};
+    border: none;
+    background: transparent;
+    vertical-align: center;
+  }
+  .control:focus-visible {
+    outline: 0;
+    border: 0;
+  }
+  .control::placeholder {
+    color: ${colorNeutralForeground4};
+  }
+  :host ::slotted([slot='start']),
+  :host ::slotted([slot='end']) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${colorNeutralForeground3};
+    font-size: ${fontSizeBase500};
+  }
+  :host ::slotted([slot='start']) {
+    padding-right: ${spacingHorizontalXXS};
+  }
+  :host ::slotted([slot='end']) {
+    padding-left: ${spacingHorizontalXXS};
+    gap: ${spacingHorizontalXS};
+  }
+  :host(:hover) .root {
+    border-color: ${colorNeutralStroke1Hover};
+    border-bottom-color: ${colorNeutralStrokeAccessibleHover};
+  }
+  :host(:active) .root {
+    border-color: ${colorNeutralStroke1Pressed};
+  }
+  :host(:focus-within) .root {
+    outline: transparent solid 2px;
+    border-bottom: 0;
+  }
+  :host(:focus-within) .root::after {
+    transform: scaleX(1);
+    transition-property: transform;
+    transition-duration: ${durationNormal};
+    transition-delay: ${curveDecelerateMid};
+  }
+  :host(:focus-within:active) .root:after {
+    border-bottom-color: ${colorCompoundBrandStrokePressed};
+  }
+  :host([appearance='outline']:focus-within) .root {
+    border: ${strokeWidthThin} solid ${colorNeutralStroke1};
+  }
+  :host(:focus-within) .control {
+    color: ${colorNeutralForeground1};
+  }
+  :host([disabled]) .root {
+    background: ${colorTransparentBackground};
+    border: ${strokeWidthThin} solid ${colorNeutralStrokeDisabled};
+  }
+  :host([disabled]) .control::placeholder,
+  :host([disabled]) ::slotted([slot='start']),
+  :host([disabled]) ::slotted([slot='end']) {
+    color: ${colorNeutralForegroundDisabled};
+  }
+  ::selection {
+    color: ${colorNeutralForegroundInverted};
+    background-color: ${colorNeutralBackgroundInverted};
+  }
+  :host([control-size='small']) .control {
+    font-size: ${fontSizeBase200};
+    font-weight: ${fontWeightRegular};
+    line-height: ${lineHeightBase200};
+  }
+  :host([control-size='small']) .root {
+    height: 24px;
+    gap: ${spacingHorizontalXXS};
+    padding: 0 ${spacingHorizontalSNudge};
+  }
+  :host([control-size='small']) ::slotted([slot='start']),
+  :host([control-size='small']) ::slotted([slot='end']) {
+    font-size: ${fontSizeBase400};
+  }
+  :host([control-size='large']) .control {
+    font-size: ${fontSizeBase400};
+    font-weight: ${fontWeightRegular};
+    line-height: ${lineHeightBase400};
+  }
+  :host([control-size='large']) .root {
+    height: 40px;
+    gap: ${spacingHorizontalS};
+    padding: 0 ${spacingHorizontalM};
+  }
+  :host([control-size='large']) ::slotted([slot='start']),
+  :host([control-size='large']) ::slotted([slot='end']) {
+    font-size: ${fontSizeBase600};
+  }
+  :host([appearance='underline']) .root {
+    background: ${colorTransparentBackground};
+    border: 0;
+    border-radius: 0;
+    border-bottom: ${strokeWidthThin} solid ${colorNeutralStrokeAccessible};
+  }
+  :host([appearance='underline']:hover) .root {
+    border-bottom-color: ${colorNeutralStrokeAccessibleHover};
+  }
+  :host([appearance='underline']:active) .root {
+    border-bottom-color: ${colorNeutralStrokeAccessiblePressed};
+  }
+  :host([appearance='underline']:focus-within) .root {
+    border: 0;
+    border-bottom-color: ${colorNeutralStrokeAccessiblePressed};
+  }
+  :host([appearance='underline'][disabled]) .root {
+    border-bottom-color: ${colorNeutralStrokeDisabled};
+  }
+  :host([appearance='filled-lighter']) .root,
+  :host([appearance='filled-darker']) .root {
+    border: ${strokeWidthThin} solid ${colorTransparentStroke};
+    box-shadow: ${shadow2};
+  }
+  :host([appearance='filled-lighter']) .root {
+    background: ${colorNeutralBackground1};
+  }
+  :host([appearance='filled-darker']) .root {
+    background: ${colorNeutralBackground3};
+  }
+  :host([appearance='filled-lighter']:hover) .root,
+  :host([appearance='filled-darker']:hover) .root {
+    border-color: ${colorTransparentStrokeInteractive};
+  }
+  :host([appearance='filled-lighter']:active) .root,
+  :host([appearance='filled-darker']:active) .root {
+    border-color: ${colorTransparentStrokeInteractive};
+    background: ${colorNeutralBackground3};
+  }
+`;
+//# sourceMappingURL=text-input.styles.js.map

package/dist/esm/text-input/text-input.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.styles.js","sourceRoot":"","sources":["../../../src/text-input/text-input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;mBAGD,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;aAKvB,uBAAuB;sBACd,iBAAiB;;0BAEb,mBAAmB;;;;;;;;;;;;;iBAa5B,uBAAuB;cAC1B,eAAe,UAAU,mBAAmB;2BAC/B,4BAA4B;qBAClC,kBAAkB;WAC5B,oBAAoB;;;;;;;;;uBASR,kBAAkB;yBAChB,kBAAkB,IAAI,kBAAkB;+BAClC,wBAAwB;;;;2BAI5B,iBAAiB;wBACpB,kBAAkB;;;;;;aAM7B,uBAAuB;qBACf,kBAAkB;kBACrB,0BAA0B;mBACzB,cAAc;mBACd,iBAAiB;iBACnB,eAAe;;;;;;;;;;aAUnB,uBAAuB;;;;;;;aAOvB,uBAAuB;iBACnB,eAAe;;;qBAGX,oBAAoB;;;oBAGrB,oBAAoB;WAC7B,mBAAmB;;;oBAGV,wBAAwB;2BACjB,iCAAiC;;;oBAGxC,0BAA0B;;;;;;;;;2BASnB,cAAc;wBACjB,kBAAkB;;;2BAGf,+BAA+B;;;cAG5C,eAAe,UAAU,mBAAmB;;;aAG7C,uBAAuB;;;kBAGlB,0BAA0B;cAC9B,eAAe,UAAU,0BAA0B;;;;;aAKpD,8BAA8B;;;aAG9B,8BAA8B;wBACnB,8BAA8B;;;iBAGrC,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;WAIzB,oBAAoB;iBACd,uBAAuB;;;;iBAIvB,eAAe;;;iBAGf,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;WAIzB,kBAAkB;iBACZ,kBAAkB;;;;iBAIlB,eAAe;;;kBAGd,0BAA0B;;;qBAGvB,eAAe,UAAU,4BAA4B;;;2BAG/C,iCAAiC;;;2BAGjC,mCAAmC;;;;2BAInC,mCAAmC;;;2BAGnC,0BAA0B;;;;cAIvC,eAAe,UAAU,sBAAsB;kBAC3C,OAAO;;;kBAGP,uBAAuB;;;kBAGvB,uBAAuB;;;;oBAIrB,iCAAiC;;;;oBAIjC,iCAAiC;kBACnC,uBAAuB;;CAExC,CAAC"}

package/dist/esm/text-input/text-input.template.js

@@ -0,0 +1,69 @@
+import { html, ref, slotted } from '@microsoft/fast-element';
+import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
+import { whitespaceFilter } from '../utils/index.js';
+export function textFieldTemplate(options = {}) {
+    return html `
+    <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">
+      ${startSlotTemplate(options)}
+      <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}"
+        name="${x => x.name}"
+        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="${x => x.type}"
+        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')}
+      />
+      ${endSlotTemplate(options)}
+    </div>
+  `;
+}
+/**
+ * @internal
+ */
+export const template = textFieldTemplate();
+//# sourceMappingURL=text-input.template.js.map

package/dist/esm/text-input/text-input.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.template.js","sourceRoot":"","sources":["../../../src/text-input/text-input.template.ts"],"names":[],"mappings":"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"}