fluentui-webcomponents 0.0.1

package/components/checkbox/fluent-checkbox.css

@@ -0,0 +1,171 @@
+@import url('../../tokens.css');
+
+:host { display: inline-flex; }
+
+:host([hidden]) .root {
+  display: none;
+}
+
+.root {
+  --size: 16px;
+  background-color: var(--colorNeutralBackground1);
+  border-radius: var(--borderRadiusSmall);
+  border: var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);
+  box-sizing: border-box;
+  cursor: pointer;
+  position: relative;
+  width: var(--size);
+  aspect-ratio: 1;
+  display: inline-flex;
+}
+
+.root:hover {
+  border-color: var(--colorNeutralStrokeAccessibleHover);
+}
+
+.root:active {
+  border-color: var(--colorNeutralStrokeAccessiblePressed);
+}
+
+:host([checked]) .root:hover {
+  background-color: var(--colorCompoundBrandBackgroundHover);
+  border-color: var(--colorCompoundBrandStrokeHover);
+}
+
+:host([checked]) .root:active {
+  background-color: var(--colorCompoundBrandBackgroundPressed);
+  border-color: var(--colorCompoundBrandStrokePressed);
+}
+
+.root:focus-visible {
+  outline: none;
+}
+
+:host(:not([slot='input'])) .root::after {
+  content: '';
+  position: absolute;
+  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);
+}
+
+.indeterminate-indicator,
+.checked-indicator {
+  color: var(--colorNeutralForegroundInverted);
+  inset: 0;
+  margin: auto;
+  position: absolute;
+  aspect-ratio: 1;
+}
+
+::slotted([slot='checked-indicator']),
+.checked-indicator {
+  fill: currentColor;
+  display: inline-flex;
+  flex: 1 0 auto;
+  width: 12px;
+}
+
+:host(:not([checked])) .root ::slotted([slot='checked-indicator']),
+:host(:not([checked])) .root .checked-indicator {
+  display: none;
+}
+
+:host([checked]) .root,
+:host([indeterminate]) .root {
+  border-color: var(--colorCompoundBrandStroke);
+}
+
+:host([checked]) .root,
+:host([indeterminate]) .root .indeterminate-indicator {
+  background-color: var(--colorCompoundBrandBackground);
+}
+
+:host([indeterminate]) .root .indeterminate-indicator {
+  border-radius: var(--borderRadiusSmall);
+  position: absolute;
+  width: calc(var(--size) / 2);
+  inset: 0;
+}
+
+:host([size='large']) .root {
+  --size: 20px;
+}
+
+:host([size='large']) .root ::slotted([slot='checked-indicator']),
+:host([size='large']) .root .checked-indicator {
+  width: 16px;
+}
+
+:host([shape='circular']) .root,
+:host([shape='circular']) .root .indeterminate-indicator {
+  border-radius: var(--borderRadiusCircular);
+}
+
+:host([disabled]) .root,
+:host([disabled][checked]) .root {
+  background-color: var(--colorNeutralBackgroundDisabled);
+  border-color: var(--colorNeutralStrokeDisabled);
+}
+
+:host([disabled]) .root {
+  cursor: unset;
+}
+
+:host([disabled][indeterminate]) .root .indeterminate-indicator {
+  background-color: var(--colorNeutralStrokeDisabled);
+}
+
+:host([disabled][checked]) .root .checked-indicator {
+  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([checked]:not([disabled])) .root:hover,
+  :host(:not([slot='input'])) .root:focus-visible::after {
+    border-color: Highlight;
+  }
+
+  .indeterminate-indicator,
+  .checked-indicator {
+    color: HighlightText;
+  }
+
+  :host([checked]) .root,
+  :host([indeterminate]) .root .indeterminate-indicator {
+    background-color: FieldText;
+  }
+
+  :host([checked]:not([disabled])) .root:hover,
+  :host([indeterminate]:not([disabled])) .root:hover .indeterminate-indicator {
+    background-color: Highlight;
+  }
+
+  :host([disabled]) .root {
+    border-color: GrayText;
+  }
+
+  :host([disabled][indeterminate]) .root .indeterminate-indicator {
+    background-color: GrayText;
+  }
+
+  :host([disabled]) .root,
+  :host([disabled][checked]) .root .checked-indicator {
+    color: GrayText;
+  }
+}

package/components/checkbox/fluent-checkbox.js

@@ -0,0 +1,294 @@
+import { FluentElement } from '../../core/fluent-element.js';
+
+const stylesUrl = new URL('./fluent-checkbox.css', import.meta.url).href;
+
+class FluentCheckbox extends FluentElement {
+  static stylesUrl = stylesUrl;
+  static formAssociated = true;
+
+  static template = `
+    <div class="root">
+      <slot name="checked-indicator">
+        <svg fill="currentColor" aria-hidden="true" class="checked-indicator" width="1em" height="1em" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+          <path d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z" fill="currentColor"></path>
+        </svg>
+      </slot>
+      <slot name="indeterminate-indicator">
+        <span class="indeterminate-indicator"></span>
+      </slot>
+    </div>
+  `;
+
+  static get observedAttributes() {
+    return ['checked', 'disabled', 'required', 'value', 'name', 'size', 'shape', 'autofocus', 'indeterminate'];
+  }
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this._internals.role = 'checkbox';
+    this._checked = false;
+    this._dirtyChecked = false;
+    this._keydownPressed = false;
+    this._indeterminate = false;
+    this._value = 'on';
+    this._name = '';
+    this._size = 'medium';
+    this._shape = 'square';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._shadowRoot = this._root;
+    this._updateDisabled();
+    this._setAriaChecked();
+    this._setValidity();
+    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();
+          this._setValidity();
+        }
+        break;
+      case 'disabled':
+        this._updateDisabled();
+        break;
+      case 'indeterminate':
+        this._indeterminate = newVal !== null;
+        this._setAriaChecked();
+        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 'autofocus':
+        if (newVal !== null && !this.disabled) {
+          this.focus();
+        }
+        break;
+      case 'size':
+        this._size = newVal || 'medium';
+        break;
+      case 'shape':
+        this._shape = newVal || 'square';
+        break;
+    }
+  }
+
+  get checked() {
+    return this._checked;
+  }
+
+  set checked(val) {
+    this._checked = !!val;
+    this._setFormValue(this._checked ? this._value : null);
+    this._setAriaChecked();
+    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 indeterminate() {
+    return this.hasAttribute('indeterminate');
+  }
+
+  set indeterminate(val) {
+    if (val) {
+      this.setAttribute('indeterminate', '');
+    } else {
+      this.removeAttribute('indeterminate');
+    }
+    this._setAriaChecked();
+  }
+
+  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.indeterminate = false;
+    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() {
+    if (this.indeterminate) {
+      this._internals.ariaChecked = 'mixed';
+    } else {
+      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() {
+    const wasIndeterminate = this._indeterminate;
+    this._checked = this.hasAttribute('checked');
+    this._dirtyChecked = false;
+    if (wasIndeterminate) {
+      this._indeterminate = false;
+      this.removeAttribute('indeterminate');
+    }
+    this._setAriaChecked();
+    this._setValidity();
+  }
+}
+
+customElements.define('fluent-checkbox', FluentCheckbox);

package/components/dialog/fluent-dialog.css

@@ -0,0 +1,82 @@
+@import url('../../tokens.css');
+
+:host {
+  --dialog-backdrop: rgba(0, 0, 0, 0.4);
+  --dialog-starting-scale: 0.85;
+  display: none;
+}
+
+:host([open]) {
+  display: block;
+}
+
+::backdrop {
+  background: var(--dialog-backdrop);
+}
+
+dialog {
+  background: var(--colorNeutralBackground1);
+  border-radius: var(--borderRadiusXLarge);
+  border: none;
+  box-shadow: var(--shadow64);
+  color: var(--colorNeutralForeground1);
+  max-height: 100vh;
+  padding: 0;
+  width: 100%;
+  max-width: 600px;
+}
+
+:host([type='non-modal']) .root dialog {
+  inset: 0;
+  position: fixed;
+  z-index: 2;
+  overflow: auto;
+}
+
+@supports (max-height: 1dvh) {
+  dialog {
+    max-height: 100dvh;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  dialog,
+  ::backdrop {
+    transition-behavior: allow-discrete;
+    transition-property: display, opacity, overlay, scale;
+    transition-duration: var(--durationGentle);
+    transition-timing-function: var(--curveDecelerateMid);
+    opacity: 0;
+  }
+
+  ::backdrop {
+    transition-timing-function: var(--curveLinear);
+  }
+
+  dialog[open],
+  dialog[open]::backdrop {
+    opacity: 1;
+  }
+
+  dialog:not([open]) {
+    scale: var(--dialog-starting-scale);
+    transition-timing-function: var(--curveAccelerateMid);
+  }
+}
+
+@starting-style {
+  dialog[open],
+  dialog[open]::backdrop {
+    opacity: 0;
+  }
+
+  dialog {
+    scale: var(--dialog-starting-scale);
+  }
+}
+
+@media (forced-colors: active) {
+  dialog {
+    border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
+  }
+}

package/components/dialog/fluent-dialog.js

@@ -0,0 +1,137 @@
+import { FluentElement } from '../../core/fluent-element.js';
+
+const stylesUrl = new URL('./fluent-dialog.css', import.meta.url).href;
+
+class FluentDialog extends FluentElement {
+  static stylesUrl = stylesUrl;
+  static template = `
+    <div class="root">
+      <dialog class="dialog" part="dialog">
+        <slot></slot>
+      </dialog>
+    </div>
+  `;
+
+  static get observedAttributes() {
+    return ['type', 'trigger', 'close-on', 'aria-label', 'aria-labelledby', 'aria-describedby'];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._dialog = this._root.querySelector('dialog');
+    if (this._dialog) {
+      this._dialog.addEventListener('click', (e) => this._clickHandler(e));
+      this._dialog.addEventListener('cancel', () => this.hide());
+      this._updateDialogAttributes();
+    }
+    requestAnimationFrame(() => this._wireTrigger());
+    requestAnimationFrame(() => this._wireCloseOn());
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback(name, oldVal, newVal);
+    if (name === 'type') {
+      this._updateDialogAttributes();
+    }
+    if (name === 'trigger' && oldVal !== newVal) {
+      this._wireTrigger();
+    }
+    if (name === 'close-on' && oldVal !== newVal) {
+      this._wireCloseOn();
+    }
+    if (this._dialog && (name === 'aria-label' || name === 'aria-labelledby' || name === 'aria-describedby')) {
+      if (newVal !== null) {
+        this._dialog.setAttribute(name, newVal);
+      } else {
+        this._dialog.removeAttribute(name);
+      }
+    }
+  }
+
+  show() {
+    if (!this._dialog) return;
+    this.setAttribute('open', '');
+    this.dispatchEvent(new CustomEvent('beforetoggle', {
+      detail: { oldState: this._dialog.open ? 'open' : 'closed', newState: this._dialog.open ? 'closed' : 'open' }
+    }));
+    const type = this.getAttribute('type') || 'modal';
+    if (type === 'alert' || type === 'modal') {
+      this._dialog.showModal();
+    } else {
+      this._dialog.show();
+    }
+    this.dispatchEvent(new CustomEvent('toggle', {
+      detail: { oldState: 'closed', newState: 'open' }
+    }));
+  }
+
+  hide() {
+    if (!this._dialog) return;
+    this.removeAttribute('open');
+    this.dispatchEvent(new CustomEvent('beforetoggle', {
+      detail: { oldState: 'open', newState: 'closed' }
+    }));
+    this._dialog.close();
+    this.dispatchEvent(new CustomEvent('toggle', {
+      detail: { oldState: 'open', newState: 'closed' }
+    }));
+  }
+
+  _wireTrigger() {
+    const sel = this.getAttribute('trigger');
+    if (!sel) return;
+    if (this._triggerEl) {
+      this._triggerEl.removeEventListener('click', this._onTriggerClick);
+    }
+    const el = this._root.host?.ownerDocument?.querySelector(sel) ?? document.querySelector(sel);
+    if (el) {
+      this._triggerEl = el;
+      this._onTriggerClick = () => this.show();
+      el.addEventListener('click', this._onTriggerClick);
+    }
+  }
+
+  _wireCloseOn() {
+    const sel = this.getAttribute('close-on');
+    if (!sel) return;
+    if (this._closeOnCleanups) {
+      this._closeOnCleanups.forEach(fn => fn());
+    }
+    this._closeOnCleanups = [];
+    sel.split(',').forEach(s => {
+      const p = s.trim();
+      if (!p) return;
+      const doc = this._root.host?.ownerDocument ?? document;
+      const els = doc.querySelectorAll(p);
+      els.forEach(el => {
+        const handler = () => this.hide();
+        el.addEventListener('click', handler);
+        this._closeOnCleanups.push(() => el.removeEventListener('click', handler));
+      });
+    });
+  }
+
+  _clickHandler(event) {
+    const type = this.getAttribute('type') || 'modal';
+    if (this._dialog.open && type !== 'alert' && event.target === this._dialog) {
+      this.hide();
+    }
+  }
+
+  _updateDialogAttributes() {
+    if (!this._dialog) return;
+    const type = this.getAttribute('type') || 'modal';
+    if (type === 'alert') {
+      this._dialog.setAttribute('role', 'alertdialog');
+    } else {
+      this._dialog.removeAttribute('role');
+    }
+    if (type !== 'non-modal') {
+      this._dialog.setAttribute('aria-modal', 'true');
+    } else {
+      this._dialog.removeAttribute('aria-modal');
+    }
+  }
+}
+
+customElements.define('fluent-dialog', FluentDialog);