@xoong/controls 0.0.41 → 0.0.42

package/package.json

@@ -1,34 +1,135 @@
 {
   "name": "@xoong/controls",
-  "version": "0.0.41",
+  "version": "0.0.42",
   "description": "xoong form and page controls: tabs, popover, tooltip, menu, combobox, chips, tag input, carousel. Light DOM, accessible, zero dependencies besides @xoong/core.",
   "type": "module",
   "main": "src/index.js",
   "exports": {
     ".": {
+      "types": "./src/index.d.ts",
       "default": "./src/index.js"
     },
-    "./accordion": "./src/accordion.js",
-    "./carousel": "./src/carousel.js",
-    "./chart": "./src/chart.js",
-    "./command": "./src/command.js",
-    "./consent": "./src/consent.js",
-    "./file": "./src/file.js",
-    "./popover": "./src/popover.js",
-    "./combobox": "./src/combobox.js",
-    "./copy": "./src/copy.js",
-    "./date": "./src/date.js",
-    "./image": "./src/image.js",
-    "./password": "./src/password.js",
-    "./slider": "./src/slider.js",
-    "./stepper": "./src/stepper.js",
+    "./accordion": {
+      "types": "./src/index.d.ts",
+      "default": "./src/accordion.js"
+    },
+    "./avatar": {
+      "types": "./src/index.d.ts",
+      "default": "./src/avatar.js"
+    },
+    "./carousel": {
+      "types": "./src/index.d.ts",
+      "default": "./src/carousel.js"
+    },
+    "./chart": {
+      "types": "./src/index.d.ts",
+      "default": "./src/chart.js"
+    },
+    "./combobox": {
+      "types": "./src/index.d.ts",
+      "default": "./src/combobox.js"
+    },
+    "./command": {
+      "types": "./src/index.d.ts",
+      "default": "./src/command.js"
+    },
+    "./consent": {
+      "types": "./src/index.d.ts",
+      "default": "./src/consent.js"
+    },
     "./controls.css": "./src/controls.css",
-    "./menu": "./src/menu.js",
-    "./switch": "./src/switch.js",
-    "./tabs": "./src/tabs.js",
-    "./theme-toggle": "./src/theme-toggle.js",
-    "./time": "./src/time.js",
-    "./tooltip": "./src/tooltip.js"
+    "./copy": {
+      "types": "./src/index.d.ts",
+      "default": "./src/copy.js"
+    },
+    "./date": {
+      "types": "./src/index.d.ts",
+      "default": "./src/date.js"
+    },
+    "./file": {
+      "types": "./src/index.d.ts",
+      "default": "./src/file.js"
+    },
+    "./image": {
+      "types": "./src/index.d.ts",
+      "default": "./src/image.js"
+    },
+    "./inline-edit": {
+      "types": "./src/index.d.ts",
+      "default": "./src/inline-edit.js"
+    },
+    "./menu": {
+      "types": "./src/index.d.ts",
+      "default": "./src/menu.js"
+    },
+    "./otp": {
+      "types": "./src/index.d.ts",
+      "default": "./src/otp.js"
+    },
+    "./password": {
+      "types": "./src/index.d.ts",
+      "default": "./src/password.js"
+    },
+    "./popover": {
+      "types": "./src/index.d.ts",
+      "default": "./src/popover.js"
+    },
+    "./progress": {
+      "types": "./src/index.d.ts",
+      "default": "./src/progress.js"
+    },
+    "./range-slider": {
+      "types": "./src/index.d.ts",
+      "default": "./src/range-slider.js"
+    },
+    "./segmented": {
+      "types": "./src/index.d.ts",
+      "default": "./src/segmented.js"
+    },
+    "./slider": {
+      "types": "./src/index.d.ts",
+      "default": "./src/slider.js"
+    },
+    "./split-button": {
+      "types": "./src/index.d.ts",
+      "default": "./src/split-button.js"
+    },
+    "./stat": {
+      "types": "./src/index.d.ts",
+      "default": "./src/stat.js"
+    },
+    "./stepper": {
+      "types": "./src/index.d.ts",
+      "default": "./src/stepper.js"
+    },
+    "./steps": {
+      "types": "./src/index.d.ts",
+      "default": "./src/steps.js"
+    },
+    "./switch": {
+      "types": "./src/index.d.ts",
+      "default": "./src/switch.js"
+    },
+    "./tabs": {
+      "types": "./src/index.d.ts",
+      "default": "./src/tabs.js"
+    },
+    "./textarea": {
+      "types": "./src/index.d.ts",
+      "default": "./src/textarea.js"
+    },
+    "./theme-toggle": {
+      "types": "./src/index.d.ts",
+      "default": "./src/theme-toggle.js"
+    },
+    "./time": {
+      "types": "./src/index.d.ts",
+      "default": "./src/time.js"
+    },
+    "./tooltip": {
+      "types": "./src/index.d.ts",
+      "default": "./src/tooltip.js"
+    }
   },
   "sideEffects": true,
   "files": [
@@ -53,9 +154,9 @@
   "bugs": {
     "url": "https://github.com/fpt-duongtx/xoong/issues"
   },
-  "homepage": "https://github.com/fpt-duongtx/xoong#readme",
+  "homepage": "https://fpt-duongtx.github.io/xoong/",
   "dependencies": {
-    "@xoong/core": "0.0.41"
+    "@xoong/core": "0.0.42"
   },
   "publishConfig": {
     "access": "public"

package/src/avatar.js

@@ -0,0 +1,142 @@
+// @ts-check
+/**
+ * <xo-avatar> is a person (or a team) as a round badge: their picture when there is one, their initials when there is not.
+ * <xo-avatars> stacks several of them.
+ *
+ *   <xo-avatar name="Nguyễn Văn An" src="/img/an.jpg" size="lg" status="ok"></xo-avatar>
+ *   <xo-avatars max="3"><xo-avatar name="An Dao"></xo-avatar> <xo-avatar name="Linh Tran"></xo-avatar> ... </xo-avatars>
+ *
+ * - The element itself is the `.xo-avatar` badge (it gets the classes `xo-avatar`, `xo-avatar--sm|lg` from `size`, and `xo-avatar--ok|warn|muted` from
+ *   `status`). Colour is never the only signal: the status is added to the accessible name ("An Dao, online").
+ * - Initials: the first letter of the first and of the last word ("Nguyễn Văn An" is "NA"); a single word gives its first two letters. Without a
+ *   name the user icon is drawn.
+ * - `src` is tried first: the image replaces the initials once it loads and the initials stay when it fails (`data-state` is `loaded` or `error`).
+ * - The accessible name is the full name: `role=img` with `aria-label`; inside <xo-avatars> it is a `role=listitem` with the same label.
+ * - <xo-avatars max="3"> is a `role=list` of its avatars. Only `max` are shown; a last badge "+N" (labelled "N more") stands for the rest.
+ *   Without `max` all are shown.
+ */
+import { XoElement, define, text } from '@xoong/core';
+
+/** Initials for a name: first letter of the first and the last word, or the first two letters of a single word. */
+export function initialsOf(/** @type {string} */ name) {
+  const words = String(name ?? '').trim().split(/\s+/).map((w) => Array.from(w.replace(/^[^\p{L}\p{N}]+/u, ''))).filter((w) => w.length);
+  if (!words.length) return '';
+  const letters = words.length === 1 ? words[0].slice(0, 2) : [words[0][0], words[words.length - 1][0]];
+  return letters.join('').toLocaleUpperCase();
+}
+
+const STATUS = ['ok', 'warn', 'muted'];
+const SIZE = ['sm', 'lg'];
+
+class XoAvatar extends XoElement {
+  static props = { name: String, src: String, size: String, status: String };
+
+  /** @type {HTMLImageElement | null} */ #img = null;
+  /** @type {HTMLElement | null} */ #initials = null;
+
+  connected() {
+    const initials = document.createElement('span');
+    initials.setAttribute('aria-hidden', 'true');
+    this.#initials = initials;
+    this.replaceChildren(initials);
+    this.#img = null;
+    this.#loadImage();
+    this.#paint();
+  }
+
+  attributeChangedCallback(attr, old, value) {
+    super.attributeChangedCallback(attr, old, value);
+    if (attr === 'src' && this.#initials) this.#loadImage();
+    this.#paint();
+  }
+
+  /** The stack (or the page) calls this when the avatar is moved into or out of an <xo-avatars>. */
+  refresh() { this.#paint(); }
+
+  #loadImage() {
+    this.#img?.remove();
+    this.#img = null;
+    delete this.dataset.state;
+    this.#initials?.removeAttribute('hidden');
+    if (!this.src) return;
+    const img = document.createElement('img');
+    img.alt = '';
+    img.setAttribute('aria-hidden', 'true');
+    img.decoding = 'async';
+    // The picture fills the badge: set through the CSS object model (no style attribute, strict CSP) so it works with or without a stylesheet rule.
+    for (const [k, v] of [['width', '100%'], ['height', '100%'], ['objectFit', 'cover'], ['borderRadius', '50%'], ['display', 'none']]) /** @type {any} */ (img.style)[k] = v;
+    img.addEventListener('load', () => { if (this.#img !== img) return; img.style.display = 'block'; this.#initials?.setAttribute('hidden', ''); this.dataset.state = 'loaded'; });
+    img.addEventListener('error', () => { if (this.#img !== img) return; img.remove(); this.#img = null; this.#initials?.removeAttribute('hidden'); this.dataset.state = 'error'; });
+    this.#img = img;
+    this.append(img);
+    img.src = this.src;
+  }
+
+  #paint() {
+    const el = this.#initials;
+    if (!el) return;
+    const name = (this.name ?? '').trim();
+    const initials = initialsOf(name);
+    if (initials) el.textContent = initials;
+    else el.innerHTML = '<span class="ic" data-ic="user" aria-hidden="true"></span>';
+    const cls = this.classList;
+    cls.add('xo-avatar');
+    for (const s of SIZE) cls.toggle(`xo-avatar--${s}`, this.size === s);
+    for (const s of STATUS) cls.toggle(`xo-avatar--${s}`, this.status === s);
+    const status = this.status === 'ok' ? text('xoong.avatar.ok', 'online') : this.status === 'warn' ? text('xoong.avatar.warn', 'needs attention') : this.status === 'muted' ? text('xoong.avatar.muted', 'inactive') : '';
+    const label = name ? (status ? `${name}, ${status}` : name) : text('xoong.avatar.unknown', 'Unknown user');
+    this.setAttribute('aria-label', label);
+    this.setAttribute('role', this.closest('xo-avatars') ? 'listitem' : 'img');
+  }
+}
+define('xo-avatar', XoAvatar);
+
+class XoAvatars extends XoElement {
+  static props = { max: Number, label: String };
+
+  /** @type {HTMLElement | null} */ #more = null;
+  /** @type {MutationObserver | null} */ #watch = null;
+
+  connected() {
+    this.classList.add('xo-avatars');
+    this.setAttribute('role', 'list');
+    void this.ready().then(() => {
+      this.#layout();
+      this.#watch = new MutationObserver(() => this.#layout());
+      this.#watch.observe(this, { childList: true });
+    });
+  }
+  disconnected() { this.#watch?.disconnect(); this.#watch = null; }
+
+  attributeChangedCallback(attr, old, value) {
+    super.attributeChangedCallback(attr, old, value);
+    if (this.isConnected && this.#watch) this.#layout();
+  }
+
+  #layout() {
+    this.#watch?.disconnect();
+    const items = /** @type {HTMLElement[]} */ ([...this.children].filter((c) => c !== this.#more));
+    const max = this.max > 0 ? Math.floor(this.max) : items.length;
+    const rest = Math.max(0, items.length - max);
+    items.forEach((el, i) => {
+      if (!el.hasAttribute('role') || el.getAttribute('role') === 'img') el.setAttribute('role', 'listitem');
+      if (/** @type {any} */ (el).refresh) /** @type {any} */ (el).refresh();
+      const hide = i >= max;
+      el.toggleAttribute('hidden', hide);
+      if (hide) el.style.display = 'none'; else el.style.removeProperty('display');
+    });
+    if (rest > 0) {
+      if (!this.#more) {
+        const more = document.createElement('span');
+        more.className = 'xo-avatar xo-avatar--muted';
+        more.setAttribute('role', 'listitem');
+        this.#more = more;
+      }
+      this.#more.textContent = `+${rest}`;
+      this.#more.setAttribute('aria-label', text('xoong.avatar.more', '{count} more', { count: rest }));
+      if (this.lastElementChild !== this.#more) this.append(this.#more);
+    } else if (this.#more) { this.#more.remove(); this.#more = null; }
+    this.#watch?.observe(this, { childList: true });
+  }
+}
+define('xo-avatars', XoAvatars);

package/src/controls.css

@@ -8,6 +8,13 @@
   xo-tabs > [role="tabpanel"] { padding-top: var(--xo-space-3, .75rem); }
 }
 
+@layer xoong-controls {
+  /* the hosts of the field and feedback elements: a custom element is inline until told otherwise */
+  :is(xo-date, xo-slider, xo-range-slider, xo-password, xo-copy, xo-file, xo-textarea, xo-otp, xo-progress, xo-steps, xo-stat, xo-chart, xo-accordion, xo-consent) { display: block; }
+  :is(xo-switch, xo-stepper, xo-time, xo-segmented, xo-split-button, xo-spinner, xo-avatar, xo-avatars, xo-inline-edit, xo-theme-toggle, xo-popover-anchor) { display: inline-block; }
+  xo-popover[hidden] { display: none; }
+}
+
 @layer xoong-controls {
   xo-image { display: block; position: relative; overflow: hidden; max-width: 100%; }
   xo-image > img { display: block; width: 100%; height: 100%; object-fit: var(--xo-image-fit, cover); object-position: var(--xo-image-position, center); }

package/src/date.js

@@ -59,13 +59,13 @@ class XoDate extends XoControl {
     input.type = 'text';
     input.autocomplete = 'off';
     input.setAttribute('aria-label', this.label || this.name || text('xoong.controls.date', 'Date'));
-    input.setAttribute('aria-haspopup', 'dialog');
-    input.setAttribute('aria-expanded', 'false');
     input.placeholder = this.placeholder || (this.range ? text('xoong.controls.dateRangeHint', 'Start - end') : this.#sample());
     const opener = document.createElement('button');
     opener.type = 'button';
     opener.className = 'xo-date-open';
     opener.setAttribute('aria-label', text('xoong.controls.chooseDate', 'Choose date'));
+    opener.setAttribute('aria-haspopup', 'dialog'); // on the button: a text input may not carry aria-expanded (axe aria-allowed-attr)
+    opener.setAttribute('aria-expanded', 'false');
     opener.innerHTML = '<span class="ic" data-ic="calendar" aria-hidden="true"></span>';
     opener.addEventListener('click', () => (this.#open ? this.#close(true) : this.#openCalendar()));
     wrap.append(input, opener);
@@ -141,7 +141,7 @@ class XoDate extends XoControl {
     this.#open = true;
     this.#draw();
     this.#stop = showLayer(/** @type {HTMLElement} */ (this.#panel), /** @type {HTMLElement} */ (this.#input).parentElement ?? this);
-    this.#input?.setAttribute('aria-expanded', 'true');
+    this.#opener?.setAttribute('aria-expanded', 'true');
     document.addEventListener('pointerdown', this.#onDocument);
     this.#focusDay();
   }
@@ -150,7 +150,7 @@ class XoDate extends XoControl {
     this.#open = false;
     this.#stop();
     hideLayer(/** @type {HTMLElement} */ (this.#panel));
-    this.#input?.setAttribute('aria-expanded', 'false');
+    this.#opener?.setAttribute('aria-expanded', 'false');
     document.removeEventListener('pointerdown', this.#onDocument);
     if (refocus) this.#input?.focus();
   }