fluentui-webcomponents 0.0.1

package/components/text-input/fluent-text-input.css

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

package/components/text-input/fluent-text-input.js

@@ -0,0 +1,298 @@
+import { FluentElement } from '../../core/fluent-element.js';
+
+const stylesUrl = new URL('./fluent-text-input.css', import.meta.url).href;
+
+class FluentTextInput extends FluentElement {
+  static stylesUrl = stylesUrl;
+  static formAssociated = true;
+
+  static template = `
+    <label part="label" for="control" class="label">
+      <slot></slot>
+    </label>
+    <div class="root" part="root">
+      <slot name="start"></slot>
+      <input
+        class="control"
+        part="control"
+        id="control"
+      />
+      <slot name="end"></slot>
+    </div>
+  `;
+
+  static get observedAttributes() {
+    return [
+      'disabled', 'readonly', 'placeholder', 'type', 'value',
+      'appearance', 'control-size', 'autofocus', 'list', 'maxlength',
+      'name', 'minlength', 'required', 'autocomplete', 'spellcheck',
+      'pattern', 'multiple', 'size', 'dirname', 'form'
+    ];
+  }
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this._dirtyValue = false;
+    this._boundInputHandler = this._inputHandler.bind(this);
+    this._boundChangeHandler = this._changeHandler.bind(this);
+    this._boundFocusinHandler = this._focusinHandler.bind(this);
+    this._boundKeydownHandler = this._keydownHandler.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._shadowRoot = this._root;
+
+    const t = this.getAttribute('tabindex');
+    this.tabIndex = Number(t ?? 0) < 0 ? -1 : 0;
+
+    const input = this._shadowRoot.querySelector('.control');
+    if (input) {
+      this._input = input;
+      this._syncAllAttrs();
+      this._setFormValue(this.value);
+      this._setValidity();
+
+      input.addEventListener('input', this._boundInputHandler);
+      input.addEventListener('change', this._boundChangeHandler);
+      input.addEventListener('select', () => this.dispatchEvent(new Event('select')));
+    }
+
+    this.addEventListener('focusin', this._boundFocusinHandler);
+    this.addEventListener('keydown', this._boundKeydownHandler);
+    this._updateLabelVisibility();
+  }
+
+  changed(name, oldVal, newVal) {
+    const input = this._input;
+    if (!input) return;
+
+    switch (name) {
+      case 'value':
+        if (!this._dirtyValue) {
+          input.value = newVal || '';
+        }
+        break;
+      case 'disabled':
+        input.disabled = newVal !== null;
+        break;
+      case 'readonly':
+        input.readOnly = newVal !== null;
+        this._internals.ariaReadOnly = newVal !== null ? 'true' : 'false';
+        break;
+      case 'placeholder':
+        input.placeholder = newVal || '';
+        break;
+      case 'type':
+        input.type = newVal || 'text';
+        break;
+      case 'autofocus':
+        if (newVal !== null) input.autofocus = true;
+        break;
+      case 'list':
+        input.setAttribute('list', newVal || '');
+        break;
+      case 'maxlength':
+        input.maxLength = newVal ? parseInt(newVal) : -1;
+        break;
+      case 'minlength':
+        input.minLength = newVal ? parseInt(newVal) : -1;
+        break;
+      case 'name':
+        input.name = newVal || '';
+        break;
+      case 'required':
+        input.required = newVal !== null;
+        this._internals.ariaRequired = newVal !== null ? 'true' : 'false';
+        this._setValidity();
+        break;
+      case 'autocomplete':
+        input.autocomplete = newVal || '';
+        break;
+      case 'spellcheck':
+        input.spellcheck = newVal !== null;
+        break;
+      case 'pattern':
+        input.pattern = newVal || '';
+        break;
+      case 'multiple':
+        input.multiple = newVal !== null;
+        break;
+      case 'size':
+        input.size = newVal ? parseInt(newVal) : 20;
+        break;
+      case 'dirname':
+        input.setAttribute('dirname', newVal || '');
+        break;
+      case 'appearance':
+      case 'control-size':
+        break;
+    }
+  }
+
+  get value() {
+    return this._input ? this._input.value : (this.getAttribute('value') || '');
+  }
+
+  set value(val) {
+    if (this._input) {
+      this._input.value = val;
+      this._setFormValue(val);
+      this._setValidity();
+    }
+  }
+
+  get disabled() {
+    return this.hasAttribute('disabled');
+  }
+
+  get form() {
+    return this._internals.form;
+  }
+
+  get validity() {
+    return this._internals.validity;
+  }
+
+  get validationMessage() {
+    return this._internals.validationMessage || (this._input ? this._input.validationMessage : '');
+  }
+
+  get willValidate() {
+    return this._internals.willValidate;
+  }
+
+  get labels() {
+    return Object.freeze(Array.from(this._internals.labels));
+  }
+
+  get type() {
+    return this._input ? this._input.type : (this.getAttribute('type') || 'text');
+  }
+
+  get textLength() {
+    return this._input ? this._input.textLength : 0;
+  }
+
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+
+  reportValidity() {
+    return this._internals.reportValidity();
+  }
+
+  setCustomValidity(message) {
+    this._internals.setValidity({ customError: !!message }, message);
+    this.reportValidity();
+  }
+
+  select() {
+    if (this._input) {
+      this._input.select();
+      this.dispatchEvent(new Event('select'));
+    }
+  }
+
+  _syncAllAttrs() {
+    const input = this._input;
+    if (!input) return;
+    input.disabled = this.hasAttribute('disabled');
+    input.readOnly = this.hasAttribute('readonly');
+    input.placeholder = this.getAttribute('placeholder') || '';
+    input.type = this.getAttribute('type') || 'text';
+    input.name = this.getAttribute('name') || '';
+    input.required = this.hasAttribute('required');
+    input.autocomplete = this.getAttribute('autocomplete') || '';
+    input.spellcheck = this.hasAttribute('spellcheck');
+    input.multiple = this.hasAttribute('multiple');
+    input.pattern = this.getAttribute('pattern') || '';
+    input.value = this.getAttribute('value') || '';
+    const ml = this.getAttribute('maxlength');
+    if (ml) input.maxLength = parseInt(ml);
+    const minl = this.getAttribute('minlength');
+    if (minl) input.minLength = parseInt(minl);
+    const sz = this.getAttribute('size');
+    if (sz) input.size = parseInt(sz);
+    const list = this.getAttribute('list');
+    if (list) input.setAttribute('list', list);
+    const dirname = this.getAttribute('dirname');
+    if (dirname) input.setAttribute('dirname', dirname);
+    if (this.hasAttribute('autofocus')) input.autofocus = true;
+    this._internals.ariaReadOnly = this.hasAttribute('readonly') ? 'true' : 'false';
+    this._internals.ariaRequired = this.hasAttribute('required') ? 'true' : 'false';
+  }
+
+  _inputHandler() {
+    this._dirtyValue = true;
+    this._setFormValue(this._input.value);
+    this._setValidity();
+  }
+
+  _changeHandler(e) {
+    this._setValidity();
+    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+  }
+
+  _focusinHandler(e) {
+    if (e.target === this && this._input) {
+      this._input.focus();
+    }
+  }
+
+  _keydownHandler(e) {
+    if (e.key === 'Enter' && this._internals.form) {
+      const form = this._internals.form;
+      if (form.elements.length === 1) {
+        form.requestSubmit();
+      }
+    }
+  }
+
+  _setFormValue(value) {
+    this._internals.setFormValue(value, value);
+  }
+
+  _setValidity() {
+    if (!this.isConnected || !this._input) return;
+    if (this.disabled) {
+      this._internals.setValidity({});
+      return;
+    }
+    const { valid, valueMissing, typeMismatch, patternMismatch, tooLong, tooShort, rangeUnderflow, rangeOverflow, stepMismatch, badInput } = this._input.validity;
+    const hasError = !valid;
+    if (!hasError) {
+      this._internals.setValidity({});
+      return;
+    }
+    const msg = this._input.validationMessage || 'Invalid value';
+    this._internals.setValidity(
+      { valueMissing, typeMismatch, patternMismatch, tooLong, tooShort, rangeUnderflow, rangeOverflow, stepMismatch, badInput },
+      msg,
+      this._input
+    );
+  }
+
+  _updateLabelVisibility() {
+    const label = this._shadowRoot.querySelector('.label');
+    if (!label) return;
+    const slot = this._root.querySelector('slot:not([name])');
+    if (!slot) return;
+    const nodes = slot.assignedNodes();
+    const hasContent = nodes.some(n =>
+      n.nodeType === Node.ELEMENT_NODE ||
+      (n.nodeType === Node.TEXT_NODE && n.textContent.trim())
+    );
+    label.hidden = !hasContent;
+  }
+
+  formResetCallback() {
+    this._dirtyValue = false;
+    if (this._input) {
+      this._input.value = this.getAttribute('value') || '';
+    }
+  }
+}
+
+customElements.define('fluent-text-input', FluentTextInput);