@alacris/ui 0.4.2 → 0.4.3

package/README.md

@@ -47,9 +47,9 @@ The published package is plain ESM. Point an import map at a pinned CDN build of
 {
   "imports": {
     "@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/"
+    "@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.2",
+  "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/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-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-drawer.js

@@ -153,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

@@ -186,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

@@ -195,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'))}>