@alacris/ui 0.4.2 → 0.4.4

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alacris/ui",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "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-autocomplete.js

@@ -155,7 +155,8 @@ const styles = css`
   }
   .filled.floating .label { translate: 0 calc(-50% - 16px); scale: 0.75; }
   .outlined.floating .label {
-    translate: 0 calc(-50% - (${t.height} + var(--ui-density, 0) * 4px) / 2);
+    inset-block-start: 0;
+    translate: 0 -50%;
     scale: 0.75;
   }
   .focused .label { color: ${t.accent}; }

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-select.js

@@ -189,7 +189,8 @@ const styles = css`
   }
   .filled.floating .label { translate: 0 calc(-50% - 16px); scale: 0.75; }
   .outlined.floating .label {
-    translate: 0 calc(-50% - (${t.height} + var(--ui-density, 0) * 4px) / 2);
+    inset-block-start: 0;
+    translate: 0 -50%;
     scale: 0.75;
   }
   .open .label, :focus-within .label { color: ${t.accent}; }

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'))}>

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

@@ -193,14 +193,14 @@ const styles = css`
                 color ${sys.duration.short2} ${sys.easing.standard};
   }
   .with-leading .label { inset-inline-start: calc(${sys.space(4)} + 1.5rem + ${sys.space(2)}); }
-  /* Multi-line fields anchor the label to the top, not the vertical center. */
-  .multiline .label { inset-block-start: 24px; z-index: 2; }
+  /* Multi-line fields anchor the unfloated label near the top line. */
+  .multiline:not(.floating) .label { inset-block-start: 24px; z-index: 2; }
   .filled.floating .label { translate: 0 calc(-50% - 16px); scale: 0.75; }
-  .filled.multiline.floating .label { translate: 0 -85%; scale: 0.75; }
-  .outlined.multiline.floating .label { inset-block-start: 8px; }
+  .filled.multiline.floating .label { inset-block-start: 24px; translate: 0 -85%; scale: 0.75; }
   .outlined.floating .label {
     inset-inline-start: ${sys.space(4)};
-    translate: 0 calc(-50% - (${t.height} + var(--ui-density, 0) * 4px) / 2);
+    inset-block-start: 0;
+    translate: 0 -50%;
     scale: 0.75;
   }
   .focused .label { color: ${t.accent}; }