@getaster/elements 0.1.0-preview.1 → 0.2.0

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/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.1",
+  "version": "0.2.0",
   "type": "module",
   "exports": {
     ".": {
@@ -11,7 +11,7 @@
     "./styles/*": "./styles/*"
   },
   "dependencies": {
-    "@getaster/data": "0.1.0-preview.1",
+    "@getaster/data": "0.2.0",
     "@preact/signals-core": "1.14.4",
     "lit-html": "3.3.3"
   },

package/styles/aster-ui.css

@@ -462,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/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; }