fluentui-webcomponents 0.0.1

package/components/button/fluent-button.css

@@ -0,0 +1,265 @@
+@import url('../../tokens.css');
+
+:host { display: inline-flex; }
+
+.root {
+  --icon-spacing: var(--spacingHorizontalSNudge);
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+  align-items: center;
+  box-sizing: border-box;
+  justify-content: center;
+  text-align: center;
+  text-decoration-line: none;
+  margin: 0;
+  min-height: 32px;
+  outline-style: none;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
+  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
+  padding: 0 var(--spacingHorizontalM);
+  min-width: 96px;
+  border-radius: var(--borderRadiusMedium);
+  font-size: var(--fontSizeBase300);
+  font-family: var(--fontFamilyBase);
+  font-weight: var(--fontWeightSemibold);
+  line-height: var(--lineHeightBase300);
+  transition-duration: var(--durationFaster);
+  transition-property: background, border, color;
+  transition-timing-function: var(--curveEasyEase);
+  cursor: pointer;
+  user-select: none;
+}
+
+.content {
+  display: inherit;
+}
+
+.root:hover {
+  background-color: var(--colorNeutralBackground1Hover);
+  color: var(--colorNeutralForeground1Hover);
+  border-color: var(--colorNeutralStroke1Hover);
+}
+
+.root:hover:active {
+  background-color: var(--colorNeutralBackground1Pressed);
+  border-color: var(--colorNeutralStroke1Pressed);
+  color: var(--colorNeutralForeground1Pressed);
+  outline-style: none;
+}
+
+.root:focus-visible {
+  border-color: var(--colorTransparentStroke);
+  outline: var(--strokeWidthThick) solid var(--colorTransparentStroke);
+  box-shadow: var(--shadow4), 0 0 0 2px var(--colorStrokeFocus2);
+}
+
+::slotted(svg) {
+  font-size: 20px;
+  height: 20px;
+  width: 20px;
+  fill: currentColor;
+}
+
+::slotted([slot='start']) {
+  margin-inline-end: var(--icon-spacing);
+}
+
+::slotted([slot='end']),
+[slot='end'] {
+  flex-shrink: 0;
+  margin-inline-start: var(--icon-spacing);
+}
+
+:host([icon-only]) .root {
+  min-width: 32px;
+  max-width: 32px;
+}
+
+:host([size='small']) .root {
+  --icon-spacing: var(--spacingHorizontalXS);
+  min-height: 24px;
+  min-width: 64px;
+  padding: 0 var(--spacingHorizontalS);
+  border-radius: var(--borderRadiusSmall);
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+  font-weight: var(--fontWeightRegular);
+}
+
+:host([size='small'][icon-only]) .root {
+  min-width: 24px;
+  max-width: 24px;
+}
+
+:host([size='large']) .root {
+  min-height: 40px;
+  border-radius: var(--borderRadiusLarge);
+  padding: 0 var(--spacingHorizontalL);
+  font-size: var(--fontSizeBase400);
+  line-height: var(--lineHeightBase400);
+}
+
+:host([size='large'][icon-only]) .root {
+  min-width: 40px;
+  max-width: 40px;
+}
+
+:host([size='large']) ::slotted(svg) {
+  font-size: 24px;
+  height: 24px;
+  width: 24px;
+}
+
+:host(:is([shape='circular'], [shape='circular']:focus-visible)) .root {
+  border-radius: var(--borderRadiusCircular);
+}
+
+:host(:is([shape='square'], [shape='square']:focus-visible)) .root {
+  border-radius: var(--borderRadiusNone);
+}
+
+:host([appearance='primary']) .root {
+  background-color: var(--colorBrandBackground);
+  color: var(--colorNeutralForegroundOnBrand);
+  border-color: transparent;
+}
+
+:host([appearance='primary']) .root:hover {
+  background-color: var(--colorBrandBackgroundHover);
+}
+
+:host([appearance='primary']) .root:is(:hover, :hover:active):not(:focus-visible) {
+  border-color: transparent;
+}
+
+:host([appearance='primary']) .root:is(:hover, :hover:active) {
+  color: var(--colorNeutralForegroundOnBrand);
+}
+
+:host([appearance='primary']) .root:hover:active {
+  background-color: var(--colorBrandBackgroundPressed);
+}
+
+:host([appearance='primary']) .root:focus-visible {
+  border-color: var(--colorNeutralForegroundOnBrand);
+  box-shadow: var(--shadow2), 0 0 0 2px var(--colorStrokeFocus2);
+}
+
+:host([appearance='outline']) .root {
+  background-color: var(--colorTransparentBackground);
+}
+
+:host([appearance='outline']) .root:hover {
+  background-color: var(--colorTransparentBackgroundHover);
+}
+
+:host([appearance='outline']) .root:hover:active {
+  background-color: var(--colorTransparentBackgroundPressed);
+}
+
+:host([appearance='subtle']) .root {
+  background-color: var(--colorSubtleBackground);
+  color: var(--colorNeutralForeground2);
+  border-color: transparent;
+}
+
+:host([appearance='subtle']) .root:hover {
+  background-color: var(--colorSubtleBackgroundHover);
+  color: var(--colorNeutralForeground2Hover);
+  border-color: transparent;
+}
+
+:host([appearance='subtle']) .root:hover:active {
+  background-color: var(--colorSubtleBackgroundPressed);
+  color: var(--colorNeutralForeground2Pressed);
+  border-color: transparent;
+}
+
+:host([appearance='subtle']) .root:hover ::slotted(svg) {
+  fill: var(--colorNeutralForeground2BrandHover);
+}
+
+:host([appearance='subtle']) .root:hover:active ::slotted(svg) {
+  fill: var(--colorNeutralForeground2BrandPressed);
+}
+
+:host([appearance='transparent']) .root {
+  background-color: var(--colorTransparentBackground);
+  color: var(--colorNeutralForeground2);
+}
+
+:host([appearance='transparent']) .root:hover {
+  background-color: var(--colorTransparentBackgroundHover);
+  color: var(--colorNeutralForeground2BrandHover);
+}
+
+:host([appearance='transparent']) .root:hover:active {
+  background-color: var(--colorTransparentBackgroundPressed);
+  color: var(--colorNeutralForeground2BrandPressed);
+}
+
+:host(:is([appearance='transparent'], [appearance='transparent']:is(:hover, :active))) .root {
+  border-color: transparent;
+}
+
+:host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable])) .root,
+:host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable])) .root:hover,
+:host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable])) .root:hover:active {
+  background-color: var(--colorNeutralBackgroundDisabled);
+  border-color: var(--colorNeutralStrokeDisabled);
+  color: var(--colorNeutralForegroundDisabled);
+  cursor: not-allowed;
+}
+
+:host([appearance='primary']:is(:disabled, [disabled-focusable])) .root,
+:host([appearance='primary']:is(:disabled, [disabled-focusable])) .root:is(:hover, :hover:active) {
+  border-color: transparent;
+}
+
+:host([appearance='outline']:is(:disabled, [disabled-focusable])) .root,
+:host([appearance='outline']:is(:disabled, [disabled-focusable])) .root:is(:hover, :hover:active) {
+  background-color: var(--colorTransparentBackground);
+}
+
+:host([appearance='subtle']:is(:disabled, [disabled-focusable])) .root,
+:host([appearance='subtle']:is(:disabled, [disabled-focusable])) .root:is(:hover, :hover:active) {
+  background-color: var(--colorTransparentBackground);
+  border-color: transparent;
+}
+
+:host([appearance='transparent']:is(:disabled, [disabled-focusable])) .root,
+:host([appearance='transparent']:is(:disabled, [disabled-focusable])) .root:is(:hover, :hover:active) {
+  border-color: transparent;
+  background-color: var(--colorTransparentBackground);
+}
+
+@media (forced-colors: active) {
+  .root {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+
+  .root:is(:hover, :focus-visible) {
+    border-color: Highlight !important;
+  }
+
+  :host([appearance='primary']) .root:not(:is(:hover, :focus-visible)) {
+    background-color: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+
+  :host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable])) .root {
+    background-color: ButtonFace;
+    color: GrayText;
+    border-color: ButtonText;
+  }
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  .root {
+    transition-duration: 0.01ms;
+  }
+}

package/components/button/fluent-button.js

@@ -0,0 +1,326 @@
+import { FluentElement } from '../../core/fluent-element.js';
+
+const stylesUrl = new URL('./fluent-button.css', import.meta.url).href;
+
+const ButtonType = {
+  submit: 'submit',
+  reset: 'reset',
+  button: 'button',
+};
+
+class FluentButton extends FluentElement {
+  static formAssociated = true;
+  static stylesUrl = stylesUrl;
+  static template = `
+    <div class="root" part="content">
+      <slot name="start"></slot>
+      <slot></slot>
+      <slot name="end"></slot>
+      <slot name="internal"></slot>
+    </div>
+  `;
+
+  static get observedAttributes() {
+    return ['disabled', 'appearance', 'shape', 'size', 'icon-only', 'disabled-focusable', 'autofocus',
+      'type', 'name', 'value', 'form', 'formaction', 'formenctype', 'formmethod', 'formnovalidate', 'formtarget'];
+  }
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this._internals.role = 'button';
+    this._type = 'submit';
+    this._name = '';
+    this._value = '';
+    this._disabled = false;
+    this._disabledFocusable = false;
+    this._autofocus = false;
+    this._formAction = '';
+    this._formEnctype = '';
+    this._formMethod = '';
+    this._formNoValidate = false;
+    this._formTarget = '';
+    this._formId = '';
+    this._formSubmissionFallback = null;
+
+    this._boundKeydown = this._handleKeydown.bind(this);
+    this._boundClick = this._handleClick.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._root.addEventListener('keydown', this._boundKeydown);
+    this._root.addEventListener('click', this._boundClick);
+    this._updateTabIndex();
+    this._updateAriaDisabled();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._root.removeEventListener('keydown', this._boundKeydown);
+    this._root.removeEventListener('click', this._boundClick);
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) return;
+
+    switch (name) {
+      case 'disabled':
+        this._disabled = this.hasAttribute('disabled');
+        this._updateTabIndex();
+        break;
+      case 'disabled-focusable':
+        this._disabledFocusable = this.hasAttribute('disabled-focusable');
+        this._updateAriaDisabled();
+        this._updateTabIndex();
+        break;
+      case 'autofocus':
+        this._autofocus = this.hasAttribute('autofocus');
+        break;
+      case 'type':
+        this._type = newVal || 'submit';
+        this._removeFallbackControl();
+        break;
+      case 'name':
+        this._name = newVal || '';
+        this._updateFallbackControlName();
+        break;
+      case 'value':
+        this._value = newVal || '';
+        this._updateFallbackControlValue();
+        break;
+      case 'form':
+        this._formId = newVal || '';
+        this._updateFallbackControlForm();
+        break;
+      case 'formaction':
+        this._formAction = newVal || '';
+        this._updateFallbackControlFormAction();
+        break;
+      case 'formenctype':
+        this._formEnctype = newVal || '';
+        this._updateFallbackControlEnctype();
+        break;
+      case 'formmethod':
+        this._formMethod = newVal || '';
+        this._updateFallbackControlMethod();
+        break;
+      case 'formnovalidate':
+        this._formNoValidate = this.hasAttribute('formnovalidate');
+        this._updateFallbackControlNoValidate();
+        break;
+      case 'formtarget':
+        this._formTarget = newVal || '';
+        this._updateFallbackControlTarget();
+        break;
+      default:
+        super.attributeChangedCallback(name, oldVal, newVal);
+    }
+  }
+
+  get type() { return this._type; }
+  set type(val) { this.setAttribute('type', val); }
+
+  get name() { return this._name; }
+  set name(val) { this.setAttribute('name', val); }
+
+  get value() { return this._value; }
+  set value(val) { this.setAttribute('value', val); }
+
+  get form() { return this._internals.form; }
+
+  get labels() { return Object.freeze(Array.from(this._internals.labels)); }
+
+  formDisabledCallback(disabled) {
+    if (disabled) {
+      this.setAttribute('disabled', '');
+    } else {
+      this.removeAttribute('disabled');
+    }
+  }
+
+  _handleKeydown(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      if (!this._disabled || this._disabledFocusable) {
+        this._root.click();
+      }
+    }
+  }
+
+  _handleClick(e) {
+    if (this._disabled && !this._disabledFocusable) {
+      e.stopImmediatePropagation();
+      return;
+    }
+
+    if (this._type === ButtonType.submit) {
+      this._submitForm();
+    } else if (this._type === ButtonType.reset) {
+      this._resetForm();
+    }
+  }
+
+  _submitForm() {
+    const form = this._internals.form;
+    if (!form || this._disabled) return;
+
+    const hasOverrides = this._name || this._formAction || this._formEnctype ||
+      this._formMethod || this._formNoValidate || this._formTarget || this._formId;
+
+    if (!hasOverrides) {
+      form.requestSubmit();
+      return;
+    }
+
+    try {
+      this._internals.setFormValue(this._value || '');
+      form.requestSubmit(this);
+    } catch (err) {
+      this._createFallbackControl();
+      this._internals.setFormValue(null);
+      form.requestSubmit(this._formSubmissionFallback);
+    }
+  }
+
+  _resetForm() {
+    this._internals.form?.reset();
+  }
+
+  _updateTabIndex() {
+    if (this._disabled && !this._disabledFocusable) {
+      this.removeAttribute('tabindex');
+    } else {
+      const authorTabindex = this.getAttribute('tabindex');
+      if (authorTabindex !== null && Number(authorTabindex) < 0) {
+        this.tabIndex = -1;
+      } else {
+        this.tabIndex = 0;
+      }
+    }
+  }
+
+  _updateAriaDisabled() {
+    this._internals.ariaDisabled = this._disabledFocusable ? 'true' : 'false';
+  }
+
+  _needsFallbackControl() {
+    return !!(this._name || this._formAction || this._formEnctype ||
+      this._formMethod || this._formNoValidate || this._formTarget || this._formId);
+  }
+
+  _createFallbackControl() {
+    if (this._formSubmissionFallback) return;
+
+    const fallback = document.createElement('button');
+    fallback.style.display = 'none';
+    fallback.type = 'submit';
+    fallback.setAttribute('slot', 'internal');
+
+    this._updateFallbackControlAttributes(fallback);
+    this._root.appendChild(fallback);
+    this._formSubmissionFallback = fallback;
+  }
+
+  _removeFallbackControl() {
+    if (this._type !== ButtonType.submit) {
+      if (this._formSubmissionFallback) {
+        this._formSubmissionFallback.remove();
+        this._formSubmissionFallback = null;
+      }
+      const internalSlot = this._root.querySelector('slot[name="internal"]');
+      if (internalSlot) internalSlot.remove();
+    }
+  }
+
+  _updateFallbackControlName() {
+    if (this._formSubmissionFallback) {
+      if (this._name) {
+        this._formSubmissionFallback.setAttribute('name', this._name);
+      } else {
+        this._formSubmissionFallback.removeAttribute('name');
+      }
+    }
+  }
+
+  _updateFallbackControlValue() {
+    if (this._formSubmissionFallback) {
+      if (this._value) {
+        this._formSubmissionFallback.setAttribute('value', this._value);
+      } else {
+        this._formSubmissionFallback.removeAttribute('value');
+      }
+    }
+  }
+
+  _updateFallbackControlForm() {
+    if (this._formSubmissionFallback && this._formId) {
+      this._formSubmissionFallback.setAttribute('form', this._formId);
+    } else if (this._formSubmissionFallback) {
+      this._formSubmissionFallback.removeAttribute('form');
+    }
+  }
+
+  _updateFallbackControlFormAction() {
+    if (this._formSubmissionFallback) {
+      if (this._formAction) {
+        this._formSubmissionFallback.setAttribute('formaction', this._formAction);
+      } else {
+        this._formSubmissionFallback.removeAttribute('formaction');
+      }
+    }
+  }
+
+  _updateFallbackControlEnctype() {
+    if (this._formSubmissionFallback) {
+      if (this._formEnctype) {
+        this._formSubmissionFallback.setAttribute('formenctype', this._formEnctype);
+      } else {
+        this._formSubmissionFallback.removeAttribute('formenctype');
+      }
+    }
+  }
+
+  _updateFallbackControlMethod() {
+    if (this._formSubmissionFallback) {
+      if (this._formMethod) {
+        this._formSubmissionFallback.setAttribute('formmethod', this._formMethod);
+      } else {
+        this._formSubmissionFallback.removeAttribute('formmethod');
+      }
+    }
+  }
+
+  _updateFallbackControlNoValidate() {
+    if (this._formSubmissionFallback) {
+      if (this._formNoValidate) {
+        this._formSubmissionFallback.setAttribute('formnovalidate', '');
+      } else {
+        this._formSubmissionFallback.removeAttribute('formnovalidate');
+      }
+    }
+  }
+
+  _updateFallbackControlTarget() {
+    if (this._formSubmissionFallback) {
+      if (this._formTarget) {
+        this._formSubmissionFallback.setAttribute('formtarget', this._formTarget);
+      } else {
+        this._formSubmissionFallback.removeAttribute('formtarget');
+      }
+    }
+  }
+
+  _updateFallbackControlAttributes(fallback) {
+    if (this._name) fallback.setAttribute('name', this._name);
+    if (this._value) fallback.setAttribute('value', this._value);
+    if (this._formId) fallback.setAttribute('form', this._formId);
+    if (this._formAction) fallback.setAttribute('formaction', this._formAction);
+    if (this._formEnctype) fallback.setAttribute('formenctype', this._formEnctype);
+    if (this._formMethod) fallback.setAttribute('formmethod', this._formMethod);
+    if (this._formNoValidate) fallback.setAttribute('formnovalidate', '');
+    if (this._formTarget) fallback.setAttribute('formtarget', this._formTarget);
+  }
+}
+
+customElements.define('fluent-button', FluentButton);

package/components/card/fluent-card.css

@@ -0,0 +1,85 @@
+@import url('../../tokens.css');
+
+:host { display: block; }
+
+.root {
+  display: block;
+  box-sizing: border-box;
+  background-color: var(--colorNeutralBackground1);
+  border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
+  border-radius: var(--borderRadiusXLarge);
+  color: var(--colorNeutralForeground1);
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase300);
+  line-height: var(--lineHeightBase300);
+  padding: var(--spacingVerticalL) var(--spacingHorizontalL);
+  overflow: hidden;
+  position: relative;
+}
+
+:host([appearance='filled-alternative']) .root {
+  background-color: var(--colorNeutralBackground2);
+  border-color: transparent;
+}
+
+:host([appearance='filled-alternative']) .root:hover {
+  background-color: var(--colorNeutralBackground2Hover);
+}
+
+:host([appearance='outline']) .root {
+  background-color: var(--colorTransparentBackground);
+}
+
+:host([appearance='outline']) .root:hover {
+  background-color: var(--colorTransparentBackgroundHover);
+}
+
+:host([appearance='subtle']) .root {
+  background-color: var(--colorSubtleBackground);
+  border-color: transparent;
+}
+
+:host([appearance='subtle']) .root:hover {
+  background-color: var(--colorSubtleBackgroundHover);
+}
+
+:host([size='small']) .root {
+  padding: var(--spacingVerticalM) var(--spacingHorizontalM);
+  border-radius: var(--borderRadiusLarge);
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+}
+
+:host([size='large']) .root {
+  padding: var(--spacingVerticalXL) var(--spacingHorizontalXL);
+  font-size: var(--fontSizeBase400);
+  line-height: var(--lineHeightBase400);
+}
+
+::slotted([slot='preview']) {
+  margin: calc(-1 * var(--spacingVerticalL)) calc(-1 * var(--spacingHorizontalL)) var(--spacingVerticalL);
+  width: calc(100% + 2 * var(--spacingHorizontalL));
+  display: block;
+}
+
+::slotted([slot='header']) {
+  margin-bottom: var(--spacingVerticalM);
+}
+
+::slotted([slot='footer']) {
+  margin-top: var(--spacingVerticalM);
+  padding-top: var(--spacingVerticalM);
+  border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
+}
+
+@media (forced-colors: active) {
+  .root {
+    border-color: ButtonText;
+  }
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  .root {
+    transition-duration: 0.01ms;
+  }
+}

package/components/card/fluent-card.js

@@ -0,0 +1,21 @@
+import { FluentElement } from '../../core/fluent-element.js';
+
+const stylesUrl = new URL('./fluent-card.css', import.meta.url).href;
+
+class FluentCard extends FluentElement {
+  static stylesUrl = stylesUrl;
+  static template = `
+    <div class="root">
+      <slot name="preview"></slot>
+      <slot name="header"></slot>
+      <slot></slot>
+      <slot name="footer"></slot>
+    </div>
+  `;
+
+  static get observedAttributes() {
+    return ['appearance', 'size'];
+  }
+}
+
+customElements.define('fluent-card', FluentCard);