fluentui-webcomponents 0.0.1

package/components/switch/fluent-switch.css

@@ -0,0 +1,154 @@
+@import url('../../tokens.css');
+
+:host { display: inline-flex; }
+
+:host([hidden]) .root {
+  display: none;
+}
+
+.root {
+  box-sizing: border-box;
+  align-items: center;
+  flex-direction: row;
+  outline: none;
+  user-select: none;
+  padding: 0 var(--spacingHorizontalXXS);
+  width: 40px;
+  height: 20px;
+  background-color: var(--colorTransparentBackground);
+  border: 1px solid var(--colorNeutralStrokeAccessible);
+  border-radius: var(--borderRadiusCircular);
+  display: inline-flex;
+  position: relative;
+}
+
+:host(:enabled) .root {
+  cursor: pointer;
+}
+
+.root:hover {
+  background: none;
+  border-color: var(--colorNeutralStrokeAccessibleHover);
+}
+
+.root:active {
+  border-color: var(--colorNeutralStrokeAccessiblePressed);
+}
+
+:host([disabled]) .root,
+:host([readonly]) .root {
+  border: 1px solid var(--colorNeutralStrokeDisabled);
+  background-color: transparent;
+  cursor: default;
+}
+
+:host([checked]) .root {
+  background: var(--colorCompoundBrandBackground);
+  border-color: var(--colorCompoundBrandBackground);
+}
+
+:host([checked]) .root:hover {
+  background: var(--colorCompoundBrandBackgroundHover);
+  border-color: var(--colorCompoundBrandBackgroundHover);
+}
+
+:host([checked]) .root:active {
+  background: var(--colorCompoundBrandBackgroundPressed);
+  border-color: var(--colorCompoundBrandBackgroundPressed);
+}
+
+:host([checked][disabled]) .root {
+  background: var(--colorNeutralBackgroundDisabled);
+  border-color: var(--colorNeutralStrokeDisabled);
+}
+
+.checked-indicator {
+  height: 14px;
+  width: 14px;
+  border-radius: 50%;
+  margin: auto 0 auto 0;
+  background-color: var(--colorNeutralForeground3);
+  transition-duration: var(--durationNormal);
+  transition-timing-function: var(--curveEasyEase);
+  transition-property: margin-left, margin-right;
+  display: block;
+  flex-shrink: 0;
+}
+
+:host([checked]) .root .checked-indicator {
+  background-color: var(--colorNeutralForegroundInverted);
+  margin-left: calc(100% - 14px);
+  margin-right: 0;
+}
+
+:host([checked]) .root:hover .checked-indicator {
+  background: var(--colorNeutralForegroundInvertedHover);
+}
+
+:host([checked]) .root:active .checked-indicator {
+  background: var(--colorNeutralForegroundInvertedPressed);
+}
+
+.root:hover .checked-indicator {
+  background-color: var(--colorNeutralForeground3Hover);
+}
+
+.root:active .checked-indicator {
+  background-color: var(--colorNeutralForeground3Pressed);
+}
+
+:host([disabled]) .root .checked-indicator,
+:host([readonly]) .root .checked-indicator {
+  background: var(--colorNeutralForegroundDisabled);
+}
+
+:host([checked][disabled]) .root .checked-indicator {
+  background: var(--colorNeutralForegroundDisabled);
+}
+
+.root:focus-visible {
+  outline: none;
+}
+
+:host(:not([slot='input'])) .root:focus-visible {
+  border-color: var(--colorTransparentStroke);
+  outline: var(--strokeWidthThick) solid var(--colorTransparentStroke);
+  outline-offset: 1px;
+  box-shadow: var(--shadow4), 0 0 0 2px var(--colorStrokeFocus2);
+}
+
+@media (forced-colors: active) {
+  .root {
+    border-color: InactiveBorder;
+  }
+
+  :host([checked]) .root,
+  :host([checked]) .root:active,
+  :host([checked]) .root:hover {
+    background: Highlight;
+    border-color: Highlight;
+  }
+
+  .checked-indicator,
+  .root:hover .checked-indicator,
+  .root:active .checked-indicator {
+    background-color: ActiveCaption;
+  }
+
+  :host([checked]) .root .checked-indicator,
+  :host([checked]) .root:hover .checked-indicator,
+  :host([checked]) .root:active .checked-indicator {
+    background-color: ButtonFace;
+  }
+
+  :host([disabled]) .root .checked-indicator,
+  :host([checked][disabled]) .root .checked-indicator {
+    background-color: GrayText;
+  }
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  .checked-indicator {
+    transition-duration: 0.01ms;
+  }
+}

package/components/switch/fluent-switch.js

@@ -0,0 +1,260 @@
+import { FluentElement } from '../../core/fluent-element.js';
+
+const stylesUrl = new URL('./fluent-switch.css', import.meta.url).href;
+
+class FluentSwitch extends FluentElement {
+  static stylesUrl = stylesUrl;
+  static formAssociated = true;
+
+  static template = `
+    <div class="root">
+      <slot name="switch">
+        <span class="checked-indicator" part="checked-indicator"></span>
+      </slot>
+    </div>
+  `;
+
+  static get observedAttributes() {
+    return ['checked', 'disabled', 'required', 'value', 'name', 'label-position', 'autofocus', 'size', 'shape'];
+  }
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this._internals.role = 'switch';
+    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();
+        }
+        break;
+      case 'disabled':
+        this._updateDisabled();
+        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 'label-position':
+        break;
+      case 'autofocus':
+        if (newVal !== null && !this.disabled) {
+          this.focus();
+        }
+        break;
+      case 'size':
+        this._size = newVal || 'medium';
+        break;
+      case 'shape':
+        this._shape = newVal || 'circular';
+        break;
+    }
+  }
+
+  get checked() {
+    return this._checked;
+  }
+
+  set checked(val) {
+    this._checked = !!val;
+    this._setAriaChecked();
+    this._setFormValue(this._checked ? this._value : null);
+    this._setValidity();
+    if (this._checked) {
+      this.setAttribute('checked', '');
+    } 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;
+    if (this._checked) {
+      this._setFormValue(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() {
+    if (this._internals.validationMessage) {
+      return this._internals.validationMessage;
+    }
+    if (!this._validationFallbackMessage) {
+      const el = document.createElement('input');
+      el.type = 'checkbox';
+      el.required = true;
+      el.checked = false;
+      this._validationFallbackMessage = el.validationMessage;
+    }
+    return this._validationFallbackMessage;
+  }
+
+  get willValidate() {
+    return this._internals.willValidate;
+  }
+
+  toggleChecked(force) {
+    this._checked = typeof force === 'boolean' ? force : !this._checked;
+    this._dirtyChecked = true;
+    this._setAriaChecked();
+    this._setFormValue(this._checked ? this._value : null);
+    this._setValidity();
+    if (this._checked) {
+      this.setAttribute('checked', '');
+    } 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) return;
+    this._dirtyChecked = true;
+    const prev = this._checked;
+    this.toggleChecked();
+    if (prev !== this._checked) {
+      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';
+  }
+
+  _setFormValue(value) {
+    this._internals.setFormValue(value, value);
+  }
+
+  _setValidity() {
+    if (this.disabled || !this.required) {
+      this._internals.setValidity({});
+      return;
+    }
+    const msg = this.validationMessage;
+    this._internals.setValidity(
+      { valueMissing: !!this.required && !this._checked },
+      msg || undefined
+    );
+  }
+
+  formResetCallback() {
+    this._checked = this.hasAttribute('checked');
+    this._dirtyChecked = false;
+    this._setAriaChecked();
+    this._setValidity();
+  }
+}
+
+customElements.define('fluent-switch', FluentSwitch);

package/components/text/fluent-text.css

@@ -0,0 +1,128 @@
+@import url('../../tokens.css');
+
+:host { display: inline; }
+
+.root {
+  display: inline;
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase300);
+  line-height: var(--lineHeightBase300);
+  font-weight: var(--fontWeightRegular);
+  text-align: start;
+}
+
+:host([nowrap]) .root,
+:host([nowrap]) .root ::slotted(*) {
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+:host([truncate]) .root,
+:host([truncate]) .root ::slotted(*) {
+  text-overflow: ellipsis;
+}
+
+:host([block]) .root {
+  display: block;
+}
+
+:host([italic]) .root {
+  font-style: italic;
+}
+
+:host([underline]) .root {
+  text-decoration-line: underline;
+}
+
+:host([strikethrough]) .root {
+  text-decoration-line: line-through;
+}
+
+:host([underline][strikethrough]) .root {
+  text-decoration-line: line-through underline;
+}
+
+:host([size='100']) .root {
+  font-size: var(--fontSizeBase100);
+  line-height: var(--lineHeightBase100);
+}
+
+:host([size='200']) .root {
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+}
+
+:host([size='400']) .root {
+  font-size: var(--fontSizeBase400);
+  line-height: var(--lineHeightBase400);
+}
+
+:host([size='500']) .root {
+  font-size: var(--fontSizeBase500);
+  line-height: var(--lineHeightBase500);
+}
+
+:host([size='600']) .root {
+  font-size: var(--fontSizeBase600);
+  line-height: var(--lineHeightBase600);
+}
+
+:host([size='700']) .root {
+  font-size: var(--fontSizeBase700);
+  line-height: var(--lineHeightBase700);
+}
+
+:host([size='800']) .root {
+  font-size: var(--fontSizeBase800);
+  line-height: var(--lineHeightBase800);
+}
+
+:host([size='900']) .root {
+  font-size: var(--fontSizeBase900);
+  line-height: var(--lineHeightBase900);
+}
+
+:host([size='1000']) .root {
+  font-size: var(--fontSizeBase1000);
+  line-height: var(--lineHeightBase1000);
+}
+
+:host([font='monospace']) .root {
+  font-family: var(--fontFamilyMonospace);
+}
+
+:host([font='numeric']) .root {
+  font-family: var(--fontFamilyNumeric);
+}
+
+:host([weight='medium']) .root {
+  font-weight: var(--fontWeightMedium);
+}
+
+:host([weight='semibold']) .root {
+  font-weight: var(--fontWeightSemibold);
+}
+
+:host([weight='bold']) .root {
+  font-weight: var(--fontWeightBold);
+}
+
+:host([align='center']) .root {
+  text-align: center;
+}
+
+:host([align='end']) .root {
+  text-align: end;
+}
+
+:host([align='justify']) .root {
+  text-align: justify;
+}
+
+::slotted(*) {
+  font: inherit;
+  line-height: inherit;
+  text-decoration-line: inherit;
+  text-align: inherit;
+  margin: 0;
+}

package/components/text/fluent-text.js

@@ -0,0 +1,21 @@
+import { FluentElement } from '../../core/fluent-element.js';
+
+const stylesUrl = new URL('./fluent-text.css', import.meta.url).href;
+
+class FluentText extends FluentElement {
+  static stylesUrl = stylesUrl;
+  static template = `<div class="root"><slot></slot></div>`;
+
+  static formAssociated = true;
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+  }
+
+  static get observedAttributes() {
+    return ['size', 'weight', 'font', 'align', 'nowrap', 'truncate', 'italic', 'underline', 'strikethrough', 'block'];
+  }
+}
+
+customElements.define('fluent-text', FluentText);