fluentui-webcomponents 0.0.1

package/components/textarea/fluent-textarea.css

@@ -0,0 +1,227 @@
+@import url('../../tokens.css');
+
+:host { display: block; }
+
+.root {
+  --font-size: var(--fontSizeBase300);
+  --line-height: var(--lineHeightBase300);
+  --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);
+  --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);
+  --box-shadow: none;
+  --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);
+  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);
+  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);
+}
+
+.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;
+}
+
+.root:hover {
+  --border-color: var(--colorNeutralStroke1Hover);
+  --border-block-end-color: var(--colorNeutralStrokeAccessibleHover);
+}
+
+.root:active {
+  --border-color: var(--colorNeutralStroke1Pressed);
+  --border-block-end-color: var(--colorNeutralStrokeAccessiblePressed);
+}
+
+.root:focus-within {
+  outline: none;
+}
+
+:host([block]:not([hidden])) .root {
+  display: block;
+}
+
+:host([size='small']) .root {
+  --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']) .root {
+  --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)) .root {
+  --resize: both;
+}
+
+:host([resize='horizontal']:not(:disabled)) .root {
+  --resize: horizontal;
+}
+
+:host([resize='vertical']:not(:disabled)) .root {
+  --resize: vertical;
+}
+
+:host([auto-resize]) .root {
+  --block-size: auto;
+  --contain-size: inline-size;
+}
+
+:host([appearance='filled-darker']) .root {
+  --background-color: var(--colorNeutralBackground3);
+  --border-color: var(--background-color);
+  --border-block-end-color: var(--border-color);
+}
+
+:host([appearance='filled-lighter']) .root {
+  --border-color: var(--background-color);
+  --border-block-end-color: var(--border-color);
+}
+
+:host([appearance='filled-darker'][display-shadow]) .root,
+:host([appearance='filled-lighter'][display-shadow]) .root {
+  --box-shadow: var(--shadow2);
+}
+
+.root.user-invalid {
+  --border-color: var(--colorPaletteRedBorder2);
+  --border-block-end-color: var(--colorPaletteRedBorder2);
+}
+
+.root: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;
+}
+
+:host([block]) .root {
+  inline-size: auto;
+}
+
+.root:focus-within::after {
+  transform: scaleX(1);
+  transition-property: transform;
+  transition-duration: var(--durationNormal);
+  transition-delay: var(--curveDecelerateMid);
+}
+
+:host([readonly]) .root::after,
+.root:disabled::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;
+}
+
+.control {
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  color: inherit;
+  field-sizing: content;
+  max-block-size: 100%;
+  outline: 0;
+  resize: none;
+  text-align: inherit;
+  box-sizing: border-box;
+  font: inherit;
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
+  padding: 0 var(--control-padding-inline);
+}
+
+.control:disabled {
+  cursor: inherit;
+}
+
+.control::placeholder {
+  color: var(--placeholder-color);
+}
+
+::selection {
+  color: var(--colorNeutralForegroundInverted);
+  background-color: var(--colorNeutralBackgroundInverted);
+}
+
+@media (forced-colors: active) {
+  .root {
+    --border-color: FieldText;
+    --border-block-end-color: FieldText;
+    --focus-indicator-color: Highlight;
+    --placeholder-color: FieldText;
+  }
+
+  .root:hover,
+  .root:active,
+  .root:focus-within {
+    --border-color: Highlight;
+    --border-block-end-color: Highlight;
+  }
+
+  .root:disabled {
+    --color: GrayText;
+    --border-color: GrayText;
+    --border-block-end-color: GrayText;
+    --placeholder-color: GrayText;
+  }
+}

package/components/textarea/fluent-textarea.js

@@ -0,0 +1,400 @@
+import { FluentElement } from '../../core/fluent-element.js';
+
+const stylesUrl = new URL('./fluent-textarea.css', import.meta.url).href;
+
+class FluentTextArea extends FluentElement {
+  static stylesUrl = stylesUrl;
+  static formAssociated = true;
+
+  static template = `
+    <label for="control" part="label">
+      <slot name="label"></slot>
+    </label>
+    <div class="root" part="root">
+      <textarea
+        id="control"
+        class="control"
+        part="control"
+      ></textarea>
+    </div>
+    <div hidden>
+      <slot></slot>
+    </div>
+  `;
+
+  static get observedAttributes() {
+    return [
+      'disabled', 'readonly', 'placeholder', 'value',
+      'appearance', 'size', 'resize', 'rows', 'cols',
+      'maxlength', 'minlength', 'name', 'required',
+      'autocomplete', 'spellcheck', 'block', 'auto-resize',
+      'display-shadow', 'form', 'dirname'
+    ];
+  }
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this._userInteracted = false;
+    this._preConnectEl = document.createElement('textarea');
+    this._autoSizerEl = null;
+    this._autoSizerObserver = null;
+    this._boundHandleInput = this._handleControlInput.bind(this);
+    this._boundHandleChange = this._handleControlChange.bind(this);
+    this._boundHandleSelect = this._handleControlSelect.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._shadowRoot = this._root;
+
+    requestAnimationFrame(() => {
+      if (!this.isConnected) return;
+
+      const textarea = this._shadowRoot.querySelector('.control');
+      if (!textarea) return;
+      this._textarea = textarea;
+
+      const content = this._getContent();
+      this._defaultValue = content || this._preConnectEl.defaultValue || '';
+      this._textarea.defaultValue = this._defaultValue;
+      this._textarea.value = this._preConnectEl.value || this._defaultValue;
+
+      this._syncAllAttrs();
+      this._setFormValue(this._textarea.value);
+      this._setValidity();
+      this._preConnectEl = null;
+
+      this._textarea.addEventListener('input', this._boundHandleInput);
+      this._textarea.addEventListener('change', this._boundHandleChange);
+      this._textarea.addEventListener('select', this._boundHandleSelect);
+
+      new MutationObserver(() => this._setValidity()).observe(this._textarea, {
+        attributes: true,
+        attributeFilter: ['disabled', 'required', 'readonly', 'maxlength', 'minlength']
+      });
+
+      this._updateLabelVisibility();
+      this._updateResize();
+      this._maybeCreateAutoSizer();
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._autoSizerObserver?.disconnect();
+    this._autoSizerObserver = null;
+  }
+
+  changed(name, oldVal, newVal) {
+    if (!this._textarea) return;
+    switch (name) {
+      case 'disabled':
+        this._textarea.disabled = newVal !== null;
+        this._internals.ariaDisabled = newVal !== null ? 'true' : 'false';
+        if (this._labelSlottedNodes) {
+          this._labelSlottedNodes.forEach(n => n.disabled = newVal !== null);
+        }
+        break;
+      case 'readonly':
+        this._textarea.readOnly = newVal !== null;
+        this._internals.ariaReadOnly = newVal !== null ? 'true' : 'false';
+        this._setValidity();
+        break;
+      case 'placeholder':
+        this._textarea.placeholder = newVal || '';
+        break;
+      case 'value':
+        if (!this._userInteracted) {
+          this._textarea.value = newVal || '';
+        }
+        break;
+      case 'resize':
+        this._updateResize();
+        break;
+      case 'required':
+        this._textarea.required = newVal !== null;
+        this._internals.ariaRequired = newVal !== null ? 'true' : 'false';
+        if (this._filteredLabelSlottedNodes) {
+          this._filteredLabelSlottedNodes.forEach(n => n.required = newVal !== null);
+        }
+        break;
+      case 'maxlength':
+        this._textarea.maxLength = newVal ? parseInt(newVal) : -1;
+        break;
+      case 'minlength':
+        this._textarea.minLength = newVal ? parseInt(newVal) : -1;
+        break;
+      case 'name':
+        this._textarea.name = newVal || '';
+        break;
+      case 'autocomplete':
+        this._textarea.autocomplete = newVal || '';
+        break;
+      case 'spellcheck':
+        this._textarea.spellcheck = newVal !== null;
+        break;
+      case 'rows':
+        this._textarea.rows = newVal ? parseInt(newVal) : 2;
+        break;
+      case 'cols':
+        this._textarea.cols = newVal ? parseInt(newVal) : 20;
+        break;
+      case 'appearance':
+      case 'size':
+      case 'block':
+        break;
+      case 'auto-resize':
+        this._maybeCreateAutoSizer();
+        break;
+      case 'display-shadow':
+      case 'dirname':
+        break;
+    }
+  }
+
+  get value() {
+    return this._textarea ? this._textarea.value : (this._preConnectEl ? this._preConnectEl.value : '');
+  }
+
+  set value(val) {
+    if (this._textarea) {
+      this._textarea.value = val;
+      this._setFormValue(val);
+      this._setValidity();
+    } else if (this._preConnectEl) {
+      this._preConnectEl.value = val;
+    }
+  }
+
+  get defaultValue() {
+    return this._textarea ? this._textarea.defaultValue : (this._preConnectEl ? this._preConnectEl.defaultValue : '');
+  }
+
+  set defaultValue(val) {
+    if (this._textarea) {
+      this._textarea.defaultValue = val;
+      if (!this._userInteracted) this._textarea.value = val;
+    } else if (this._preConnectEl) {
+      this._preConnectEl.defaultValue = val;
+    }
+  }
+
+  get disabled() {
+    return this.hasAttribute('disabled');
+  }
+
+  get form() {
+    return this._internals.form;
+  }
+
+  get labels() {
+    return this._internals.labels;
+  }
+
+  get validity() {
+    return this._internals.validity;
+  }
+
+  get validationMessage() {
+    return this._internals.validationMessage || (this._textarea ? this._textarea.validationMessage : '');
+  }
+
+  get willValidate() {
+    return this._internals.willValidate;
+  }
+
+  get textLength() {
+    return this._textarea ? this._textarea.textLength : 0;
+  }
+
+  get type() {
+    return 'textarea';
+  }
+
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+
+  reportValidity() {
+    return this._internals.reportValidity();
+  }
+
+  setCustomValidity(message) {
+    this._internals.setValidity({ customError: !!message }, message || undefined);
+    this.reportValidity();
+  }
+
+  select() {
+    if (this._textarea) this._textarea.select();
+  }
+
+  _syncAllAttrs() {
+    const ta = this._textarea;
+    if (!ta) return;
+    ta.disabled = this.hasAttribute('disabled');
+    ta.readOnly = this.hasAttribute('readonly');
+    ta.placeholder = this.getAttribute('placeholder') || '';
+    ta.required = this.hasAttribute('required');
+    ta.autocomplete = this.getAttribute('autocomplete') || '';
+    ta.spellcheck = this.hasAttribute('spellcheck');
+    ta.name = this.getAttribute('name') || '';
+    const ml = this.getAttribute('maxlength');
+    if (ml) ta.maxLength = parseInt(ml);
+    const minl = this.getAttribute('minlength');
+    if (minl) ta.minLength = parseInt(minl);
+    const r = this.getAttribute('rows');
+    if (r) ta.rows = parseInt(r);
+    const c = this.getAttribute('cols');
+    if (c) ta.cols = parseInt(c);
+    this._internals.ariaDisabled = this.hasAttribute('disabled') ? 'true' : 'false';
+    this._internals.ariaReadOnly = this.hasAttribute('readonly') ? 'true' : 'false';
+    this._internals.ariaRequired = this.hasAttribute('required') ? 'true' : 'false';
+  }
+
+  _handleControlInput() {
+    this._userInteracted = true;
+    if (this._autoSizerEl && this._textarea) {
+      this._autoSizerEl.textContent = this._textarea.value + ' ';
+    }
+    this._setFormValue(this._textarea.value);
+    this._setValidity();
+  }
+
+  _handleControlChange() {
+    this._toggleUserValidityState();
+    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+  }
+
+  _handleControlSelect() {
+    this.dispatchEvent(new Event('select', { bubbles: true, composed: true }));
+  }
+
+  _getContent() {
+    const slot = this._root.querySelector('slot:not([name])');
+    if (!slot) return '';
+    return slot.assignedNodes().map(node => {
+      if (node.nodeType === Node.ELEMENT_NODE) return node.outerHTML;
+      if (node.nodeType === Node.TEXT_NODE) return node.textContent.trim();
+      return '';
+    }).join('');
+  }
+
+  _setFormValue(value) {
+    this._internals.setFormValue(value, value);
+  }
+
+  _setValidity() {
+    if (!this.isConnected) return;
+    if (this.disabled || this.hasAttribute('readonly')) {
+      this._internals.setValidity({});
+    } else if (this._textarea) {
+      const { valid, valueMissing, typeMismatch, patternMismatch, tooLong, tooShort } = this._textarea.validity;
+      if (!valid) {
+        const msg = this._textarea.validationMessage || 'Invalid value';
+        this._internals.setValidity(
+          { valueMissing, typeMismatch, patternMismatch, tooLong, tooShort },
+          msg,
+          this._textarea
+        );
+      } else {
+        this._internals.setValidity({});
+      }
+    }
+    if (this._userInteracted) {
+      this._toggleUserValidityState();
+    }
+  }
+
+  _toggleUserValidityState() {
+    const valid = this._internals.validity.valid;
+    if (!valid) {
+      this.classList.add('user-invalid');
+      this.classList.remove('user-valid');
+    } else {
+      this.classList.add('user-valid');
+      this.classList.remove('user-invalid');
+    }
+  }
+
+  _updateLabelVisibility() {
+    const label = this._shadowRoot.querySelector('label');
+    if (!label) return;
+    const labelSlot = this._root.querySelector('slot[name="label"]');
+    if (!labelSlot) return;
+    const nodes = labelSlot.assignedNodes();
+    const hasContent = nodes.some(n =>
+      n.nodeType === Node.ELEMENT_NODE ||
+      (n.nodeType === Node.TEXT_NODE && n.textContent.trim())
+    );
+    label.hidden = !hasContent;
+  }
+
+  _updateResize() {
+    const ta = this._textarea;
+    if (!ta) return;
+    const resize = this.getAttribute('resize');
+    ta.style.resize = resize || 'none';
+  }
+
+  _maybeCreateAutoSizer() {
+    if (CSS.supports('field-sizing: content')) {
+      if (this._autoSizerEl) {
+        this._autoSizerEl.remove();
+        this._autoSizerEl = null;
+      }
+      return;
+    }
+
+    const autoResize = this.hasAttribute('auto-resize');
+    if (!autoResize) {
+      if (this._autoSizerEl) {
+        this._autoSizerEl.remove();
+        this._autoSizerEl = null;
+      }
+      this._autoSizerObserver?.disconnect();
+      return;
+    }
+
+    if (!this._autoSizerEl) {
+      this._autoSizerEl = document.createElement('div');
+      this._autoSizerEl.classList.add('auto-sizer');
+      this._autoSizerEl.setAttribute('aria-hidden', 'true');
+    }
+
+    const root = this._shadowRoot?.querySelector('.root');
+    if (root) {
+      root.insertBefore(this._autoSizerEl, root.firstChild);
+    }
+
+    if (this._textarea) {
+      this._autoSizerEl.textContent = this._textarea.value + ' ';
+    }
+
+    if (!this._autoSizerObserver) {
+      this._autoSizerObserver = new ResizeObserver(() => {
+        if (this._autoSizerEl && this._textarea) {
+          this._autoSizerEl.textContent = this._textarea.value + ' ';
+        }
+      });
+    }
+    this._autoSizerObserver.observe(this._textarea);
+  }
+
+  formResetCallback() {
+    if (this._textarea) {
+      this._textarea.value = this.defaultValue;
+      this._userInteracted = false;
+    }
+  }
+
+  formDisabledCallback(disabled) {
+    if (this._textarea) {
+      this._textarea.disabled = disabled;
+    }
+    this._internals.ariaDisabled = disabled ? 'true' : 'false';
+    this._setValidity();
+  }
+}
+
+customElements.define('fluent-textarea', FluentTextArea);

package/components/tooltip/fluent-tooltip.css

@@ -0,0 +1,65 @@
+@import url('../../tokens.css');
+
+:host(:not(:popover-open)) {
+  display: none;
+}
+
+:host {
+  inset-area: block-start;
+  position-try-options: flip-block;
+  inset: unset;
+  margin: 0;
+  width: max-content;
+}
+
+.root {
+  background: var(--colorNeutralBackground1);
+  border-radius: var(--borderRadiusMedium);
+  border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
+  box-sizing: border-box;
+  color: var(--colorNeutralForeground1);
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+  max-width: 240px;
+  padding: 4px var(--spacingHorizontalMNudge) 6px;
+  box-shadow: var(--shadow4);
+}
+
+:host([positioning='above-start'])   { inset-area: block-start span-inline-end; }
+:host([positioning='above'])         { inset-area: block-start; }
+:host([positioning='above-end'])     { inset-area: block-start span-inline-start; }
+:host([positioning='below-start'])   { inset-area: block-end span-inline-end; }
+:host([positioning='below'])         { inset-area: block-end; }
+:host([positioning='below-end'])     { inset-area: block-end span-inline-start; }
+:host([positioning='before-top'])    { inset-area: inline-start span-block-end; }
+:host([positioning='before'])        { inset-area: inline-start; }
+:host([positioning='before-bottom']) { inset-area: inline-start span-block-start; }
+:host([positioning='after-top'])     { inset-area: inline-end span-block-end; }
+:host([positioning='after'])         { inset-area: inline-end; }
+:host([positioning='after-bottom'])  { inset-area: inline-end span-block-start; }
+
+@supports not (inset-area: block-start) {
+  :host {
+    position-area: block-start;
+    position-try-options: flip-block;
+  }
+  :host([positioning='above-start'])   { position-area: block-start span-inline-end; }
+  :host([positioning='above'])         { position-area: block-start; }
+  :host([positioning='above-end'])     { position-area: block-start span-inline-start; }
+  :host([positioning='below-start'])   { position-area: block-end span-inline-end; }
+  :host([positioning='below'])         { position-area: block-end; }
+  :host([positioning='below-end'])     { position-area: block-end span-inline-start; }
+  :host([positioning='before-top'])    { position-area: inline-start span-block-end; }
+  :host([positioning='before'])        { position-area: inline-start; }
+  :host([positioning='before-bottom']) { position-area: inline-start span-block-start; }
+  :host([positioning='after-top'])     { position-area: inline-end span-block-end; }
+  :host([positioning='after'])         { position-area: inline-end; }
+  :host([positioning='after-bottom'])  { position-area: inline-end span-block-start; }
+}
+
+@media (forced-colors: active) {
+  .root {
+    border-color: ButtonText;
+  }
+}