fluentui-webcomponents 0.0.1

package/components/select/fluent-select.js

@@ -0,0 +1,245 @@
+import { FluentElement } from '../../core/fluent-element.js';
+
+const stylesUrl = new URL('./fluent-select.css', import.meta.url).href;
+
+class FluentSelect 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">
+      <select id="control" class="control" part="control"></select>
+      <span class="icon" part="icon">
+        <slot name="icon">
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true">
+            <path d="M2.15 4.65a.5.5 0 0 1 .7-.7L6 7.09l3.15-3.14a.5.5 0 1 1 .7.7l-3.5 3.5a.5.5 0 0 1-.7 0l-3.5-3.5Z"></path>
+          </svg>
+        </slot>
+      </span>
+    </div>
+    <div hidden>
+      <slot></slot>
+    </div>
+  `;
+
+  static get observedAttributes() {
+    return [
+      'disabled', 'required', 'name', 'value',
+      'appearance', 'control-size', 'autofocus', 'autocomplete',
+      'aria-label', 'aria-labelledby', 'aria-describedby'
+    ];
+  }
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this._userInteracted = false;
+    this._boundHandleInput = this._handleInput.bind(this);
+    this._boundHandleChange = this._handleChange.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._shadowRoot = this._root;
+
+    requestAnimationFrame(() => {
+      if (!this.isConnected) return;
+
+      const selectEl = this._shadowRoot.querySelector('.control');
+      if (!selectEl) return;
+      this._selectEl = selectEl;
+
+      this._moveOptionsToNativeSelect();
+      this._syncAllAttrs();
+
+      const initialVal = this.getAttribute('value') || '';
+      if (initialVal) {
+        this._selectEl.value = initialVal;
+      }
+
+      this._setFormValue(this._selectEl.value);
+      this._setValidity();
+
+      this._selectEl.addEventListener('input', this._boundHandleInput);
+      this._selectEl.addEventListener('change', this._boundHandleChange);
+
+      this._updateLabelVisibility();
+    });
+  }
+
+  changed(name, oldVal, newVal) {
+    if (!this._selectEl) return;
+    switch (name) {
+      case 'disabled':
+        this._selectEl.disabled = newVal !== null;
+        this._internals.ariaDisabled = newVal !== null ? 'true' : 'false';
+        break;
+      case 'required':
+        this._selectEl.required = newVal !== null;
+        this._internals.ariaRequired = newVal !== null ? 'true' : 'false';
+        this._setValidity();
+        break;
+      case 'name':
+        this._selectEl.name = newVal || '';
+        break;
+      case 'value':
+        if (!this._userInteracted && newVal !== null) {
+          this._selectEl.value = newVal;
+        }
+        break;
+      case 'autocomplete':
+        this._selectEl.autocomplete = newVal || 'off';
+        break;
+      case 'autofocus':
+        if (newVal !== null) {
+          this._selectEl.focus();
+        }
+        break;
+      case 'aria-label':
+      case 'aria-labelledby':
+      case 'aria-describedby':
+      case 'appearance':
+      case 'control-size':
+        break;
+    }
+  }
+
+  get value() {
+    return this._selectEl ? this._selectEl.value : (this.getAttribute('value') || '');
+  }
+
+  set value(val) {
+    if (this._selectEl) {
+      this._selectEl.value = val;
+      this._setFormValue(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._selectEl ? this._selectEl.validationMessage : '');
+  }
+
+  get willValidate() {
+    return this._internals.willValidate;
+  }
+
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+
+  reportValidity() {
+    return this._internals.reportValidity();
+  }
+
+  setCustomValidity(message) {
+    this._internals.setValidity({ customError: !!message }, message || undefined);
+    this.reportValidity();
+  }
+
+  _moveOptionsToNativeSelect() {
+    const defaultSlot = this._root.querySelector('slot:not([name])');
+    if (!defaultSlot) return;
+
+    const nodes = defaultSlot.assignedNodes();
+    nodes.forEach(node => {
+      if (node.tagName === 'OPTION' || node.tagName === 'OPTGROUP') {
+        this._selectEl.appendChild(node.cloneNode(true));
+      }
+    });
+  }
+
+  _syncAllAttrs() {
+    const sel = this._selectEl;
+    if (!sel) return;
+    sel.disabled = this.hasAttribute('disabled');
+    sel.required = this.hasAttribute('required');
+    sel.name = this.getAttribute('name') || '';
+    sel.autocomplete = this.getAttribute('autocomplete') || 'off';
+    if (this.hasAttribute('autofocus')) sel.autofocus = true;
+    this._internals.ariaDisabled = this.hasAttribute('disabled') ? 'true' : 'false';
+    this._internals.ariaRequired = this.hasAttribute('required') ? 'true' : 'false';
+  }
+
+  _handleInput(e) {
+    this._userInteracted = true;
+    this._setFormValue(this._selectEl.value);
+    this._setValidity();
+    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+  }
+
+  _handleChange(e) {
+    this._setValidity();
+    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+  }
+
+  _setFormValue(value) {
+    this._internals.setFormValue(value, value);
+  }
+
+  _setValidity() {
+    if (!this.isConnected) return;
+    if (this.disabled) {
+      this._internals.setValidity({});
+      return;
+    }
+    if (this._selectEl) {
+      const { valid, valueMissing } = this._selectEl.validity;
+      if (!valid) {
+        const msg = this._selectEl.validationMessage || 'Invalid value';
+        this._internals.setValidity({ valueMissing }, msg, this._selectEl);
+      } else {
+        this._internals.setValidity({});
+      }
+    }
+  }
+
+  _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;
+  }
+
+  formResetCallback() {
+    if (this._selectEl) {
+      this._selectEl.value = this.getAttribute('value') || '';
+      this._userInteracted = false;
+      this._setValidity();
+    }
+  }
+
+  formDisabledCallback(disabled) {
+    if (this._selectEl) {
+      this._selectEl.disabled = disabled;
+    }
+    this._internals.ariaDisabled = disabled ? 'true' : 'false';
+    this._setValidity();
+  }
+}
+
+customElements.define('fluent-select', FluentSelect);

package/components/slider/fluent-slider.css

@@ -0,0 +1,199 @@
+@import url('../../tokens.css');
+
+:host { display: inline-grid; }
+
+:host([hidden]) .root {
+  display: none;
+}
+
+.root {
+  --thumb-size: 20px;
+  --track-margin-inline: calc(var(--thumb-size) / 2);
+  --track-size: 4px;
+  --track-overhang: calc(var(--track-size) / -2);
+  --rail-color: var(--colorCompoundBrandBackground);
+  --track-color: var(--colorNeutralStrokeAccessible);
+  --slider-direction: 90deg;
+  --border-radius: var(--borderRadiusMedium);
+  --step-marker-inset: var(--track-overhang) -1px;
+  --slider-thumb: 50%;
+  --slider-progress: 50%;
+  --step-rate: 0%;
+
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  outline: none;
+  user-select: none;
+  touch-action: none;
+  min-width: 120px;
+  min-height: 32px;
+  display: inline-grid;
+  grid-template-rows: 1fr var(--thumb-size) 1fr;
+  grid-template-columns: var(--track-margin-inline) 1fr var(--track-margin-inline);
+}
+
+.root:hover {
+  --rail-color: var(--colorCompoundBrandBackgroundHover);
+}
+
+.root:active {
+  --rail-color: var(--colorCompoundBrandBackgroundPressed);
+}
+
+:host([disabled]) .root {
+  --rail-color: var(--colorNeutralForegroundDisabled);
+  --track-color: var(--colorNeutralBackgroundDisabled);
+}
+
+:host(:not([disabled])) .root {
+  cursor: pointer;
+}
+
+:host(:dir(rtl)) .root {
+  --slider-direction: -90deg;
+}
+
+:host([size='small']) .root {
+  --thumb-size: 16px;
+  --track-overhang: -1px;
+  --track-size: 2px;
+  --border-radius: var(--borderRadiusSmall);
+}
+
+:host([orientation='vertical']) .root {
+  --slider-direction: 0deg;
+  --step-marker-inset: -1px var(--track-overhang);
+  min-height: 120px;
+  grid-template-rows: var(--track-margin-inline) 1fr var(--track-margin-inline);
+  grid-template-columns: 1fr var(--thumb-size) 1fr;
+  width: unset;
+  min-width: 32px;
+  justify-items: center;
+}
+
+:host(:not([slot='input'])) .root:focus-visible {
+  box-shadow: 0 0 0 2pt var(--colorStrokeFocus2);
+  outline: 1px solid var(--colorStrokeFocus1);
+}
+
+.root::after,
+.track {
+  height: var(--track-size);
+  width: 100%;
+}
+
+.root::after {
+  background-image: linear-gradient(
+    var(--slider-direction),
+    var(--rail-color) 0%,
+    var(--rail-color) 50%,
+    var(--track-color) 50.1%,
+    var(--track-color) 100%
+  );
+  border-radius: var(--border-radius);
+  content: '';
+  grid-row: 1 / -1;
+  grid-column: 1 / -1;
+}
+
+.track {
+  position: relative;
+  background-color: var(--track-color);
+  grid-row: 2 / 2;
+  grid-column: 2 / 2;
+  forced-color-adjust: none;
+  overflow: hidden;
+}
+
+:host([orientation='vertical']) .root::after,
+:host([orientation='vertical']) .root .track {
+  height: 100%;
+  width: var(--track-size);
+}
+
+.track::before {
+  content: '';
+  position: absolute;
+  height: 100%;
+  border-radius: inherit;
+  inset-inline-start: 0;
+  width: var(--slider-progress);
+}
+
+:host(:dir(rtl)) .root .track::before {
+  width: calc(100% - var(--slider-progress));
+}
+
+:host([orientation='vertical']) .root .track::before {
+  width: 100%;
+  bottom: 0;
+  height: var(--slider-progress);
+}
+
+:host([step]) .root .track::after {
+  content: '';
+  position: absolute;
+  border-radius: inherit;
+  inset: var(--step-marker-inset);
+  background-image: repeating-linear-gradient(
+    var(--slider-direction),
+    #0000 0%,
+    #0000 calc(var(--step-rate) - 1px),
+    var(--colorNeutralBackground1) calc(var(--step-rate) - 1px),
+    var(--colorNeutralBackground1) var(--step-rate)
+  );
+}
+
+.thumb-container {
+  position: absolute;
+  grid-row: 2 / 2;
+  grid-column: 2 / 2;
+  transform: translateX(-50%);
+  left: var(--slider-thumb);
+}
+
+:host([orientation='vertical']) .root .thumb-container {
+  transform: translateY(50%);
+  left: unset;
+  bottom: var(--slider-thumb);
+}
+
+:host(:not(:active)) .root :is(.thumb-container, .track::before) {
+  transition: all 0.2s ease;
+}
+
+.thumb {
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  border-radius: var(--borderRadiusCircular);
+  box-shadow: 0 0 0 calc(var(--thumb-size) * 0.2) var(--colorNeutralBackground1) inset;
+  border: calc(var(--thumb-size) * 0.05) solid var(--colorNeutralStroke1);
+  box-sizing: border-box;
+}
+
+.thumb,
+.track::before {
+  background-color: var(--rail-color);
+}
+
+@media (forced-colors: active) {
+  .track:hover,
+  .track:active,
+  .track {
+    background: WindowText;
+  }
+
+  .thumb:hover,
+  .thumb:active,
+  .thumb {
+    background: ButtonText;
+  }
+
+  .root:hover .track::before,
+  .root:active .track::before,
+  .track::before {
+    background: Highlight;
+  }
+}