fluentui-webcomponents 0.0.1

package/components/tooltip/fluent-tooltip.js

@@ -0,0 +1,102 @@
+import { FluentElement } from '../../core/fluent-element.js';
+
+const stylesUrl = new URL('./fluent-tooltip.css', import.meta.url).href;
+
+let _tooltipIdCounter = 0;
+
+class FluentTooltip extends FluentElement {
+  static stylesUrl = stylesUrl;
+  static template = `<div class="root"><slot></slot></div>`;
+
+  static formAssociated = true;
+
+  static get observedAttributes() {
+    return ['visible', 'anchor', 'positioning', 'delay'];
+  }
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this._internals.role = 'tooltip';
+    this._id = `fluent-tooltip-${++_tooltipIdCounter}`;
+    this._defaultDelay = 250;
+    this._anchorElement = null;
+    this._timer = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('id', this._id);
+    this.setAttribute('aria-hidden', 'true');
+    this.setAttribute('popover', 'manual');
+    this._resolveAnchor();
+    this._addAnchorListeners();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._removeAnchorListeners();
+    if (this._anchorElement) {
+      this._anchorElement.style.removeProperty('anchor-name');
+    }
+  }
+
+  _resolveAnchor() {
+    const anchorId = this.getAttribute('anchor');
+    if (!anchorId) return;
+    const rootNode = this.getRootNode();
+    this._anchorElement = (rootNode instanceof ShadowRoot ? rootNode : document).getElementById(anchorId);
+    if (this._anchorElement) {
+      this._anchorElement.style.setProperty('anchor-name', `--${this._id}`);
+      this.style.setProperty('position-anchor', `--${this._id}`);
+      const describedBy = this._anchorElement.getAttribute('aria-describedby');
+      this._anchorElement.setAttribute('aria-describedby',
+        describedBy ? `${describedBy} ${this._id}` : this._id);
+    }
+  }
+
+  _addAnchorListeners() {
+    if (!this._anchorElement) return;
+    this._anchorElement.addEventListener('focus', this._focusHandler);
+    this._anchorElement.addEventListener('blur', this._blurHandler);
+    this._anchorElement.addEventListener('mouseenter', this._mouseenterHandler);
+    this._anchorElement.addEventListener('mouseleave', this._mouseleaveHandler);
+  }
+
+  _removeAnchorListeners() {
+    if (!this._anchorElement) return;
+    this._anchorElement.removeEventListener('focus', this._focusHandler);
+    this._anchorElement.removeEventListener('blur', this._blurHandler);
+    this._anchorElement.removeEventListener('mouseenter', this._mouseenterHandler);
+    this._anchorElement.removeEventListener('mouseleave', this._mouseleaveHandler);
+  }
+
+  show(delay) {
+    clearTimeout(this._timer);
+    const d = delay != null ? Number(delay) : this._defaultDelay;
+    this._timer = setTimeout(() => {
+      this.setAttribute('aria-hidden', 'false');
+      this.showPopover();
+    }, d);
+  }
+
+  hide(delay) {
+    clearTimeout(this._timer);
+    const d = delay != null ? Number(delay) : this._defaultDelay;
+    this._timer = setTimeout(() => {
+      if (this.matches(':hover') || (this._anchorElement && this._anchorElement.matches(':hover'))) {
+        this.hide(d);
+        return;
+      }
+      this.setAttribute('aria-hidden', 'true');
+      this.hidePopover();
+    }, d);
+  }
+
+  _focusHandler = () => this.show(0);
+  _blurHandler = () => this.hide(0);
+  _mouseenterHandler = () => this.show(this.getAttribute('delay'));
+  _mouseleaveHandler = () => this.hide(this.getAttribute('delay'));
+}
+
+customElements.define('fluent-tooltip', FluentTooltip);

package/components/tree/fluent-tree.css

@@ -0,0 +1,16 @@
+@import url('../../tokens.css');
+
+:host { display: flex; }
+
+.root {
+  display: block;
+  outline: none;
+  font-size: var(--fontSizeBase300);
+  line-height: var(--lineHeightBase300);
+}
+
+.root:focus-visible {
+  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
+  outline-offset: 2px;
+  border-radius: var(--borderRadiusMedium);
+}

package/components/tree/fluent-tree.js

@@ -0,0 +1,167 @@
+import { FluentElement } from '../../core/fluent-element.js';
+
+const stylesUrl = new URL('./fluent-tree.css', import.meta.url).href;
+
+class FluentTree extends FluentElement {
+  static stylesUrl = stylesUrl;
+  static template = `<div class="root"><slot></slot></div>`;
+
+  static get observedAttributes() {
+    return ['appearance', 'size'];
+  }
+
+  constructor() {
+    super();
+    this._currentSelected = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'tree');
+    this.setAttribute('tabindex', '0');
+    this.addEventListener('click', this._clickHandler);
+    this.addEventListener('keydown', this._keydownHandler);
+    this.addEventListener('change', this._changeHandler);
+    this._propagateAppearanceAndSize();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this._clickHandler);
+    this.removeEventListener('keydown', this._keydownHandler);
+    this.removeEventListener('change', this._changeHandler);
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback(name, oldVal, newVal);
+    if (name === 'appearance' || name === 'size') {
+      this._propagateAppearanceAndSize();
+    }
+  }
+
+  _propagateAppearanceAndSize() {
+    const appearance = this.getAttribute('appearance');
+    const size = this.getAttribute('size');
+    const items = this.querySelectorAll('fluent-tree-item');
+    items.forEach(item => {
+      if (appearance && !item.hasAttribute('appearance')) {
+        item.setAttribute('appearance', appearance);
+      }
+      if (size && !item.hasAttribute('size')) {
+        item.setAttribute('size', size);
+      }
+    });
+  }
+
+  _getVisibleItems() {
+    const items = [];
+    const walk = el => {
+      for (const child of el.children) {
+        if (child.tagName.toLowerCase() === 'fluent-tree-item') {
+          if (!child.isHidden) {
+            items.push(child);
+            if (child.hasAttribute('expanded')) {
+              walk(child);
+            }
+          }
+        }
+      }
+    };
+    walk(this);
+    return items;
+  }
+
+  _clickHandler = e => {
+    const item = e.target.closest('fluent-tree-item');
+    if (!item || item.disabled) return;
+    item.toggleExpansion();
+    this._selectItem(item);
+  };
+
+  _changeHandler = e => {
+    const item = e.target;
+    if (!item || item.tagName.toLowerCase() !== 'fluent-tree-item') return;
+    if (item.selected) {
+      if (this._currentSelected && this._currentSelected !== item) {
+        this._currentSelected.selected = false;
+      }
+      this._currentSelected = item;
+    } else if (!item.selected && this._currentSelected === item) {
+      this._currentSelected = null;
+    }
+  };
+
+  _selectItem(item) {
+    if (item.disabled) return;
+    if (this._currentSelected && this._currentSelected !== item) {
+      this._currentSelected.selected = false;
+    }
+    item.selected = true;
+    this._currentSelected = item;
+  }
+
+  _keydownHandler = e => {
+    if (e.defaultPrevented) return;
+
+    const visibleItems = this._getVisibleItems();
+    const focused = this._root.activeElement || document.activeElement;
+    let idx = visibleItems.indexOf(focused);
+    if (idx === -1) idx = visibleItems.indexOf(this._currentSelected);
+
+    switch (e.key) {
+      case 'ArrowUp':
+        e.preventDefault();
+        if (idx > 0) visibleItems[idx - 1].focus();
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        if (idx >= 0 && idx < visibleItems.length - 1) visibleItems[idx + 1].focus();
+        break;
+      case 'ArrowLeft': {
+        e.preventDefault();
+        const item = visibleItems[idx] || this._currentSelected;
+        if (item) {
+          if (item.childTreeItems && item.childTreeItems.length && item.hasAttribute('expanded')) {
+            item.expanded = false;
+          } else {
+            const parent = item.parentElement && item.parentElement.closest('fluent-tree-item');
+            if (parent) parent.focus();
+          }
+        }
+        break;
+      }
+      case 'ArrowRight': {
+        e.preventDefault();
+        const item = visibleItems[idx] || this._currentSelected;
+        if (item) {
+          if (item.childTreeItems && item.childTreeItems.length) {
+            if (!item.hasAttribute('expanded')) {
+              item.expanded = true;
+            } else if (item.childTreeItems.length > 0) {
+              item.childTreeItems[0].focus();
+            }
+          }
+        }
+        break;
+      }
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        if (idx >= 0 && idx < visibleItems.length) {
+          visibleItems[idx].toggleExpansion();
+          this._selectItem(visibleItems[idx]);
+        }
+        break;
+      case 'Home':
+        e.preventDefault();
+        if (visibleItems.length > 0) visibleItems[0].focus();
+        break;
+      case 'End':
+        e.preventDefault();
+        if (visibleItems.length > 0) visibleItems[visibleItems.length - 1].focus();
+        break;
+    }
+  };
+}
+
+customElements.define('fluent-tree', FluentTree);

package/components/tree-item/fluent-tree-item.css

@@ -0,0 +1,147 @@
+@import url('../../tokens.css');
+
+:host { display: block; }
+
+.root {
+  outline: none;
+  font-size: var(--fontSizeBase300);
+  line-height: var(--lineHeightBase300);
+  display: block;
+}
+
+.root:focus-visible .positioning-region {
+  box-shadow: inset 0 0 0 var(--spacingVerticalXXS) var(--colorStrokeFocus2);
+}
+
+.positioning-region {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  height: var(--spacingVerticalXXXL);
+  padding-inline-start: calc(var(--indent, 0) * var(--spacingHorizontalXXL));
+  padding-inline-end: var(--spacingVerticalS);
+  border-radius: var(--borderRadiusMedium);
+  background-color: var(--colorSubtleBackground);
+  color: var(--colorNeutralForeground2);
+  gap: var(--spacingHorizontalXS);
+  transition: background var(--durationFaster) var(--curveEasyEaseMax),
+              color var(--durationFaster) var(--curveEasyEaseMax);
+}
+
+.positioning-region:hover {
+  background-color: var(--colorSubtleBackgroundHover);
+  color: var(--colorNeutralForeground2Hover);
+}
+
+.positioning-region:active {
+  background-color: var(--colorSubtleBackgroundPressed);
+  color: var(--colorNeutralForeground2Pressed);
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: var(--spacingHorizontalXS);
+  min-width: 0;
+}
+
+.chevron {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: center;
+  width: var(--spacingHorizontalXXL);
+  height: var(--spacingVerticalXXL);
+  transition: transform var(--durationFaster) var(--curveEasyEaseMax);
+  transform: rotate(0deg);
+}
+
+.chevron svg {
+  inline-size: 12px;
+  block-size: 12px;
+}
+
+.aside {
+  display: flex;
+  align-items: center;
+}
+
+.items {
+  display: none;
+}
+
+:host([expanded]) .chevron {
+  transform: rotate(90deg);
+}
+
+:host([expanded]) .items {
+  display: block;
+}
+
+:host([empty]) .chevron,
+:host([empty]) .items {
+  visibility: hidden;
+}
+
+:host([selected]) .positioning-region {
+  background-color: var(--colorSubtleBackgroundSelected);
+  color: var(--colorNeutralForeground2Selected);
+}
+
+:host([disabled]) .root {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+:host([size='small']) .positioning-region {
+  height: var(--spacingVerticalXXL);
+  padding-inline-start: calc(var(--indent, 0) * var(--spacingHorizontalM));
+}
+
+:host([appearance='transparent']) .positioning-region {
+  background-color: var(--colorTransparentBackground);
+}
+
+:host([appearance='transparent']) .positioning-region:hover {
+  background-color: var(--colorTransparentBackgroundHover);
+}
+
+:host([appearance='transparent']) .positioning-region:active {
+  background-color: var(--colorTransparentBackgroundPressed);
+}
+
+:host([appearance='transparent'][selected]) .positioning-region {
+  background-color: var(--colorTransparentBackgroundSelected);
+  color: var(--colorNeutralForeground2Selected);
+}
+
+:host([appearance='subtle-alpha']) .positioning-region {
+  background-color: var(--colorSubtleBackground);
+}
+
+:host([appearance='subtle-alpha']) .positioning-region:hover {
+  background-color: var(--colorSubtleBackgroundHover);
+}
+
+:host([appearance='subtle-alpha']) .positioning-region:active {
+  background-color: var(--colorSubtleBackgroundPressed);
+}
+
+:host([appearance='subtle-alpha'][selected]) .positioning-region {
+  background-color: var(--colorSubtleBackgroundSelected);
+  color: var(--colorNeutralForeground2Selected);
+}
+
+@media (prefers-contrast: more) {
+  .root:focus-visible .positioning-region {
+    outline: 1px solid var(--colorStrokeFocus2);
+  }
+}
+
+@media (forced-colors: active) {
+  :host([disabled]) .root {
+    color: GrayText;
+    opacity: 1;
+  }
+}

package/components/tree-item/fluent-tree-item.js

@@ -0,0 +1,163 @@
+import { FluentElement } from '../../core/fluent-element.js';
+
+const stylesUrl = new URL('./fluent-tree-item.css', import.meta.url).href;
+
+class FluentTreeItem extends FluentElement {
+  static stylesUrl = stylesUrl;
+  static template = `
+    <div class="root">
+      <div class="positioning-region" part="positioning-region">
+        <div class="content" part="content">
+          <span class="chevron" part="chevron" aria-hidden="true">
+            <slot name="chevron">
+              <svg viewBox="0 0 12 12" fill="currentColor" width="12" height="12">
+                <path d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"/>
+              </svg>
+            </slot>
+          </span>
+          <slot name="start"></slot>
+          <slot></slot>
+          <slot name="end"></slot>
+        </div>
+        <div class="aside" part="aside">
+          <slot name="aside"></slot>
+        </div>
+      </div>
+      <div role="group" class="items" part="items">
+        <slot name="item"></slot>
+      </div>
+    </div>
+  `;
+
+  static get observedAttributes() {
+    return ['expanded', 'selected', 'disabled', 'data-indent', 'appearance', 'size', 'empty'];
+  }
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this._internals.role = 'treeitem';
+    this.childTreeItems = [];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    if (this.parentElement && this.parentElement.tagName.toLowerCase() === 'fluent-tree-item') {
+      this.setAttribute('slot', 'item');
+    }
+
+    this.setAttribute('tabindex', '-1');
+
+    const itemSlot = this._root.querySelector('slot[name="item"]');
+    if (itemSlot) {
+      itemSlot.addEventListener('slotchange', () => this._handleItemSlotChange());
+    }
+
+    this._handleItemSlotChange();
+    this._updateEmpty();
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback(name, oldVal, newVal);
+
+    switch (name) {
+      case 'expanded':
+        this._internals.ariaExpanded = this.childTreeItems.length > 0
+          ? String(newVal !== null)
+          : null;
+        this._toggleState('expanded', newVal !== null);
+        break;
+      case 'selected':
+        this._internals.ariaSelected = String(newVal !== null);
+        this._toggleState('selected', newVal !== null);
+        if (oldVal !== newVal) {
+          this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+        }
+        break;
+      case 'disabled':
+        this._internals.ariaDisabled = newVal !== null ? 'true' : null;
+        this._toggleState('disabled', newVal !== null);
+        break;
+      case 'data-indent':
+        this.style.setProperty('--indent', newVal || '0');
+        break;
+      case 'empty':
+        this._toggleState('empty', newVal !== null);
+        break;
+    }
+  }
+
+  _toggleState(name, value) {
+    try {
+      if (value) {
+        this._internals.states.add(name);
+      } else {
+        this._internals.states.delete(name);
+      }
+    } catch (e) { /* states API may not be supported */ }
+  }
+
+  get selected() { return this.hasAttribute('selected'); }
+  set selected(val) {
+    if (val) { this.setAttribute('selected', ''); }
+    else { this.removeAttribute('selected'); }
+  }
+
+  get expanded() { return this.hasAttribute('expanded'); }
+  set expanded(val) {
+    if (val) { this.setAttribute('expanded', ''); }
+    else { this.removeAttribute('expanded'); }
+  }
+
+  get disabled() { return this.hasAttribute('disabled'); }
+
+  toggleExpansion() {
+    if (this.childTreeItems.length > 0) {
+      this.expanded = !this.expanded;
+    }
+  }
+
+  get isHidden() {
+    let parent = this.parentElement;
+    while (parent && parent.tagName.toLowerCase() === 'fluent-tree-item') {
+      if (!parent.hasAttribute('expanded')) return true;
+      parent = parent.parentElement && parent.parentElement.closest
+        ? parent.parentElement.closest('fluent-tree-item')
+        : null;
+    }
+    return false;
+  }
+
+  get isNestedItem() {
+    const parent = this.parentElement;
+    return parent && parent.tagName.toLowerCase() === 'fluent-tree-item';
+  }
+
+  _handleItemSlotChange() {
+    const itemSlot = this._root.querySelector('slot[name="item"]');
+    if (!itemSlot) return;
+    this.childTreeItems = itemSlot.assignedElements().filter(
+      el => el.tagName.toLowerCase() === 'fluent-tree-item',
+    );
+    this._updateEmpty();
+    this._updateChildIndent();
+  }
+
+  _updateEmpty() {
+    if (this.childTreeItems.length === 0) {
+      this.setAttribute('empty', '');
+    } else {
+      this.removeAttribute('empty');
+    }
+  }
+
+  _updateChildIndent() {
+    const indent = parseInt(this.getAttribute('data-indent') || '0', 10);
+    this.childTreeItems.forEach(item => {
+      item.setAttribute('data-indent', String(indent + 1));
+    });
+  }
+}
+
+customElements.define('fluent-tree-item', FluentTreeItem);

package/core/fluent-element.js

@@ -0,0 +1,34 @@
+class FluentElement extends HTMLElement {
+  static stylesUrl = '';
+  static template = '';
+
+  constructor() {
+    super();
+    this._root = this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    if (this.constructor.stylesUrl) {
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = this.constructor.stylesUrl;
+      this._root.appendChild(link);
+    }
+
+    const tmpl = document.createElement('template');
+    tmpl.innerHTML = this.constructor.template;
+    this._root.appendChild(tmpl.content.cloneNode(true));
+  }
+
+  static get observedAttributes() {
+    return [];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal !== newVal) this.changed(name, oldVal, newVal);
+  }
+
+  changed() {}
+}
+
+export { FluentElement };