@adia-ai/web-modules 0.6.12 → 0.6.13

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog — @adia-ai/web-modules
 
+## [0.6.13] — 2026-05-20
+
+### Changed
+- **`<admin-shell>` — default `mode` is now `"rounded borderless"` (was flat-bordered).** A bare `<admin-shell>` with no `mode` attribute auto-promotes to `mode="rounded borderless"` in `connectedCallback` — the modern soft-chrome visual baseline becomes opt-out, not opt-in. Any author-supplied `mode` attribute (including the empty string `mode=""` for the flat legacy chrome) is respected verbatim: the default fires only when no `mode` attribute is present on the tag at all. The behavior change is scoped to consumers emitting a bare `<admin-shell>` — every in-repo composition surface and every audited external consumer except claims-ui-v3 already set `mode="rounded borderless"` explicitly. Opt-out matrix: `<admin-shell>` → `rounded borderless`; `<admin-shell mode="">` → `""`; `<admin-shell mode="rounded">` → `rounded`. The `props.mode` schema also drops its (incorrect) `enum: ["", rounded, borderless]` constraint — `mode` is a space-separated token set consumed by CSS `mode~="<token>"` attribute selectors, so the `.d.ts` `mode` type widens from `'' | 'rounded' | 'borderless'` to `string` (TS consumers can now assign `el.mode = "rounded borderless"` without a cast).
+
 ## [0.6.12] — 2026-05-20
 
 ### Cleanup (no in-tree or audited external consumer impact)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-modules",
-  "version": "0.6.12",
+  "version": "0.6.13",
   "description": "AdiaUI composite custom elements \u2014 shell, chat, editor, runtime clusters built from @adia-ai/web-components primitives. Subpath exports per cluster.",
   "type": "module",
   "exports": {

package/shell/admin-shell/admin-shell.a2ui.json

@@ -17,14 +17,9 @@
       "const": "AppShell"
     },
     "mode": {
-      "description": "Layout variant — default is bordered surface; rounded softens edges; borderless removes the outer chrome.",
+      "description": "Layout variant — space-separated token set. Recognized tokens:\n  rounded     — softens content-surface edges (border-radius from --page-content-radius)\n  borderless  — removes outer chrome borders (content dividers persist)\nThe CSS uses `mode~=\"<token>\"` attribute selectors, so multiple\ntokens combine additively (\"rounded borderless\" = both).\n\nDefault since v0.6.13: \"rounded borderless\". A bare `<admin-shell>`\nwith no `mode` attribute auto-promotes to this pair on connect.\nAuthor-supplied `mode` attributes (including the empty string\n`mode=\"\"` for flat bordered chrome) are respected verbatim.\n",
       "type": "string",
-      "enum": [
-        "",
-        "rounded",
-        "borderless"
-      ],
-      "default": ""
+      "default": "rounded borderless"
     }
   },
   "required": [

package/shell/admin-shell/admin-shell.d.ts

@@ -35,8 +35,18 @@ export interface AdminShellSidebarToggleEventDetail {
 export type AdminShellSidebarToggleEvent = CustomEvent<AdminShellSidebarToggleEventDetail>;
 
 export class AdminShell extends UIElement {
-  /** Layout variant — default is bordered surface; rounded softens edges; borderless removes the outer chrome. */
-  mode: '' | 'rounded' | 'borderless';
+  /** Layout variant — space-separated token set. Recognized tokens:
+  rounded     — softens content-surface edges (border-radius from --page-content-radius)
+  borderless  — removes outer chrome borders (content dividers persist)
+The CSS uses `mode~="<token>"` attribute selectors, so multiple
+tokens combine additively ("rounded borderless" = both).
+
+Default since v0.6.13: "rounded borderless". A bare `<admin-shell>`
+with no `mode` attribute auto-promotes to this pair on connect.
+Author-supplied `mode` attributes (including the empty string
+`mode=""` for flat bordered chrome) are respected verbatim.
+ */
+  mode: string;
 
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,

package/shell/admin-shell/admin-shell.js

@@ -17,7 +17,12 @@
  * compat reads; see git history for the legacy paths.
  *
  * Host responsibilities (the only behavior that stays here):
- *   1. [mode] reflection — "rounded", "borderless", or both
+ *   1. [mode] reflection — "rounded", "borderless", or both. **Default
+ *      since v0.6.13: "rounded borderless"**. Authors who want the flat
+ *      legacy chrome opt out via an explicit `mode=""` or `mode="rounded"`
+ *      (etc.); any author-supplied `mode` attribute (including the empty
+ *      string) is respected verbatim, so the default only fires when
+ *      no `mode` attribute is present at all on the tag.
  *   2. [data-sidebar-toggle="<name>"] click forwarding to the matching
  *      <admin-sidebar>'s .toggle() public method
  *   3. [data-command-trigger] click forwarding to <admin-command>.show()
@@ -26,6 +31,8 @@
 
 import { UIElement } from '../../../web-components/core/element.js';
 
+const DEFAULT_MODE = 'rounded borderless';
+
 class AdminShell extends UIElement {
   static properties = {
     mode: { type: String, default: '', reflect: true },
@@ -34,6 +41,11 @@ class AdminShell extends UIElement {
   static template = () => null;
 
   connected() {
+    // Apply the v0.6.13 default mode if (and only if) the author did
+    // not supply a `mode` attribute on the tag. `hasAttribute` returns
+    // true for `mode=""` so explicit empty-string authoring (the flat
+    // legacy chrome opt-out) is preserved.
+    if (!this.hasAttribute('mode')) this.mode = DEFAULT_MODE;
     this.#wireToggleButtons();
     this.#wireCommandTriggers();
   }

package/shell/admin-shell/admin-shell.yaml

@@ -13,10 +13,19 @@ description: |
 props:
   mode:
     type: string
-    default: ""
-    enum: ["", rounded, borderless]
+    default: "rounded borderless"
     reflect: true
-    description: Layout variant — default is bordered surface; rounded softens edges; borderless removes the outer chrome.
+    description: |
+      Layout variant — space-separated token set. Recognized tokens:
+        rounded     — softens content-surface edges (border-radius from --page-content-radius)
+        borderless  — removes outer chrome borders (content dividers persist)
+      The CSS uses `mode~="<token>"` attribute selectors, so multiple
+      tokens combine additively ("rounded borderless" = both).
+
+      Default since v0.6.13: "rounded borderless". A bare `<admin-shell>`
+      with no `mode` attribute auto-promotes to this pair on connect.
+      Author-supplied `mode` attributes (including the empty string
+      `mode=""` for flat bordered chrome) are respected verbatim.
 
 events:
   sidebar-toggle: