@getaster/elements 0.1.0-preview.1 → 0.3.0

package/NOTICE

@@ -1,10 +1,5 @@
-Aster UI
+@getaster/elements
 Copyright 2026 Aster UI contributors
 
-Aster UI source and the separately supplied OData mock WebAssembly binary are
-licensed under the Apache License, Version 2.0. Third-party components retain
-their respective licenses. The binary's attribution inventory and license texts
-are supplied in packages/mock/wasm/; packages include those notices when shipped.
-
-Geist and IBM Plex Mono fonts retain their SIL Open Font License notices.
-ECharts is an optional separately loaded third-party runtime.
+Aster UI code in this package is licensed under the Apache License, Version 2.0.
+See LICENSE. Separately installed dependencies retain their respective licenses.

package/README.md

@@ -1,7 +1,72 @@
 # @getaster/elements
 
-Aster UI elements.
+Browser-native controls for metadata-driven enterprise applications: grids,
+forms, pickers, filters, dashboards and workspaces. Controls share records and
+edit state through `@getaster/data` and use CSS for layout and theming.
 
-Documentation: https://ui.getaster.now/docs/guide/library.html
+Aster is pre-1.0; production API stability is not yet promised. Experimental
+controls are published separately in `@getaster/elements-preview`.
 
-Licensed under Apache-2.0. See LICENSE and NOTICE.
+## Install
+
+```sh
+npm install @getaster/data @getaster/elements
+```
+
+Use a modern browser with custom elements and ES modules, plus a bundler that
+resolves npm modules and CSS imports. The package ships TypeScript declarations.
+Its main entry registers browser elements and requires a DOM; use
+`@getaster/data` for headless work. Package tooling requires Node 22 or later.
+
+## Connect a grid
+
+With an OData service exposing a `Projects` entity set and JSON CSDL metadata:
+
+```ts
+import { DataContext, fetchTransport } from '@getaster/data';
+import { Grid } from '@getaster/elements';
+import '@getaster/elements/styles/aster-ui.css';
+
+const ctx = await DataContext.connect(
+  fetchTransport('https://your-service.example/odata/')
+);
+const grid = new Grid();
+grid.ctx = ctx;
+grid.set = 'Projects';
+grid.label = 'Projects';
+grid.style.height = '24rem';
+document.body.append(grid);
+```
+
+Replace the endpoint and entity set with your own. Give a virtualized grid a
+bounded height, and supply your application's theme tokens as described in the
+[theming guide](https://ui.getaster.now/docs/guide/themes.html). When the view
+closes, remove the element; separately owned data models remain the host's
+responsibility.
+
+## Compose an application
+
+Use a shared data context to connect a grid, form and selection. JavaScript and
+YAML composition support reusable workspace definitions. Controls provide
+keyboard interaction and semantic markup; application labels, focus flow and
+accessibility still need testing in the completed application.
+
+The package depends on Aster's data core, Lit HTML and Preact signals. Keep one
+compatible copy of each shared runtime in your build. The optional ECharts
+adapter accepts an application-supplied runtime; ECharts, showcase data, fonts
+and the mock service are not bundled into this package. There are no install
+scripts.
+
+## Documentation and support
+
+- [Get started](https://ui.getaster.now/docs/guide/getting-started.html)
+- [Connected views](https://ui.getaster.now/docs/guide/connected-views.html)
+- [Workspace composition](https://ui.getaster.now/docs/guide/declarative-workspace.html)
+- [API reference](https://ui.getaster.now/docs/reference/)
+- [Interactive showcase](https://ui.getaster.now/showcase/)
+- [Report a bug](https://github.com/GetAster/aster-ui/issues)
+
+## License
+
+Apache-2.0. See the included `LICENSE` and package-specific `NOTICE`.
+Separately installed dependencies retain their own licenses.

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.3.0",
   "type": "module",
   "exports": {
     ".": {
@@ -11,7 +11,7 @@
     "./styles/*": "./styles/*"
   },
   "dependencies": {
-    "@getaster/data": "0.1.0-preview.1",
+    "@getaster/data": "0.3.0",
     "@preact/signals-core": "1.14.4",
     "lit-html": "3.3.3"
   },
@@ -24,6 +24,18 @@
     "url": "git+https://github.com/GetAster/aster-ui.git",
     "directory": "packages/elements"
   },
+  "description": "Browser-native grids, forms and workspace controls backed by shared Aster data models.",
+  "homepage": "https://ui.getaster.now/docs/guide/getting-started.html",
+  "bugs": {
+    "url": "https://github.com/GetAster/aster-ui/issues"
+  },
+  "keywords": [
+    "web-components",
+    "odata",
+    "grid",
+    "forms",
+    "typescript"
+  ],
   "types": "./dist/index.d.ts",
   "publishConfig": {
     "access": "public"

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