fluentui-webcomponents 0.0.1

package/components/popover/fluent-popover.js

@@ -0,0 +1,93 @@
+import { FluentElement } from '../../core/fluent-element.js';
+
+const stylesUrl = new URL('./fluent-popover.css', import.meta.url).href;
+
+class FluentPopover extends FluentElement {
+  static stylesUrl = stylesUrl;
+  static template = `
+    <div class="root">
+      <slot name="trigger"></slot>
+      <div class="popover" part="popover">
+        <div class="arrow"></div>
+        <slot></slot>
+      </div>
+    </div>
+  `;
+
+  static get observedAttributes() {
+    return ['open', 'anchor', 'positioning'];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._popover = this._root.querySelector('.popover');
+    this._arrow = this._root.querySelector('.arrow');
+    this._triggerSlot = this._root.querySelector('slot[name="trigger"]');
+
+    this._triggerSlot.addEventListener('slotchange', () => {
+      this._setupTrigger();
+    });
+    this._setupTrigger();
+
+    this._popover.addEventListener('click', (e) => e.stopPropagation());
+    document.addEventListener('click', this._documentClickHandler);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('click', this._documentClickHandler);
+  }
+
+  _setupTrigger() {
+    const assigned = this._triggerSlot.assignedElements();
+    if (assigned.length > 0) {
+      const trigger = assigned[0];
+      trigger.setAttribute('aria-haspopup', 'true');
+      trigger.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.toggle();
+      });
+      trigger.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+          this.close();
+          trigger.focus();
+        }
+      });
+    }
+  }
+
+  toggle() {
+    const isOpen = this.hasAttribute('open');
+    if (isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  open() {
+    this.setAttribute('open', '');
+    this._popover.style.display = 'block';
+    this._triggerSlot.assignedElements().forEach(el => {
+      el.setAttribute('aria-expanded', 'true');
+    });
+  }
+
+  close() {
+    this.removeAttribute('open');
+    this._popover.style.display = 'none';
+    this._triggerSlot.assignedElements().forEach(el => {
+      el.setAttribute('aria-expanded', 'false');
+    });
+  }
+
+  _documentClickHandler = (e) => {
+    if (!this.hasAttribute('open')) return;
+    const path = e.composedPath();
+    if (!path.includes(this)) {
+      this.close();
+    }
+  };
+}
+
+customElements.define('fluent-popover', FluentPopover);

package/components/radio/fluent-radio.css

@@ -0,0 +1,123 @@
+@import url('../../tokens.css');
+
+:host { display: inline-flex; }
+
+:host([hidden]) .root {
+  display: none;
+}
+
+.root {
+  --size: 16px;
+  aspect-ratio: 1;
+  background-color: var(--colorNeutralBackground1);
+  border: var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);
+  border-radius: var(--borderRadiusCircular);
+  box-sizing: border-box;
+  position: relative;
+  width: var(--size);
+  display: inline-flex;
+  cursor: pointer;
+}
+
+:host([size='large']) .root {
+  --size: 20px;
+}
+
+.checked-indicator {
+  aspect-ratio: 1;
+  border-radius: var(--borderRadiusCircular);
+  color: var(--colorNeutralForegroundInverted);
+  inset: 0;
+  margin: auto;
+  position: absolute;
+  width: calc(var(--size) * 0.625);
+}
+
+:host(:not([slot='input'])) .root::after {
+  content: '';
+  position: absolute;
+  display: block;
+  inset: -8px;
+  box-sizing: border-box;
+  outline: none;
+  border: var(--strokeWidthThick) solid var(--colorTransparentStroke);
+  border-radius: var(--borderRadiusMedium);
+}
+
+:host(:not([slot='input'])) .root:focus-visible::after {
+  border-color: var(--colorStrokeFocus2);
+}
+
+.root:hover {
+  border-color: var(--colorNeutralStrokeAccessibleHover);
+}
+
+:host([checked]) .root {
+  border-color: var(--colorCompoundBrandStroke);
+}
+
+:host([checked]) .root .checked-indicator {
+  background-color: var(--colorCompoundBrandBackground);
+}
+
+:host([checked]) .root:hover .checked-indicator {
+  background-color: var(--colorCompoundBrandBackgroundHover);
+}
+
+.root:active {
+  border-color: var(--colorNeutralStrokeAccessiblePressed);
+}
+
+:host([checked]) .root:active .checked-indicator {
+  background-color: var(--colorCompoundBrandBackgroundPressed);
+}
+
+.root:focus-visible {
+  outline: none;
+}
+
+:host([disabled]) .root {
+  background-color: var(--colorNeutralBackgroundDisabled);
+  border-color: var(--colorNeutralStrokeDisabled);
+  cursor: unset;
+}
+
+:host([checked][disabled]) .root .checked-indicator {
+  background-color: var(--colorNeutralStrokeDisabled);
+}
+
+@media (forced-colors: active) {
+  .root {
+    border-color: FieldText;
+  }
+
+  :host(:not([slot='input']:focus-visible)) .root::after {
+    border-color: Canvas;
+  }
+
+  :host(:not([disabled])) .root:hover,
+  :host(:not([slot='input'])) .root:focus-visible::after {
+    border-color: Highlight;
+  }
+
+  .checked-indicator {
+    color: HighlightText;
+  }
+
+  :host([checked]) .root .checked-indicator {
+    background-color: FieldText;
+  }
+
+  :host([checked]:not([disabled])) .root:hover .checked-indicator {
+    background-color: Highlight;
+  }
+
+  :host([disabled]) .root {
+    border-color: GrayText;
+    color: GrayText;
+  }
+
+  :host([disabled][checked]) .root .checked-indicator {
+    background-color: GrayText;
+  }
+}

package/components/radio/fluent-radio.js

@@ -0,0 +1,257 @@
+import { FluentElement } from '../../core/fluent-element.js';
+
+const stylesUrl = new URL('./fluent-radio.css', import.meta.url).href;
+
+class FluentRadio extends FluentElement {
+  static stylesUrl = stylesUrl;
+  static formAssociated = true;
+
+  static template = `
+    <div class="root">
+      <slot name="checked-indicator">
+        <span part="checked-indicator" class="checked-indicator" role="presentation"></span>
+      </slot>
+    </div>
+  `;
+
+  static get observedAttributes() {
+    return ['checked', 'disabled', 'required', 'value', 'name', 'size', 'shape', 'autofocus'];
+  }
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this._internals.role = 'radio';
+    this._checked = false;
+    this._dirtyChecked = false;
+    this._keydownPressed = false;
+    this._value = 'on';
+    this._name = '';
+    this._size = 'medium';
+    this._shape = 'circular';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._updateDisabled();
+    this._setAriaChecked();
+    this.addEventListener('click', this._clickHandler.bind(this));
+    this.addEventListener('keydown', this._keydownHandler.bind(this));
+    this.addEventListener('keyup', this._keyupHandler.bind(this));
+  }
+
+  changed(name, oldVal, newVal) {
+    switch (name) {
+      case 'checked':
+        if (!this._dirtyChecked) {
+          this._checked = newVal !== null;
+          this._setAriaChecked();
+          if (this._checked) {
+            this._uncheckSiblings();
+          }
+        }
+        break;
+      case 'disabled':
+        this._updateDisabled();
+        this.dispatchEvent(new Event('disabled', { bubbles: true }));
+        break;
+      case 'required':
+        this._internals.ariaRequired = this.required ? 'true' : 'false';
+        this._setValidity();
+        break;
+      case 'value':
+        this._value = newVal || 'on';
+        break;
+      case 'name':
+        this._name = newVal || '';
+        if (this._name) {
+          this.setAttribute('name', this._name);
+        } else {
+          this.removeAttribute('name');
+        }
+        break;
+      case 'size':
+        this._size = newVal || 'medium';
+        break;
+      case 'shape':
+        this._shape = newVal || 'circular';
+        break;
+      case 'autofocus':
+        if (newVal !== null && !this.disabled) {
+          this.focus();
+        }
+        break;
+    }
+  }
+
+  get checked() {
+    return this._checked;
+  }
+
+  set checked(val) {
+    this._checked = !!val;
+    this._setAriaChecked();
+    if (this._checked) {
+      this.setAttribute('checked', '');
+      this._uncheckSiblings();
+    } else {
+      this.removeAttribute('checked');
+    }
+  }
+
+  get disabled() {
+    return this.hasAttribute('disabled');
+  }
+
+  set disabled(val) {
+    if (val) {
+      this.setAttribute('disabled', '');
+    } else {
+      this.removeAttribute('disabled');
+    }
+  }
+
+  get required() {
+    return this.hasAttribute('required');
+  }
+
+  get value() {
+    return this._value || 'on';
+  }
+
+  set value(val) {
+    this._value = val;
+  }
+
+  get name() {
+    return this._name;
+  }
+
+  set name(val) {
+    this._name = val;
+    if (val) {
+      this.setAttribute('name', val);
+    } else {
+      this.removeAttribute('name');
+    }
+  }
+
+  get form() {
+    return this._internals.form;
+  }
+
+  get labels() {
+    return Object.freeze(Array.from(this._internals.labels));
+  }
+
+  get validity() {
+    return this._internals.validity;
+  }
+
+  get validationMessage() {
+    return this._internals.validationMessage;
+  }
+
+  get willValidate() {
+    return this._internals.willValidate;
+  }
+
+  toggleChecked(force) {
+    this._checked = typeof force === 'boolean' ? force : true;
+    this._dirtyChecked = true;
+    this._setAriaChecked();
+    if (this._checked) {
+      this.setAttribute('checked', '');
+      this._uncheckSiblings();
+    } else {
+      this.removeAttribute('checked');
+    }
+  }
+
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+
+  reportValidity() {
+    return this._internals.reportValidity();
+  }
+
+  setCustomValidity(message) {
+    this._internals.setValidity({ customError: !!message }, message);
+    this._setValidity();
+  }
+
+  _clickHandler(e) {
+    if (this.disabled || this._checked) return;
+    this._dirtyChecked = true;
+    this.toggleChecked(true);
+    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+  }
+
+  _keydownHandler(e) {
+    if (e.key === ' ') {
+      e.preventDefault();
+      this._keydownPressed = true;
+    }
+  }
+
+  _keyupHandler(e) {
+    if (!this._keydownPressed || e.key !== ' ') return;
+    this._keydownPressed = false;
+    this.click();
+  }
+
+  _updateDisabled() {
+    const d = this.hasAttribute('disabled');
+    if (d) {
+      this.removeAttribute('tabindex');
+    } else {
+      const t = this.getAttribute('tabindex');
+      this.tabIndex = Number(t ?? 0) < 0 ? -1 : 0;
+    }
+    this._internals.ariaDisabled = d ? 'true' : 'false';
+  }
+
+  _setAriaChecked() {
+    this._internals.ariaChecked = this._checked ? 'true' : 'false';
+  }
+
+  _setValidity() {
+    if (this.disabled || !this.required) {
+      this._internals.setValidity({});
+      return;
+    }
+    this._internals.setValidity(
+      { valueMissing: !!this.required && !this._checked },
+      this.validationMessage || undefined
+    );
+  }
+
+  _uncheckSiblings() {
+    if (!this.name) return;
+    const root = this.getRootNode();
+    const radios = root.querySelectorAll(`fluent-radio[name="${this.name}"]`);
+    radios.forEach(radio => {
+      if (radio !== this && radio._checked) {
+        radio._checked = false;
+        radio._setAriaChecked();
+        radio.removeAttribute('checked');
+        radio._setFormValue(null);
+      }
+    });
+  }
+
+  _setFormValue(value) {
+    this._internals.setFormValue(value, value);
+  }
+
+  formResetCallback() {
+    this._checked = this.hasAttribute('checked');
+    this._dirtyChecked = false;
+    this._setAriaChecked();
+    this._setValidity();
+  }
+}
+
+customElements.define('fluent-radio', FluentRadio);

package/components/select/fluent-select.css

@@ -0,0 +1,194 @@
+@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);
+}
+
+.root:focus-within::after {
+  transform: scaleX(1);
+  transition-property: transform;
+  transition-duration: var(--durationNormal);
+  transition-delay: var(--curveDecelerateMid);
+}
+
+.control {
+  appearance: none;
+  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;
+  outline: none;
+  cursor: pointer;
+  padding-right: 24px;
+}
+
+.control:focus-visible {
+  outline: 0;
+}
+
+.icon {
+  position: absolute;
+  right: var(--spacingHorizontalMNudge);
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--colorNeutralForeground3);
+  pointer-events: none;
+  font-size: var(--fontSizeBase500);
+}
+
+.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;
+}
+
+:host([disabled]) .root {
+  background: var(--colorTransparentBackground);
+  border: var(--strokeWidthThin) solid var(--colorNeutralStrokeDisabled);
+}
+
+:host([disabled]) .control {
+  color: var(--colorNeutralForegroundDisabled);
+  cursor: not-allowed;
+}
+
+:host([disabled]) .icon {
+  color: var(--colorNeutralForegroundDisabled);
+}
+
+: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='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([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 {
+  background: var(--colorNeutralBackground1);
+  border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
+  box-shadow: var(--shadow2);
+}
+
+:host([appearance='filled-darker']) .root {
+  background: var(--colorNeutralBackground3);
+  border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
+  box-shadow: var(--shadow2);
+}
+
+: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);
+}