@alacris/ui 0.4.1 → 0.4.3

package/README.md

@@ -46,10 +46,10 @@ The published package is plain ESM. Point an import map at a pinned CDN build of
 <script type="importmap">
 {
   "imports": {
-    "@alacris/core": "https://cdn.jsdelivr.net/npm/@alacris/core@0.11.3/dist/alacris.js",
-    "@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.1/src/index.js",
-    "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.1/src/theme/index.js",
-    "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.1/src/components/"
+    "@alacris/core": "https://cdn.jsdelivr.net/npm/@alacris/core@0.11.4/dist/alacris.js",
+    "@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.3/src/index.js",
+    "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.3/src/theme/index.js",
+    "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.3/src/components/"
   }
 }
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alacris/ui",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "Themeable design system for Alacris — Material defaults, sixty-eight custom elements, ESM-only, no build step.",
   "type": "module",
   "exports": {

package/src/components/base.js

@@ -13,7 +13,7 @@ export const base = css`
     font-synthesis: none;
     -webkit-tap-highlight-color: transparent;
   }
-  :host([hidden]) { display: none; }
+  :host([hidden]) { display: none !important; }
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
       transition-duration: 0.01ms;

package/src/components/ui-accordion-item.js

@@ -146,7 +146,7 @@ define('ui-accordion-item', {
           <ui-icon class=${() => `chevron${expanded() ? ' open' : ''}`} name="expand-more"></ui-icon>
         </button>
       </h3>
-      <div part="content" class="content" id="content" role="region" aria-labelledby="header"
+      <div part="content" class="content" id="content" role="region" aria-labelledby="header" ?inert=${() => !expanded()}
            ref=${(el) => { contentEl = el; el.hidden = !expanded.peek(); }}>
         <div class="body" part="body"><slot></slot></div>
       </div>`;

package/src/components/ui-alert.js

@@ -132,6 +132,7 @@ define('ui-alert', {
     const onDismiss = () => {
       if (dismissing) return;
       dismissing = true;
+      host.inert = true;
       const height = host.scrollHeight || 0;
       // Simulated DOMs (and display:none hosts) measure 0 — skip straight out.
       if (!height) { host.emit('dismiss'); return; }

package/src/components/ui-autocomplete.js

@@ -276,8 +276,16 @@ define('ui-autocomplete', {
       open.set(false);
     };
 
+    let isComposing = false;
+    const onCompositionStart = () => { isComposing = true; };
+    const onCompositionEnd = (e) => {
+      isComposing = false;
+      onInput(e);
+    };
+
     const onInput = (e) => {
       e.stopPropagation();
+      if (isComposing) return;
       query.set(e.target.value);
       open.set(true);
       host.emit('input', { value: e.target.value });
@@ -358,6 +366,8 @@ define('ui-autocomplete', {
                  .value=${query}
                  placeholder=${() => placeholder() || null}
                  ?disabled=${disabled} ?required=${required}
+                 @compositionstart=${onCompositionStart}
+                 @compositionend=${onCompositionEnd}
                  @input=${onInput} @change=${(e) => e.stopPropagation()} @keydown=${onKeydown}
                  @focus=${onFocus} @blur=${onBlur}>
           <ui-icon class="arrow" name="arrow-drop-down"></ui-icon>

package/src/components/ui-chip.js

@@ -183,6 +183,7 @@ define('ui-chip', {
     const dismiss = (e) => {
       e.stopPropagation();
       if (disabled()) return;
+      host.inert = true;
       const w = host.getBoundingClientRect().width;
       const anim = animate(host, [
         { inlineSize: `${w}px`, opacity: 1 },

package/src/components/ui-dialog.js

@@ -111,19 +111,22 @@ define('ui-dialog', {
     };
 
     // Trap focus + lock scroll exactly while open; presence handles the DOM.
+    let prevActive = null;
     effect(() => {
       if (open()) {
+        prevActive = document.activeElement;
         document.addEventListener('keydown', onDocKeydown, true);
         unlock = scrollLock();
         // The surface renders synchronously with the signal write, but wait a
         // microtask so slotted content is distributed before we look for it.
         queueMicrotask(() => {
-          if (open() && !releaseTrap) releaseTrap = focusTrap(host);
+          if (open() && !releaseTrap) releaseTrap = focusTrap(host, { restore: prevActive });
         });
       } else {
         document.removeEventListener('keydown', onDocKeydown, true);
         releaseTrap?.();
         releaseTrap = null;
+        prevActive = null;
         unlock?.();
         unlock = null;
         if (surfaceEl?.isConnected) {

package/src/components/ui-drawer.js

@@ -105,17 +105,20 @@ define('ui-drawer', {
     };
 
     // Trap focus + lock scroll exactly while the modal drawer is open.
+    let prevActive = null;
     effect(() => {
       if (open() && variant() === 'modal') {
+        prevActive = document.activeElement;
         document.addEventListener('keydown', onDocKeydown, true);
         if (!unlock) unlock = scrollLock();
         queueMicrotask(() => {
-          if (open.peek() && !releaseTrap) releaseTrap = focusTrap(host);
+          if (open.peek() && !releaseTrap) releaseTrap = focusTrap(host, { restore: prevActive });
         });
       } else {
         document.removeEventListener('keydown', onDocKeydown, true);
         releaseTrap?.();
         releaseTrap = null;
+        prevActive = null;
         unlock?.();
         unlock = null;
       }
@@ -150,7 +153,7 @@ define('ui-drawer', {
     return html`
       ${() =>
         variant() === 'standard'
-          ? html`<aside class=${() => `std ${anchor()}${open() ? ' open' : ''}`} part="surface"
+          ? html`<aside class=${() => `std ${anchor()}${open() ? ' open' : ''}`} ?inert=${() => !open()} part="surface"
                         aria-label=${() => label() || 'Navigation'}>
               <div class="inner"><slot></slot></div>
             </aside>`

package/src/components/ui-sheet.js

@@ -126,17 +126,20 @@ define('ui-sheet', {
       if (e.key === 'Escape') requestClose('esc');
     };
 
+    let prevActive = null;
     effect(() => {
       if (open() && variant() !== 'standard') {
+        prevActive = document.activeElement;
         document.addEventListener('keydown', onDocKeydown, true);
         unlock = scrollLock();
         queueMicrotask(() => {
-          if (open() && !releaseTrap) releaseTrap = focusTrap(host);
+          if (open() && !releaseTrap) releaseTrap = focusTrap(host, { restore: prevActive });
         });
       } else {
         document.removeEventListener('keydown', onDocKeydown, true);
         releaseTrap?.();
         releaseTrap = null;
+        prevActive = null;
         unlock?.();
         unlock = null;
         if (surfaceEl?.isConnected) {
@@ -183,7 +186,7 @@ define('ui-sheet', {
     return html`
       ${() =>
         variant() === 'standard'
-          ? html`<div class=${() => `std${open() ? ' open' : ''}`} part="surface" role="region"
+          ? html`<div class=${() => `std${open() ? ' open' : ''}`} ?inert=${() => !open()} part="surface" role="region"
                       aria-label=${() => label() || 'Sheet'}>
               <div class="std-inner">
                 <div class="handle" part="handle" aria-hidden="true"></div>

package/src/components/ui-side-sheet.js

@@ -130,17 +130,20 @@ define('ui-side-sheet', {
       if (e.key === 'Escape') requestClose('esc');
     };
 
+    let prevActive = null;
     effect(() => {
       if (open() && variant() !== 'standard') {
+        prevActive = document.activeElement;
         document.addEventListener('keydown', onDocKeydown, true);
         unlock = scrollLock();
         queueMicrotask(() => {
-          if (open() && !releaseTrap) releaseTrap = focusTrap(host);
+          if (open() && !releaseTrap) releaseTrap = focusTrap(host, { restore: prevActive });
         });
       } else {
         document.removeEventListener('keydown', onDocKeydown, true);
         releaseTrap?.();
         releaseTrap = null;
+        prevActive = null;
         unlock?.();
         unlock = null;
       }
@@ -192,7 +195,7 @@ define('ui-side-sheet', {
     return html`
       ${() =>
         variant() === 'standard'
-          ? html`<aside class=${() => `std ${anchor()}${open() ? ' open' : ''}`} part="surface"
+          ? html`<aside class=${() => `std ${anchor()}${open() ? ' open' : ''}`} ?inert=${() => !open()} part="surface"
                         role="region"
                         aria-labelledby=${() => (hasHeadline() ? 'headline' : null)}
                         aria-label=${() => (hasHeadline() ? null : (label() || 'Side sheet'))}>

package/src/components/ui-switch.js

@@ -144,7 +144,7 @@ define('ui-switch', {
             ${() => (icons() ? html`<ui-icon name=${() => (checked() ? 'check' : 'close')}></ui-icon>` : null)}
           </span>
         </button>
-        ${() => (label() ? html`<span id="label">${label}</span>` : null)}
+        ${() => (label() ? html`<span id="label" part="label">${label}</span>` : html`<slot></slot>`)}
       </label>`;
   },
 });

package/src/components/ui-text-field.js

@@ -320,7 +320,15 @@ define('ui-text-field', {
        hasLeading() && 'with-leading', type() === 'textarea' && 'multiline',
        type() === 'number' && 'numeric'].filter(Boolean).join(' '));
 
+    let isComposing = false;
+    const onCompositionStart = () => { isComposing = true; };
+    const onCompositionEnd = (e) => {
+      isComposing = false;
+      onInput(e);
+    };
+
     const onInput = (e) => {
+      if (isComposing) return;
       value.set(e.target.value);
       host.emit('input', { value: value() });
     };
@@ -350,6 +358,8 @@ define('ui-text-field', {
               spellcheck=${attr(spellcheck)}
               inputmode=${attr(inputmode)}
               enterkeyhint=${attr(enterkeyhint)}
+              @compositionstart=${onCompositionStart}
+              @compositionend=${onCompositionEnd}
               @input=${onInput} @change=${commit}
               @focus=${() => focused.set(true)} @blur=${() => focused.set(false)}></textarea></span>`
         : html`<input part="input" ref=${(el) => (input = el)}
@@ -364,6 +374,8 @@ define('ui-text-field', {
               spellcheck=${attr(spellcheck)}
               inputmode=${attr(inputmode)}
               enterkeyhint=${attr(enterkeyhint)}
+              @compositionstart=${onCompositionStart}
+              @compositionend=${onCompositionEnd}
               @input=${onInput} @change=${commit}
               @focus=${() => focused.set(true)} @blur=${() => focused.set(false)}>`)}
       ${() => (clearable() && value() !== '' && !disabled()

package/src/util/focus.js

@@ -32,8 +32,8 @@ export function focusables(host) {
  *
  *   const release = focusTrap(host, { initial: shadowCloseButton });
  */
-export function focusTrap(host, { initial } = {}) {
-  const previous = document.activeElement;
+export function focusTrap(host, { initial, restore } = {}) {
+  const previous = restore || document.activeElement;
 
   const first = initial || focusables(host)[0] || host;
   first.focus?.();