fluentui-webcomponents 0.0.1

package/components/menu/fluent-menu.js

@@ -0,0 +1,202 @@
+import { FluentElement } from '../../core/fluent-element.js';
+
+const stylesUrl = new URL('./fluent-menu.css', import.meta.url).href;
+
+class FluentMenu extends FluentElement {
+  static stylesUrl = stylesUrl;
+  static template = `
+    <div class="root">
+      <slot name="primary-action"></slot>
+      <slot name="trigger"></slot>
+      <slot></slot>
+    </div>
+  `;
+
+  static get observedAttributes() {
+    return ['open-on-hover', 'open-on-context', 'close-on-scroll', 'persist-on-item-click', 'split'];
+  }
+
+  constructor() {
+    super();
+    this._open = false;
+    this._trigger = null;
+    this._menuList = null;
+    this._triggerAbortController = null;
+    this._menuListAbortController = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._setupSlots();
+    this.setComponent();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._triggerAbortController) {
+      this._triggerAbortController.abort();
+      this._triggerAbortController = null;
+    }
+    if (this._menuListAbortController) {
+      this._menuListAbortController.abort();
+      this._menuListAbortController = null;
+    }
+  }
+
+  setComponent() {
+    this._setupTriggerSlot();
+    this._setupMenuListSlot();
+  }
+
+  _setupSlots() {
+    const triggerSlot = this._root.querySelector('slot[name="trigger"]');
+    const defaultSlot = this._root.querySelector('slot:not([name])');
+
+    if (triggerSlot) {
+      triggerSlot.addEventListener('slotchange', () => this._setupTriggerSlot());
+    }
+    if (defaultSlot) {
+      defaultSlot.addEventListener('slotchange', () => this._setupMenuListSlot());
+    }
+
+    this._setupTriggerSlot();
+    this._setupMenuListSlot();
+  }
+
+  _setupTriggerSlot() {
+    if (this._triggerAbortController) {
+      this._triggerAbortController.abort();
+      this._triggerAbortController = null;
+    }
+
+    const triggerSlot = this._root.querySelector('slot[name="trigger"]');
+    if (!triggerSlot) return;
+    const assigned = triggerSlot.assignedElements();
+    if (assigned.length === 0) return;
+    this._trigger = assigned[0];
+    this._trigger.setAttribute('aria-haspopup', 'true');
+    this._trigger.setAttribute('aria-expanded', String(this._open));
+
+    this._triggerAbortController = new AbortController();
+    const { signal } = this._triggerAbortController;
+
+    this._trigger.addEventListener('keydown', this._triggerKeydownHandler, { signal });
+
+    if (this.hasAttribute('open-on-hover')) {
+      this._trigger.addEventListener('mouseover', this.openMenu, { signal });
+    } else if (this.hasAttribute('open-on-context')) {
+      this._trigger.addEventListener('contextmenu', this.openMenu, { signal });
+      document.addEventListener('click', this._documentClickHandler, { signal });
+    } else {
+      this._trigger.addEventListener('click', this.toggleMenu, { signal });
+    }
+  }
+
+  _setupMenuListSlot() {
+    if (this._menuListAbortController) {
+      this._menuListAbortController.abort();
+      this._menuListAbortController = null;
+    }
+
+    const defaultSlot = this._root.querySelector('slot:not([name])');
+    if (!defaultSlot) return;
+    const assigned = defaultSlot.assignedElements();
+    if (assigned.length === 0) return;
+
+    // Use a wrapper div as menu list if first child is a menu-item
+    if (assigned[0].tagName.toLowerCase() === 'fluent-menu-item') {
+      // All children are menu items, render them directly
+      this._menuList = this;
+    } else {
+      this._menuList = assigned[0];
+    }
+
+    if (this._menuList && this._menuList !== this) {
+      this._menuList.setAttribute('popover', this.hasAttribute('open-on-context') ? 'manual' : '');
+      this._menuListAbortController = new AbortController();
+      const { signal } = this._menuListAbortController;
+
+      this._menuList.addEventListener('toggle', this._toggleHandler, { signal });
+
+      if (!this.hasAttribute('persist-on-item-click')) {
+        this._menuList.addEventListener('change', this.closeMenu, { signal });
+      }
+    }
+  }
+
+  toggleMenu = () => {
+    if (this._menuList && this._menuList !== this) {
+      this._menuList.togglePopover(!this._open);
+    }
+  };
+
+  closeMenu = (event) => {
+    if (this._menuList && this._menuList !== this) {
+      this._menuList.togglePopover(false);
+    }
+    if (this.hasAttribute('close-on-scroll')) {
+      document.removeEventListener('scroll', this.closeMenu);
+    }
+  };
+
+  openMenu = (e) => {
+    if (this._menuList && this._menuList !== this) {
+      this._menuList.togglePopover(true);
+    }
+    if (e && this.hasAttribute('open-on-context')) {
+      e.preventDefault();
+    }
+    if (this.hasAttribute('close-on-scroll')) {
+      document.addEventListener('scroll', this.closeMenu);
+    }
+  };
+
+  focusMenuList() {
+    if (this._menuList) {
+      this._menuList.focus();
+    }
+  }
+
+  focusTrigger() {
+    if (this._trigger) {
+      this._trigger.focus();
+    }
+  }
+
+  _toggleHandler = (e) => {
+    if (e.type === 'toggle' && e.newState) {
+      const open = e.newState === 'open';
+      if (this._trigger) {
+        this._trigger.setAttribute('aria-expanded', String(open));
+      }
+      if (this._menuList) {
+        this._menuList.setAttribute('focusgroup', open ? 'menu' : 'none');
+      }
+      this._open = open;
+      if (this._open) {
+        this.focusMenuList();
+      }
+    }
+  };
+
+  _triggerKeydownHandler = (e) => {
+    if (e.defaultPrevented) return;
+    switch (e.key) {
+      case ' ':
+      case 'Enter':
+        e.preventDefault();
+        this.toggleMenu();
+        break;
+      default:
+        return true;
+    }
+  };
+
+  _documentClickHandler = (e) => {
+    if (!e.composedPath().some(el => el === this._trigger || el === this._menuList)) {
+      this.closeMenu();
+    }
+  };
+}
+
+customElements.define('fluent-menu', FluentMenu);

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

@@ -0,0 +1,152 @@
+@import url('../../tokens.css');
+
+:host { display: block; }
+
+.root {
+  --indent: 0;
+  display: grid;
+  align-items: center;
+  background: var(--colorNeutralBackground1);
+  border-radius: var(--borderRadiusMedium);
+  color: var(--colorNeutralForeground2);
+  cursor: pointer;
+  flex-shrink: 0;
+  font: var(--fontWeightRegular) var(--fontSizeBase300) / var(--lineHeightBase300) var(--fontFamilyBase);
+  grid-gap: 4px;
+  grid-template-columns: 20px 20px auto 20px;
+  height: 32px;
+  overflow: visible;
+  padding: 0 10px;
+}
+
+.root:hover {
+  background: var(--colorNeutralBackground1Hover);
+  color: var(--colorNeutralForeground2Hover);
+}
+
+.root:active {
+  background-color: var(--colorNeutralBackground1Selected);
+  color: var(--colorNeutralForeground2Pressed);
+}
+
+:host(:active) ::slotted([slot='start']) {
+  color: var(--colorCompoundBrandForeground1Pressed);
+}
+
+:host(:state(disabled)) .root {
+  background-color: var(--colorNeutralBackgroundDisabled);
+  color: var(--colorNeutralForegroundDisabled);
+}
+
+:host(:state(disabled)) ::slotted([slot='start']),
+:host(:state(disabled)) ::slotted([slot='end']) {
+  color: var(--colorNeutralForegroundDisabled);
+}
+
+.root:focus-visible {
+  border-radius: var(--borderRadiusMedium);
+  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
+}
+
+.content {
+  white-space: nowrap;
+  flex-grow: 1;
+  grid-column: auto / span 2;
+  padding: 0 2px;
+}
+
+:host(:not(:state(checked))) .indicator,
+:host(:not(:state(checked))) ::slotted([slot='indicator']),
+:host(:not(:state(submenu))) .submenu-glyph,
+:host(:not(:state(submenu))) ::slotted([slot='submenu-glyph']) {
+  display: none;
+}
+
+::slotted([slot='end']) {
+  color: var(--colorNeutralForeground3);
+  font: var(--fontWeightRegular) var(--fontSizeBase200) / var(--lineHeightBase200) var(--fontFamilyBase);
+  white-space: nowrap;
+}
+
+:host([data-indent='1']) {
+  --indent: 1;
+}
+
+:host([data-indent='2']) .root {
+  --indent: 2;
+  grid-template-columns: 20px 20px auto auto;
+}
+
+:host(:state(submenu)) .root {
+  grid-template-columns: 20px auto auto 20px;
+}
+
+:host([data-indent='2']:state(submenu)) .root {
+  grid-template-columns: 20px 20px auto auto 20px;
+}
+
+.indicator,
+::slotted([slot='indicator']) {
+  grid-column: 1 / span 1;
+  width: 20px;
+}
+
+::slotted([slot='start']) {
+  display: inline-flex;
+  grid-column: calc(var(--indent)) / span 1;
+}
+
+.content {
+  grid-column: calc(var(--indent) + 1) / span 1;
+}
+
+::slotted([slot='end']) {
+  grid-column: calc(var(--indent) + 2) / span 1;
+  justify-self: end;
+}
+
+.submenu-glyph,
+::slotted([slot='submenu-glyph']) {
+  grid-column: -2 / span 1;
+  justify-self: end;
+}
+
+/* Submenu popover positioning */
+@layer popover {
+  :host {
+    anchor-name: --menu-trigger;
+    position: relative;
+  }
+
+  ::slotted([popover]) {
+    margin: 0;
+    max-height: var(--menu-max-height, auto);
+    position: absolute;
+    position-anchor: --menu-trigger;
+    position-area: inline-end span-block-end;
+    position-try-fallbacks: flip-inline, block-start, block-end;
+    z-index: 1;
+  }
+
+  ::slotted([popover]:not(:popover-open)) {
+    display: none;
+  }
+
+  ::slotted([popover]:popover-open) {
+    inset: unset;
+  }
+
+  @supports not (anchor-name: --menu-trigger) {
+    ::slotted([popover]) {
+      align-self: start;
+    }
+  }
+}
+
+@media (forced-colors: active) {
+  :host(:state(disabled)),
+  :host(:state(disabled)) ::slotted([slot='start']),
+  :host(:state(disabled)) ::slotted([slot='end']) {
+    color: GrayText;
+  }
+}

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

@@ -0,0 +1,177 @@
+import { FluentElement } from '../../core/fluent-element.js';
+
+const stylesUrl = new URL('./fluent-menu-item.css', import.meta.url).href;
+
+class FluentMenuItem extends FluentElement {
+  static stylesUrl = stylesUrl;
+  static template = `
+    <div class="root">
+      <slot name="indicator">
+        <svg class="indicator" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+          <path d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 014.9 12L2.22 9.28a.75.75 0 111.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 011.06.04z" fill="currentColor"/>
+        </svg>
+      </slot>
+      <slot name="start"></slot>
+      <div class="content" part="content">
+        <slot></slot>
+      </div>
+      <slot name="end"></slot>
+      <slot name="submenu-glyph">
+        <svg class="submenu-glyph" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+          <path d="M5.74 3.2a.75.75 0 00-.04 1.06L9.23 8 5.7 11.74a.75.75 0 101.1 1.02l4-4.25a.75.75 0 000-1.02l-4-4.25a.75.75 0 00-1.06-.04z" fill="currentColor"/>
+        </svg>
+      </slot>
+      <slot name="submenu"></slot>
+    </div>
+  `;
+
+  static formAssociated = true;
+
+  static get observedAttributes() {
+    return ['checked', 'disabled', 'role'];
+  }
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this._internals.role = 'menuitem';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('tabindex', '0');
+    this.addEventListener('keydown', this._handleKeyDown);
+    this.addEventListener('click', this._handleClick);
+    this.addEventListener('mouseover', this._handleMouseOver);
+    this.addEventListener('mouseout', this._handleMouseOut);
+    this.addEventListener('toggle', this._handleToggle);
+
+    this._internals.role = this.getAttribute('role') || 'menuitem';
+
+    const role = this._internals.role;
+    if (role === 'menuitemcheckbox' || role === 'menuitemradio') {
+      this._internals.ariaChecked = String(!!this.hasAttribute('checked'));
+    }
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback(name, oldVal, newVal);
+    if (name === 'disabled') {
+      const isDisabled = newVal !== null;
+      this._internals.ariaDisabled = isDisabled ? 'true' : null;
+      this._toggleState('disabled', isDisabled);
+    }
+    if (name === 'checked') {
+      const isChecked = newVal !== null;
+      const checkable = this._internals.role === 'menuitemcheckbox' || this._internals.role === 'menuitemradio';
+      this._internals.ariaChecked = checkable ? String(isChecked) : null;
+      this._toggleState('checked', checkable ? isChecked : false);
+    }
+    if (name === 'role' && newVal) {
+      this._internals.role = newVal;
+    }
+  }
+
+  _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 */ }
+  }
+
+  _handleKeyDown = (e) => {
+    if (e.defaultPrevented) return;
+    switch (e.key) {
+      case 'Enter':
+      case ' ':
+        this._invoke();
+        break;
+      case 'ArrowRight':
+        if (!this.hasAttribute('disabled')) {
+          const submenu = this.querySelector('[slot="submenu"]');
+          if (submenu) {
+            try { submenu.togglePopover(true); } catch (ex) { }
+            submenu.focus();
+          }
+        }
+        break;
+      case 'ArrowLeft':
+        if (this.parentElement && this.parentElement.hasAttribute('popover')) {
+          try { this.parentElement.togglePopover(false); } catch (ex) { }
+          if (this.parentElement.parentElement) {
+            this.parentElement.parentElement.focus();
+          }
+        }
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+  };
+
+  _handleClick = (e) => {
+    if (e.defaultPrevented || this.hasAttribute('disabled')) return;
+    this._invoke();
+  };
+
+  _handleMouseOver = (e) => {
+    if (this.hasAttribute('disabled')) return;
+    const submenu = this.querySelector('[slot="submenu"]');
+    if (submenu) {
+      try { submenu.togglePopover(true); } catch (ex) { }
+    }
+  };
+
+  _handleMouseOut = (e) => {
+    const submenu = this.querySelector('[slot="submenu"]');
+    if (submenu && !this.contains(document.activeElement)) {
+      try { submenu.togglePopover(false); } catch (ex) { }
+    }
+  };
+
+  _handleToggle = (e) => {
+    if (!(e instanceof ToggleEvent)) return;
+    const submenu = this.querySelector('[slot="submenu"]');
+    if (!submenu) return;
+
+    if (e.newState === 'open') {
+      this._internals.ariaExpanded = 'true';
+    } else if (e.newState === 'closed') {
+      this._internals.ariaExpanded = 'false';
+    }
+    submenu.setAttribute('focusgroup', e.newState === 'open' ? 'menu' : 'none');
+  };
+
+  _invoke() {
+    if (this.hasAttribute('disabled')) return;
+    const role = this._internals.role;
+
+    if (role === 'menuitemcheckbox') {
+      const checked = this.hasAttribute('checked');
+      if (checked) {
+        this.removeAttribute('checked');
+      } else {
+        this.setAttribute('checked', '');
+      }
+      this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: !checked }));
+    } else if (role === 'menuitemradio') {
+      if (!this.hasAttribute('checked')) {
+        this.setAttribute('checked', '');
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: true }));
+      }
+    } else if (role === 'menuitem') {
+      const submenu = this.querySelector('[slot="submenu"]');
+      if (submenu) {
+        try { submenu.togglePopover(true); } catch (ex) { }
+        submenu.focus();
+      } else {
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+      }
+    }
+  }
+}
+
+customElements.define('fluent-menu-item', FluentMenuItem);

package/components/popover/fluent-popover.css

@@ -0,0 +1,95 @@
+@import url('../../tokens.css');
+
+:host { display: block; }
+
+.root {
+  display: inline-block;
+  position: relative;
+}
+
+::slotted([slot='trigger']) {
+  cursor: pointer;
+}
+
+.popover {
+  display: none;
+  position: absolute;
+  inset: unset;
+  top: calc(100% + var(--spacingVerticalS));
+  left: 50%;
+  translate: -50% 0;
+  background: var(--colorNeutralBackground1);
+  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
+  border-radius: var(--borderRadiusMedium);
+  box-shadow: var(--shadow16);
+  color: var(--colorNeutralForeground1);
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase300);
+  line-height: var(--lineHeightBase300);
+  min-width: 120px;
+  padding: var(--spacingVerticalXS) 0;
+  z-index: 1000;
+  white-space: nowrap;
+}
+
+.arrow {
+  display: none;
+  position: absolute;
+  top: calc(-1 * var(--strokeWidthThick));
+  left: 50%;
+  translate: -50% 0;
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-bottom: 8px solid var(--colorNeutralStroke1);
+}
+
+.arrow::after {
+  content: '';
+  position: absolute;
+  top: var(--strokeWidthThin);
+  left: -8px;
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-bottom: 8px solid var(--colorNeutralBackground1);
+}
+
+:host([positioning='above']) .popover {
+  top: unset;
+  bottom: calc(100% + var(--spacingVerticalS));
+}
+
+:host([positioning='above']) .arrow {
+  top: unset;
+  bottom: calc(-1 * var(--strokeWidthThick));
+  border-bottom: none;
+  border-top: 8px solid var(--colorNeutralStroke1);
+}
+
+:host([positioning='above']) .arrow::after {
+  top: calc(-1 * (var(--strokeWidthThick) + var(--strokeWidthThin)));
+  border-bottom: none;
+  border-top: 8px solid var(--colorNeutralBackground1);
+}
+
+:host([positioning='before']) .popover {
+  left: unset;
+  top: 50%;
+  right: calc(100% + var(--spacingHorizontalS));
+  translate: 0 -50%;
+}
+
+:host([positioning='after']) .popover {
+  left: calc(100% + var(--spacingHorizontalS));
+  top: 50%;
+  translate: 0 -50%;
+}
+
+@media (forced-colors: active) {
+  .popover {
+    border-color: ButtonText;
+  }
+}