fluentui-webcomponents 0.0.1

package/components/divider/fluent-divider.css

@@ -0,0 +1,124 @@
+@import url('../../tokens.css');
+
+:host { display: flex; }
+
+:host([hidden]) .root {
+  display: none;
+}
+
+.root {
+  display: flex;
+}
+
+.root::after,
+.root::before {
+  align-self: center;
+  background: var(--colorNeutralStroke2);
+  box-sizing: border-box;
+  content: '';
+  display: flex;
+  flex-grow: 1;
+  height: var(--strokeWidthThin);
+}
+
+:host([inset]) .root {
+  padding: 0 12px;
+}
+
+.root ::slotted(*) {
+  color: var(--colorNeutralForeground2);
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase200);
+  font-weight: var(--fontWeightRegular);
+  margin: 0;
+  padding: 0 12px;
+}
+
+:host([align-content='start']) .root::before,
+:host([align-content='end']) .root::after {
+  flex-basis: 12px;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+:host([orientation='vertical']) .root {
+  align-items: center;
+  flex-direction: column;
+  height: 100%;
+  min-height: 84px;
+}
+
+:host([orientation='vertical']:empty) .root {
+  min-height: 20px;
+}
+
+:host([orientation='vertical'][inset]) .root::before {
+  margin-top: 12px;
+}
+:host([orientation='vertical'][inset]) .root::after {
+  margin-bottom: 12px;
+}
+
+:host([orientation='vertical']:empty) .root::before,
+:host([orientation='vertical']:empty) .root::after {
+  height: 10px;
+  min-height: 10px;
+  flex-grow: 0;
+}
+
+:host([orientation='vertical']) .root::before,
+:host([orientation='vertical']) .root::after {
+  width: var(--strokeWidthThin);
+  min-height: 20px;
+  height: 100%;
+}
+
+:host([orientation='vertical']) .root ::slotted(*) {
+  display: flex;
+  flex-direction: column;
+  padding: 12px 0;
+  line-height: 20px;
+}
+
+:host([orientation='vertical'][align-content='start']) .root::before {
+  min-height: 8px;
+}
+:host([orientation='vertical'][align-content='end']) .root::after {
+  min-height: 8px;
+}
+
+:host([appearance='strong']) .root::before,
+:host([appearance='strong']) .root::after {
+  background: var(--colorNeutralStroke1);
+}
+:host([appearance='strong']) .root ::slotted(*) {
+  color: var(--colorNeutralForeground1);
+}
+:host([appearance='brand']) .root::before,
+:host([appearance='brand']) .root::after {
+  background: var(--colorBrandStroke1);
+}
+:host([appearance='brand']) .root ::slotted(*) {
+  color: var(--colorBrandForeground1);
+}
+:host([appearance='subtle']) .root::before,
+:host([appearance='subtle']) .root::after {
+  background: var(--colorNeutralStroke3);
+}
+:host([appearance='subtle']) .root ::slotted(*) {
+  color: var(--colorNeutralForeground3);
+}
+
+@media (forced-colors: active) {
+  :host([appearance='strong']) .root::before,
+  :host([appearance='strong']) .root::after,
+  :host([appearance='brand']) .root::before,
+  :host([appearance='brand']) .root::after,
+  :host([appearance='subtle']) .root::before,
+  :host([appearance='subtle']) .root::after,
+  .root::after,
+  .root::before {
+    background: WindowText;
+    color: WindowText;
+  }
+}

package/components/divider/fluent-divider.js

@@ -0,0 +1,14 @@
+import { FluentElement } from '../../core/fluent-element.js';
+
+const stylesUrl = new URL('./fluent-divider.css', import.meta.url).href;
+
+class FluentDivider extends FluentElement {
+  static stylesUrl = stylesUrl;
+  static template = `<div class="root"><slot></slot></div>`;
+
+  static get observedAttributes() {
+    return ['role', 'orientation', 'align-content', 'appearance', 'inset'];
+  }
+}
+
+customElements.define('fluent-divider', FluentDivider);

package/components/image/fluent-image.css

@@ -0,0 +1,73 @@
+@import url('../../tokens.css');
+
+:host { display: inline-block; }
+
+.root {
+  display: inline-block;
+}
+
+:host([block]) .root {
+  display: block;
+}
+
+:host ::slotted(img) {
+  box-sizing: border-box;
+  min-height: 8px;
+  min-width: 8px;
+  display: inline-block;
+}
+
+:host([block]) ::slotted(img) {
+  width: 100%;
+  height: auto;
+}
+
+:host([bordered]) ::slotted(img) {
+  border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
+}
+
+:host([fit='none']) ::slotted(img) {
+  object-fit: none;
+  object-position: top left;
+  height: 100%;
+  width: 100%;
+}
+
+:host([fit='center']) ::slotted(img) {
+  object-fit: none;
+  object-position: center;
+  height: 100%;
+  width: 100%;
+}
+
+:host([fit='contain']) ::slotted(img) {
+  object-fit: contain;
+  object-position: center;
+  height: 100%;
+  width: 100%;
+}
+
+:host([fit='cover']) ::slotted(img) {
+  object-fit: cover;
+  object-position: center;
+  height: 100%;
+  width: 100%;
+}
+
+:host([shadow]) ::slotted(img) {
+  box-shadow: var(--shadow4);
+}
+
+:host([shape='circular']) ::slotted(img) {
+  border-radius: var(--borderRadiusCircular);
+}
+
+:host([shape='rounded']) ::slotted(img) {
+  border-radius: var(--borderRadiusMedium);
+}
+
+@media (forced-colors: active) {
+  :host([bordered]) ::slotted(img) {
+    border-color: ButtonText;
+  }
+}

package/components/image/fluent-image.js

@@ -0,0 +1,36 @@
+import { FluentElement } from '../../core/fluent-element.js';
+
+const stylesUrl = new URL('./fluent-image.css', import.meta.url).href;
+
+class FluentImage 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 ['src', 'alt', 'fit', 'shape', 'block', 'bordered', 'shadow'];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    const img = this.querySelector('img');
+    if (!img) {
+      const src = this.getAttribute('src');
+      const alt = this.getAttribute('alt') || '';
+      if (src) {
+        const newImg = document.createElement('img');
+        newImg.src = src;
+        newImg.alt = alt;
+        this.appendChild(newImg);
+      }
+    }
+  }
+}
+
+customElements.define('fluent-image', FluentImage);

package/components/label/fluent-label.css

@@ -0,0 +1,49 @@
+@import url('../../tokens.css');
+
+:host { display: inline-flex; }
+
+.root {
+  display: inline-flex;
+  color: var(--colorNeutralForeground1);
+  cursor: pointer;
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase300);
+  font-weight: var(--fontWeightRegular);
+  line-height: var(--lineHeightBase300);
+  user-select: none;
+}
+
+.asterisk {
+  color: var(--colorPaletteRedForeground1);
+  margin-inline-start: var(--spacingHorizontalXS);
+}
+
+:host(:not([required])) .root .asterisk {
+  display: none;
+}
+
+:host([size='small']) .root {
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+}
+
+:host([size='large']) .root {
+  font-size: var(--fontSizeBase400);
+  line-height: var(--lineHeightBase400);
+}
+
+:host(:is([size='large'], [weight='semibold'])) .root {
+  font-weight: var(--fontWeightSemibold);
+}
+
+:host([disabled]) .root,
+:host([disabled]) .root .asterisk {
+  color: var(--colorNeutralForegroundDisabled);
+}
+
+@media (forced-colors: active) {
+  :host([disabled]) .root,
+  :host([disabled]) .root .asterisk {
+    color: GrayText;
+  }
+}

package/components/label/fluent-label.js

@@ -0,0 +1,61 @@
+import { FluentElement } from '../../core/fluent-element.js';
+
+const stylesUrl = new URL('./fluent-label.css', import.meta.url).href;
+
+class FluentLabel extends FluentElement {
+  static stylesUrl = stylesUrl;
+  static template = `
+    <label class="root">
+      <slot></slot>
+      <span class="asterisk" part="asterisk" aria-hidden="true">*</span>
+    </label>
+  `;
+
+  static get observedAttributes() {
+    return ['disabled', 'required', 'size', 'weight', 'for'];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    requestAnimationFrame(() => {
+      this._updateFor();
+      this._updateRequired();
+    });
+  }
+
+  changed(name, oldVal, newVal) {
+    switch (name) {
+      case 'for':
+        this._updateFor();
+        break;
+      case 'required':
+        this._updateRequired();
+        break;
+      case 'disabled':
+      case 'size':
+      case 'weight':
+        break;
+    }
+  }
+
+  _updateFor() {
+    const label = this._root?.querySelector('.root');
+    if (!label) return;
+    const forAttr = this.getAttribute('for');
+    if (forAttr) {
+      label.setAttribute('for', forAttr);
+    } else {
+      label.removeAttribute('for');
+    }
+  }
+
+  _updateRequired() {
+    const label = this._root?.querySelector('.root');
+    if (!label) return;
+    const asterisk = label.querySelector('.asterisk');
+    if (!asterisk) return;
+    asterisk.style.display = this.hasAttribute('required') ? 'inline' : 'none';
+  }
+}
+
+customElements.define('fluent-label', FluentLabel);

package/components/link/fluent-link.css

@@ -0,0 +1,72 @@
+@import url('../../tokens.css');
+
+:host { display: inline; }
+
+:host([hidden]) .root {
+  display: none;
+}
+
+.root {
+  display: inline;
+  box-sizing: border-box;
+  background-color: transparent;
+  color: var(--colorBrandForegroundLink);
+  cursor: pointer;
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase300);
+  font-weight: var(--fontWeightRegular);
+  text-align: start;
+  text-decoration: none;
+  text-decoration-thickness: var(--strokeWidthThin);
+  user-select: text;
+}
+
+.root:is(:hover, :focus-visible) {
+  outline: none;
+  text-decoration-line: underline;
+}
+
+@media (hover: hover) {
+  .root:hover {
+    color: var(--colorBrandForegroundLinkHover);
+  }
+
+  .root:active {
+    color: var(--colorBrandForegroundLinkPressed);
+  }
+
+  :host([appearance='subtle']) .root:hover {
+    color: var(--colorNeutralForeground2LinkHover);
+  }
+
+  :host([appearance='subtle']) .root:active {
+    color: var(--colorNeutralForeground2LinkPressed);
+  }
+}
+
+:host([appearance='subtle']) .root {
+  color: var(--colorNeutralForeground2Link);
+}
+
+:host-context(:is(h1, h2, h3, h4, h5, h6, p, fluent-text)),
+:host([inline]) .root {
+  font: inherit;
+  text-decoration: underline;
+}
+
+:host(:not([href])) .root {
+  color: inherit;
+  text-decoration: none;
+  pointer-events: none;
+}
+
+:host([disabled]) .root {
+  color: var(--colorNeutralForegroundDisabled);
+  text-decoration: none;
+}
+
+@media (forced-colors: active) {
+  .root {
+    color: LinkText;
+  }
+}

package/components/link/fluent-link.js

@@ -0,0 +1,109 @@
+import { FluentElement } from '../../core/fluent-element.js';
+
+const stylesUrl = new URL('./fluent-link.css', import.meta.url).href;
+
+class FluentLink extends FluentElement {
+  static stylesUrl = stylesUrl;
+  static template = `<a class="root"><slot></slot></a>`;
+
+  static get observedAttributes() {
+    return ['appearance', 'inline', 'disabled', 'href', 'target', 'rel', 'hreflang', 'ping', 'referrerpolicy', 'type', 'download'];
+  }
+
+  constructor() {
+    super();
+    this._boundClick = this._handleClick.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._root.addEventListener('click', this._boundClick);
+    const anchor = this._root.querySelector('.root');
+    if (anchor) {
+      this._syncAllAttrs(anchor);
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._root.removeEventListener('click', this._boundClick);
+  }
+
+  changed(name, oldVal, newVal) {
+    const anchor = this._root.querySelector('.root');
+    if (!anchor) return;
+
+    switch (name) {
+      case 'href':
+        anchor.href = newVal || '';
+        break;
+      case 'target':
+        anchor.target = newVal || '';
+        break;
+      case 'rel':
+        anchor.rel = newVal || '';
+        break;
+      case 'hreflang':
+        anchor.hreflang = newVal || '';
+        break;
+      case 'ping':
+        anchor.ping = newVal || '';
+        break;
+      case 'referrerpolicy':
+        anchor.referrerPolicy = newVal || '';
+        break;
+      case 'type':
+        anchor.type = newVal || '';
+        break;
+      case 'download':
+        anchor.download = newVal || '';
+        break;
+      case 'disabled':
+        if (newVal !== null) {
+          anchor.removeAttribute('href');
+          anchor.style.pointerEvents = 'none';
+          anchor.style.cursor = 'default';
+        } else {
+          const href = this.getAttribute('href');
+          if (href) anchor.href = href;
+          anchor.style.pointerEvents = '';
+          anchor.style.cursor = '';
+        }
+        break;
+    }
+  }
+
+  _syncAllAttrs(anchor) {
+    const href = this.getAttribute('href');
+    if (href) anchor.href = href;
+    const target = this.getAttribute('target');
+    if (target) anchor.target = target;
+    const rel = this.getAttribute('rel');
+    if (rel) anchor.rel = rel;
+    const hreflang = this.getAttribute('hreflang');
+    if (hreflang) anchor.hreflang = hreflang;
+    const ping = this.getAttribute('ping');
+    if (ping) anchor.ping = ping;
+    const referrerpolicy = this.getAttribute('referrerpolicy');
+    if (referrerpolicy) anchor.referrerPolicy = referrerpolicy;
+    const type = this.getAttribute('type');
+    if (type) anchor.type = type;
+    const download = this.getAttribute('download');
+    if (download) anchor.download = download;
+    if (this.hasAttribute('disabled')) {
+      anchor.removeAttribute('href');
+      anchor.style.pointerEvents = 'none';
+      anchor.style.cursor = 'default';
+    }
+  }
+
+  _handleClick(e) {
+    if (this.hasAttribute('disabled')) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      return;
+    }
+  }
+}
+
+customElements.define('fluent-link', FluentLink);

package/components/menu/fluent-menu.css

@@ -0,0 +1,57 @@
+@import url('../../tokens.css');
+
+:host { display: inline-flex; }
+
+.root {
+  display: inline-block;
+}
+
+::slotted([slot='trigger']) {
+  anchor-name: --menu-trigger;
+}
+
+::slotted([popover]) {
+  margin: 0;
+  max-height: var(--menu-max-height, auto);
+  position-anchor: --menu-trigger;
+  position-area: block-end span-inline-end;
+  position-try-fallbacks: flip-block;
+  position: absolute;
+  z-index: 1;
+}
+
+:host([split]) ::slotted([popover]) {
+  position-area: block-end span-inline-start;
+}
+
+::slotted([popover]:popover-open) {
+  inset: unset;
+}
+
+::slotted([popover]:not(:popover-open)) {
+  display: none;
+}
+
+:host([split]) .root {
+  display: inline-flex;
+}
+
+:host([split]) ::slotted([slot='primary-action']) {
+  border-inline-end: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+:host([split]) ::slotted([slot='primary-action']:focus-visible) {
+  z-index: 1;
+}
+
+:host([split]) ::slotted([slot='primary-action'][appearance='primary']) {
+  border-inline-end: var(--strokeWidthThin) solid white;
+}
+
+:host([split]) ::slotted([slot='trigger']) {
+  border-inline-start: 0;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}