@alacris/ui 0.4.1 → 0.4.2

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.2/src/index.js",
+    "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.2/src/theme/index.js",
+    "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.2/src/components/"
   }
 }
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alacris/ui",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "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-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-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;
       }

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) {

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;
       }

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?.();