@getaster/elements 0.1.0-preview.0 → 0.2.0

package/bin/aster-theme-check.js

@@ -171,8 +171,8 @@ function oklch(args, lookup) {
     if (!base)
       return;
     const [l, c, h] = toOklch(base);
-    const parts2 = splitTop(from[2]);
-    if (parts2.length !== 3)
+    const parts = splitTop(from[2]);
+    if (parts.length !== 3)
       return;
     const channel = (p, own, key) => {
       if (p === key)
@@ -180,12 +180,12 @@ function oklch(args, lookup) {
       const calc = new RegExp(`^calc\\(${key}\\s*([+-])\\s*([\\d.]+)\\)$`).exec(p);
       return calc ? own + (calc[1] === "+" ? 1 : -1) * Number(calc[2]) : number(p);
     };
-    const L2 = channel(parts2[0], l, "l");
-    const C2 = channel(parts2[1], c, "c");
-    const H2 = channel(parts2[2], h, "h");
-    if ([L2, C2, H2].some((x) => x === undefined || Number.isNaN(x)))
+    const L = channel(parts[0], l, "l");
+    const C = channel(parts[1], c, "c");
+    const H = channel(parts[2], h, "h");
+    if ([L, C, H].some((x) => x === undefined || Number.isNaN(x)))
       return;
-    return { ...fromOklch(L2, C2, H2), a: alpha ?? base.a };
+    return { ...fromOklch(L, C, H), a: alpha ?? base.a };
   }
   const parts = main.split(/\s+/).filter(Boolean);
   if (parts.length !== 3)

package/dist/carousel/carousel.js

@@ -14,6 +14,7 @@ export class Carousel extends AsterElement {
     /** The slides don't all fit: only then are there places to move to. */
     #overflows = this.prop(false);
     #resize;
+    #resizeFrame = 0;
     #id = uid("aster-carousel");
     #observer;
     /** Rebuilt when descriptors change or the element reconnects. */
@@ -59,6 +60,8 @@ export class Carousel extends AsterElement {
     disconnectedCallback() {
         this.#observer?.disconnect();
         this.#resize?.disconnect();
+        cancelAnimationFrame(this.#resizeFrame);
+        this.#resizeFrame = 0;
         this.#observed = undefined;
         super.disconnectedCallback();
     }
@@ -122,7 +125,15 @@ export class Carousel extends AsterElement {
         for (const el of this.#slideEls())
             this.#observer.observe(el);
         this.#resize?.disconnect();
-        this.#resize = new ResizeObserver(() => (this.#overflows.value = rail.scrollWidth > rail.clientWidth + 1));
+        this.#resize = new ResizeObserver(() => {
+            // Adding navigation changes the rail's layout; commit outside observer delivery.
+            if (this.#resizeFrame)
+                return;
+            this.#resizeFrame = requestAnimationFrame(() => {
+                this.#resizeFrame = 0;
+                this.#overflows.value = rail.scrollWidth > rail.clientWidth + 1;
+            });
+        });
         this.#resize.observe(rail);
         for (const el of this.#slideEls())
             this.#resize.observe(el);

package/dist/grid/grid.js

@@ -2167,6 +2167,9 @@ export class Grid extends AsterElement {
     }
     #focusEditor(key, col) {
         const row = this.querySelector(`.aster-grid-row[data-key="${CSS.escape(key)}"]`);
+        // A user may choose another control before deferred initial focus runs.
+        if (row?.contains(document.activeElement))
+            return;
         const cells = row ? [...row.querySelectorAll('[role="gridcell"]')] : [];
         const target = cells[col]?.querySelector("input:not([readonly]), textarea:not([readonly]), [role=combobox]:not([aria-readonly])") ??
             row?.querySelector("input:not([readonly]), textarea:not([readonly]), [role=combobox]:not([aria-readonly])");

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { ProgressStatus } from "./progress/status.ts";
 export { provideProgressPolicy, progressPolicyOf } from "./progress/policy.ts";
 export { asterComponents } from "./composition/builtins.ts";
 export { Sidebar, sidebarItems, type SidebarItem } from "./sidebar/sidebar.ts";
-export { AsterElement, define, each, provideScope, read, scopeOf, type Bindable, type View } from "./base/element.ts";
+export { AsterElement, define, each, uid, provideScope, read, scopeOf, type Bindable, type View } from "./base/element.ts";
 export { Composite, compositeComponent, type CompositeOptions, type CompositeChildHandle, type CompositePlacement } from "./composition/composite.ts";
 export { CommandBar } from "./composition/command-bar.ts";
 export { defineCompositeRegistry, defineCompositeRenderer, CompositeAuthoring, type RegistryCatalog, type CompositeDiagnostic, type CompositeCompletion } from "./composition/authoring.ts";

package/dist/index.js

@@ -2,7 +2,7 @@ export { ProgressStatus } from "./progress/status.js";
 export { provideProgressPolicy, progressPolicyOf } from "./progress/policy.js";
 export { asterComponents } from "./composition/builtins.js";
 export { Sidebar, sidebarItems } from "./sidebar/sidebar.js";
-export { AsterElement, define, each, provideScope, read, scopeOf } from "./base/element.js";
+export { AsterElement, define, each, uid, provideScope, read, scopeOf } from "./base/element.js";
 export { Composite, compositeComponent } from "./composition/composite.js";
 export { CommandBar } from "./composition/command-bar.js";
 export { defineCompositeRegistry, defineCompositeRenderer, CompositeAuthoring } from "./composition/authoring.js";

package/dist/tabs/tabs.js

@@ -108,10 +108,24 @@ export class Tabs extends AsterElement {
         });
     }
     #revealSelected() {
-        this.querySelector(".aster-tabs")?.querySelector('[role="tab"][aria-selected="true"]')?.scrollIntoView({ block: "nearest", inline: "nearest", behavior: "instant" });
+        const tab = this.querySelector(".aster-tabs")?.querySelector('[role="tab"][aria-selected="true"]');
+        if (tab)
+            this.#reveal(tab);
+    }
+    /** Reveal within the strip without scrolling the containing page or panel. */
+    #reveal(tab) {
+        const viewport = this.querySelector(".aster-tabs-viewport");
+        if (!viewport)
+            return;
+        const visible = viewport.getBoundingClientRect();
+        const target = tab.getBoundingClientRect();
+        const left = target.left < visible.left ? target.left - visible.left : Math.max(0, target.right - visible.right);
+        if (left)
+            viewport.scrollBy({ left, behavior: "instant" });
     }
     #focusSelected() {
-        this.querySelector(".aster-tabs")?.querySelector('[role="tab"][aria-selected="true"]')?.focus();
+        this.querySelector(".aster-tabs")?.querySelector('[role="tab"][aria-selected="true"]')?.focus({ preventScroll: true });
+        this.#revealSelected();
     }
     /** Stable for a value while the element lives; encoded so any value is a valid single id token. */
     #tabId(value) {
@@ -193,8 +207,8 @@ export class Tabs extends AsterElement {
         }
         e.preventDefault();
         tabs.forEach((tab, index) => { tab.tabIndex = index === n ? 0 : -1; });
-        tabs[n].focus();
-        tabs[n].scrollIntoView({ block: "nearest", inline: "nearest", behavior: "instant" });
+        tabs[n].focus({ preventScroll: true });
+        this.#reveal(tabs[n]);
         if (this.#activation.peek() === "automatic")
             this.#choose(tabs[n].dataset.value);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getaster/elements",
-  "version": "0.1.0-preview.0",
+  "version": "0.2.0",
   "type": "module",
   "exports": {
     ".": {
@@ -11,7 +11,7 @@
     "./styles/*": "./styles/*"
   },
   "dependencies": {
-    "@getaster/data": "0.1.0-preview.0",
+    "@getaster/data": "0.2.0",
     "@preact/signals-core": "1.14.4",
     "lit-html": "3.3.3"
   },

package/styles/aster-ui.css

@@ -34,6 +34,8 @@
     mix-blend-mode: var(--aster-texture-blend, normal);
   }
   button, input, select, textarea { font: inherit; color: inherit; }
+  /* Native controls inherit ink, so their surfaces must follow the same theme. */
+  select, option, optgroup { background-color: var(--aster-sunk); }
   button { background: none; border: 0; padding: 0; margin: 0; text-align: inherit; }
   h1, h2, h3 { text-wrap: balance; }
   p { text-wrap: pretty; }
@@ -460,6 +462,10 @@
   .aster-window-bar button:hover { background: var(--aster-accent-soft); color: var(--aster-text); }
   .aster-window-bar button:focus-visible { outline: 2px solid var(--aster-focus); outline-offset: -2px; }
   .aster-window-bar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
+  @media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
+    .aster-window { left:8px; top:8px; width:calc(100vw - 16px) !important; height:min(420px, calc(100dvh - 16px)) !important; resize:none; }
+    .aster-window-bar .aster-window-move, .aster-window-bar button[aria-describedby$="-resize-help"] { display:none; }
+  }
   .aster-window-body { flex: 1; min-height: 0; overflow: auto; padding: var(--aster-pad) 14px; }
   /* Dashboard geometry stays in CSS; stored sizes are column/row intent. */
   aster-dashboard { display: block; min-width: 0; container-type: inline-size; }

package/styles/base.css

@@ -34,6 +34,8 @@
     mix-blend-mode: var(--aster-texture-blend, normal);
   }
   button, input, select, textarea { font: inherit; color: inherit; }
+  /* Native controls inherit ink, so their surfaces must follow the same theme. */
+  select, option, optgroup { background-color: var(--aster-sunk); }
   button { background: none; border: 0; padding: 0; margin: 0; text-align: inherit; }
   h1, h2, h3 { text-wrap: balance; }
   p { text-wrap: pretty; }

package/styles/elements.css

@@ -373,6 +373,10 @@
   .aster-window-bar button:hover { background: var(--aster-accent-soft); color: var(--aster-text); }
   .aster-window-bar button:focus-visible { outline: 2px solid var(--aster-focus); outline-offset: -2px; }
   .aster-window-bar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
+  @media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
+    .aster-window { left:8px; top:8px; width:calc(100vw - 16px) !important; height:min(420px, calc(100dvh - 16px)) !important; resize:none; }
+    .aster-window-bar .aster-window-move, .aster-window-bar button[aria-describedby$="-resize-help"] { display:none; }
+  }
   .aster-window-body { flex: 1; min-height: 0; overflow: auto; padding: var(--aster-pad) 14px; }
   /* Dashboard geometry stays in CSS; stored sizes are column/row intent. */
   aster-dashboard { display: block; min-width: 0; container-type: inline-size; }