@fluentui/web-components 3.0.0-rc.26 → 3.0.0-rc.28

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

@@ -1,258 +1,262 @@
-
-  :host([hidden]){display:none}:host{display:inline-block}
-
+: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 {
-    /* 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);
+    --border-color: FieldText;
+    --border-block-end-color: FieldText;
+    --focus-indicator-color: Highlight;
+    --placeholder-color: FieldText;
   }
 
+  :host(:hover),
+  :host(:active),
   :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);
+    --border-color: Highlight;
+    --border-block-end-color: Highlight;
   }
 
   :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;
-    }
+    --color: GrayText;
+    --border-color: GrayText;
+    --border-block-end-color: GrayText;
+    --placeholder-color: GrayText;
   }
+}

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

@@ -1,29 +1,30 @@
 <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>
+  <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>