@adia-ai/web-components 0.0.23 → 0.0.25

package/components/drawer/drawer.js

@@ -36,7 +36,6 @@ class AdiaDrawer extends AdiaElement {
   #closing = false;
   #previousFocus = null;
   #closeTimer = null;
-  #openRaf = null;
   #dialogRef = null;
 
   static properties = {
@@ -60,6 +59,28 @@ class AdiaDrawer extends AdiaElement {
   // html`` result would trigger stamp() → replaceChildren(), wiping authored
   // [slot=header|body|footer] before render() can migrate them into the panel.
 
+  constructor() {
+    super();
+    // Safari requires <dialog>.showModal() to be invoked synchronously inside
+    // the click handler. The reactive system schedules render() in a microtask
+    // after the property change, which Safari treats as outside the user-gesture
+    // window and silently no-ops the showModal. Wrap the auto-installed `open`
+    // setter so dialog state syncs in the same synchronous frame as the
+    // assignment. See docs/BROWSER-COMPAT.md §3a (Flavor C).
+    const desc = Object.getOwnPropertyDescriptor(this, 'open');
+    if (desc?.set) {
+      const origSet = desc.set;
+      Object.defineProperty(this, 'open', {
+        get: desc.get,
+        set: (v) => {
+          origSet.call(this, v);
+          this.#syncDialog();
+        },
+        configurable: true,
+      });
+    }
+  }
+
   #onPress = (e) => {
     if (e.target.closest('[slot="close"]')) this.open = false;
   };
@@ -101,10 +122,6 @@ class AdiaDrawer extends AdiaElement {
       this.#dialogRef.removeEventListener('close', this.#onDialogClose);
       this.#dialogRef.removeEventListener('click', this.#onDialogClick);
     }
-    if (this.#openRaf != null) {
-      cancelAnimationFrame(this.#openRaf);
-      this.#openRaf = null;
-    }
     if (this.#closeTimer != null) {
       clearTimeout(this.#closeTimer);
       this.#closeTimer = null;
@@ -228,15 +245,26 @@ class AdiaDrawer extends AdiaElement {
       if (userFooter.parentElement !== panel) panel.appendChild(userFooter);
     }
 
-    // Sync open state
+    // Sync open state — also syncs synchronously from the `open` setter
+    // (see constructor) so showModal() runs in the click handler's gesture
+    // frame on Safari.
+    this.#syncDialog();
+  }
+
+  #syncDialog() {
+    const dialog = this.#dialogRef;
+    if (!dialog) return;
     if (this.open && !dialog.open) {
       this.#closing = false;
       this.#previousFocus = document.activeElement;
       dialog.showModal();
-      this.#openRaf = requestAnimationFrame(() => {
-        this.#openRaf = null;
-        dialog.setAttribute('data-open', '');
-      });
+      // Synchronous reflow instead of rAF — Safari throttles
+      // requestAnimationFrame when a top-layer dialog is open, sometimes
+      // delaying [data-open] (and the slide-in transition) by tens of
+      // seconds. Forcing a reflow keeps the animation start in the same
+      // synchronous frame. See docs/BROWSER-COMPAT.md §3a (Flavor C).
+      void dialog.offsetHeight;
+      dialog.setAttribute('data-open', '');
     } else if (!this.open && dialog.open && !this.#closing) {
       this.#animateClose(dialog);
     }
@@ -244,8 +272,13 @@ class AdiaDrawer extends AdiaElement {
 
   #animateClose(dialog) {
     this.#closing = true;
-    dialog.removeAttribute('data-open');
+    // Set [data-closing] FIRST (carries the transition spec), force a
+    // reflow, THEN remove [data-open]. If both attribute changes batch
+    // into a single style update, Safari can skip the slide-out animation
+    // entirely.
     dialog.setAttribute('data-closing', '');
+    void dialog.offsetHeight;
+    dialog.removeAttribute('data-open');
 
     this.#closeTimer = setTimeout(() => {
       this.#closeTimer = null;

package/components/footer/footer.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Footer.json",
   "title": "Footer",
-  "description": "Card footer. Contains actions, pagination, or summary. Typically holds Buttons.",
+  "description": "Footer — styled by closest container parent (Card / Drawer / Modal / Page / AppShell). Contains actions, pagination, or summary. Typically holds Buttons.",
   "type": "object",
   "allOf": [
     {

package/components/footer/footer.yaml

@@ -6,7 +6,7 @@ tag: footer-ui
 component: Footer
 category: container
 version: 1
-description: Card footer. Contains actions, pagination, or summary. Typically holds Buttons.
+description: Footer — styled by closest container parent (Card / Drawer / Modal / Page / AppShell). Contains actions, pagination, or summary. Typically holds Buttons.
 props:
   justify:
     description: Horizontal alignment of children

package/components/header/header.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Header.json",
   "title": "Header",
-  "description": "Card header. Contains heading text and optional action slot.",
+  "description": "Header — styled by closest container parent (Card / Drawer / Modal / Page / AppShell). Contains heading text and optional action slot.",
   "type": "object",
   "allOf": [
     {
@@ -17,7 +17,7 @@
       "const": "Header"
     },
     "padding": {
-      "description": "Bare attribute — enables default header padding. Card's own `padding` prop sets scale.",
+      "description": "Bare attribute — enables default header padding. The container parent's own `padding` prop sets the scale.",
       "type": "boolean",
       "default": false
     }

package/components/header/header.yaml

@@ -6,10 +6,10 @@ tag: header-ui
 component: Header
 category: container
 version: 1
-description: Card header. Contains heading text and optional action slot.
+description: Header — styled by closest container parent (Card / Drawer / Modal / Page / AppShell). Contains heading text and optional action slot.
 props:
   padding:
-    description: Bare attribute — enables default header padding. Card's own `padding` prop sets scale.
+    description: Bare attribute — enables default header padding. The container parent's own `padding` prop sets the scale.
     type: boolean
     default: false
     reflect: true

package/components/index.js

@@ -24,6 +24,8 @@ export { AdiaSegmented } from './segmented/segmented.js';
 export { AdiaRange } from './range/range.js';
 export { AdiaTree, AdiaTreeItem } from './tree/tree.js';
 export { AdiaPane } from './pane/pane.js';
+export { AdiaAppShell } from './app-shell/app-shell.js';
+export { AdiaPage } from './page/page.js';
 export { AdiaChatInput } from './chat/chat-input.js';
 export { AdiaChat } from './chat/chat.js';
 export { AdiaDrawer } from './drawer/drawer.js';

package/components/input/input.css

@@ -1,8 +1,18 @@
-/* Safari 17.x bug: `:scope[attr]:hover` inside `@scope` doesn't match the
-   scope root. Plain selector outside works. See docs/BROWSER-COMPAT.md §3a. */
+/* Safari 17.x bug: `:scope[attr]:hover` and `:scope:not(...) [descendant]:hover`
+   inside `@scope` don't match the scope root. Plain selectors outside work.
+   See docs/BROWSER-COMPAT.md §3a. */
 input-ui[variant="ghost"]:hover {
   --input-bg: var(--a-bg-muted);
 }
+input-ui:not([disabled]) [slot="field"]:hover {
+  background: var(--input-bg-hover);
+  border-color: var(--input-border-hover);
+  color: var(--input-fg-hover);
+}
+input-ui:not([disabled]) [slot="field"]:hover [slot="prefix"],
+input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
+  color: var(--input-affix-fg-hover);
+}
 
 @scope (input-ui) {
   :where(:scope) {
@@ -83,15 +93,7 @@ input-ui[variant="ghost"]:hover {
       color       var(--input-duration) var(--input-easing),
       box-shadow  var(--input-duration) var(--input-easing);
   }
-  :scope:not([disabled]) [slot="field"]:hover {
-    background: var(--input-bg-hover);
-    border-color: var(--input-border-hover);
-    color: var(--input-fg-hover);
-  }
-  :scope:not([disabled]) [slot="field"]:hover [slot="prefix"],
-  :scope:not([disabled]) [slot="field"]:hover [slot="suffix"] {
-    color: var(--input-affix-fg-hover);
-  }
+  /* hover rules moved outside @scope — see Safari 17.x bug note at top. */
   :scope:not([disabled]):focus-within [slot="field"] {
     /* Canonical ring — consumes the L3 --input-focus-ring token
        which aliases --a-focus-ring. Border stays stable; the ring

package/components/kbd/kbd.css

@@ -8,7 +8,7 @@
     --kbd-font:      var(--a-font-family-code);
 
     /* Size — defaults to md */
-    --kbd-font-size: var(--a-ui-sm);
+    --kbd-font-size: var(--a-ui-tiny);
     --kbd-height:    1.25rem;
     --kbd-min-width: 1.25rem;
     --kbd-px:        var(--a-space-1);

package/components/modal/modal.js

@@ -36,7 +36,6 @@ class AdiaModal extends AdiaElement {
   #closing = false;
   #previousFocus = null;
   #closeTimer = null;
-  #openRaf = null;
   #dialogRef = null;
 
   static properties = {
@@ -101,10 +100,6 @@ class AdiaModal extends AdiaElement {
       this.#dialogRef.removeEventListener('close', this.#onDialogClose);
       this.#dialogRef.removeEventListener('click', this.#onDialogClick);
     }
-    if (this.#openRaf != null) {
-      cancelAnimationFrame(this.#openRaf);
-      this.#openRaf = null;
-    }
     if (this.#closeTimer != null) {
       clearTimeout(this.#closeTimer);
       this.#closeTimer = null;
@@ -185,15 +180,16 @@ class AdiaModal extends AdiaElement {
       if (footer.parentElement !== panel) panel.appendChild(footer);
     }
 
-    // Sync open state
+    // Sync open state. Synchronous reflow instead of rAF — Safari throttles
+    // requestAnimationFrame when a top-layer dialog is open, sometimes
+    // delaying [data-open] (and the scale-in transition) by tens of seconds.
+    // See docs/BROWSER-COMPAT.md §3a (Flavor C).
     if (this.open && !dialog.open) {
       this.#closing = false;
       this.#previousFocus = document.activeElement;
       dialog.showModal();
-      this.#openRaf = requestAnimationFrame(() => {
-        this.#openRaf = null;
-        dialog.setAttribute('data-open', '');
-      });
+      void dialog.offsetHeight;
+      dialog.setAttribute('data-open', '');
     } else if (!this.open && dialog.open && !this.#closing) {
       this.#animateClose(dialog);
     }
@@ -201,8 +197,13 @@ class AdiaModal extends AdiaElement {
 
   #animateClose(dialog) {
     this.#closing = true;
-    dialog.removeAttribute('data-open');
+    // Set [data-closing] FIRST (carries the transition spec), force a
+    // reflow, THEN remove [data-open]. If both attribute changes batch
+    // into a single style update, Safari can skip the fade-out animation
+    // entirely.
     dialog.setAttribute('data-closing', '');
+    void dialog.offsetHeight;
+    dialog.removeAttribute('data-open');
 
     this.#closeTimer = setTimeout(() => {
       this.#closeTimer = null;

package/components/option-card/option-card.css

@@ -1,10 +1,32 @@
-/* Safari 17.x bug: `:scope:not(...):hover` inside `@scope` doesn't match
-   the scope root. Plain selector outside works. See
-   docs/BROWSER-COMPAT.md §3a. */
+/* Safari 17.x bug: `:scope:not(...):hover` (Flavor A) and `:scope[checked]`
+   (Flavor B — attribute-removal restyle) both fail inside `@scope`.
+   Selectors moved out. See docs/BROWSER-COMPAT.md §3a. */
 option-card-ui:not([checked]):not([disabled]):hover {
   background: var(--option-card-bg-hover);
   border-color: var(--option-card-border-hover);
 }
+option-card-ui[checked] > :not([slot]) {
+  display: block;
+}
+option-card-ui[checked] {
+  background: var(--option-card-bg-checked);
+  border-color: var(--option-card-border-checked);
+}
+option-card-ui[checked]::before {
+  border-color: var(--option-card-radio-fill);
+  background:
+    radial-gradient(
+      circle,
+      var(--option-card-radio-dot) 0 30%,
+      var(--option-card-radio-fill) 30% 100%
+    );
+}
+option-card-ui[checked] > [slot="heading"] {
+  color: var(--option-card-heading-color-checked);
+}
+option-card-ui[checked] > [slot="icon"] {
+  color: var(--option-card-icon-color-checked);
+}
 
 @scope (option-card-ui) {
   :where(:scope) {
@@ -142,39 +164,9 @@ option-card-ui:not([checked]):not([disabled]):hover {
   :scope:has(> [slot="icon"]) > :not([slot]) {
     grid-column: 3 / -1;
   }
-  :scope[checked] > :not([slot]) {
-    display: block;
-  }
-
-  /* hover rule moved outside @scope — see Safari 17.x bug note at top. */
-
-  /* ── State: checked — accent border + tinted bg + filled radio.
-       The indicator becomes an accent disc with a centered dot of
-       --option-card-radio-dot at 60% of the size, mirroring
-       radio-ui's recipe (radio.css:75-78). Done with a radial
-       gradient so a single pseudo-element carries both layers. */
-  :scope[checked] {
-    background: var(--option-card-bg-checked);
-    border-color: var(--option-card-border-checked);
-  }
-  :scope[checked]::before {
-    border-color: var(--option-card-radio-fill);
-    background:
-      radial-gradient(
-        circle,
-        var(--option-card-radio-dot) 0 30%,
-        var(--option-card-radio-fill) 30% 100%
-      );
-  }
-  /* Heading + icon shift to a strong color when checked — gives the
-     selected card a clear text-level emphasis on top of the bg/border
-     state, so picking is unambiguous beyond the radio dot alone. */
-  :scope[checked] > [slot="heading"] {
-    color: var(--option-card-heading-color-checked);
-  }
-  :scope[checked] > [slot="icon"] {
-    color: var(--option-card-icon-color-checked);
-  }
+  /* hover + [checked] state rules moved outside @scope — see Safari 17.x bug note at top.
+     The :scope[checked]::before recipe lives at top-of-file: an accent disc
+     with a centered dot via radial-gradient, mirroring radio-ui's recipe. */
 
   /* ── Layout: tile — icon top-left, indicator top-right, heading +
        description below, all left-aligned. Used for hero pickers

package/components/page/page.a2ui.json

@@ -0,0 +1,107 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Page.json",
+  "title": "Page",
+  "description": "Page container. Holds page-level chrome — header / content / footer —\nand manages max-width clamps, padding scale, optional scroll-container,\nand an optional sticky-header sentinel. Compose with the slot\nprimitives (`<header-ui>`, `<section-ui>`, `<footer-ui>`); the page's\n@scope rules style them. Drop in directly, or nest inside an\n`<app-shell-ui>`'s main column.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Page"
+    },
+    "maxWidth": {
+      "description": "Token-bound max-width clamp. `prose` (65ch) for reading pages,\n`narrow` (80ch) for tight forms, `wide` (1080px) for data-rich\npages, `full` for unconstrained. Empty defers to parent / 100%.\nCentered horizontally via `margin-inline: auto`.\n",
+      "type": "string",
+      "enum": [
+        "",
+        "prose",
+        "narrow",
+        "wide",
+        "full"
+      ],
+      "default": ""
+    },
+    "padding": {
+      "description": "Page-padding scale from the spacing system. Accepts `0`–`8`\n(mapped to `--a-space-N`). Empty (no value) applies the\n`--page-padding-default` token; `0` removes padding.\n",
+      "type": "string",
+      "default": ""
+    },
+    "scroll": {
+      "description": "Sets the page as a scroll container. `overflow-y: auto`, full\nheight, contained overscroll. Use when the page IS the scroll\nsurface (standalone pages); leave off when nested inside a parent\nthat already manages scroll (e.g. inside an `<app-shell-ui>`'s\nmain `<section>`).\n",
+      "type": "boolean",
+      "default": false
+    },
+    "stickyHeader": {
+      "description": "Installs an IntersectionObserver sentinel before the first\n`<header>` / `<header-ui>` child. When the sentinel scrolls out\nof view the page gains `[data-header-stuck]`, which the CSS\nuses to add a border + shadow to the header. No-op when no\nheader is present.\n",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "container",
+    "events": {},
+    "examples": [
+      {
+        "description": "Reading page with sticky header, 65ch column, padding scale 6.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Page\",\n    \"stickyHeader\": true,\n    \"maxWidth\": \"prose\",\n    \"padding\": \"6\",\n    \"children\": [\"hdr\", \"body\"]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\"title\"]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"variant\": \"display\",\n    \"textContent\": \"Reading Page\"\n  },\n  {\n    \"id\": \"body\",\n    \"component\": \"Section\",\n    \"children\": []\n  }\n]",
+        "name": "prose-page"
+      },
+      {
+        "description": "Wide-clamp dashboard page acting as a scroll container.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Page\",\n    \"scroll\": true,\n    \"maxWidth\": \"wide\",\n    \"padding\": \"4\",\n    \"children\": [\"hdr\", \"body\"]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": []\n  },\n  {\n    \"id\": \"body\",\n    \"component\": \"Section\",\n    \"children\": []\n  }\n]",
+        "name": "dashboard-page"
+      }
+    ],
+    "keywords": [
+      "page",
+      "layout",
+      "container",
+      "scroll",
+      "sticky-header",
+      "max-width",
+      "padding",
+      "prose-page",
+      "dashboard-page"
+    ],
+    "name": "AdiaPage",
+    "related": [
+      "app-shell",
+      "card",
+      "section",
+      "header",
+      "footer"
+    ],
+    "slots": {
+      "default": {
+        "description": "Composes from the slot primitives — `<header-ui>` (page header),\n`<section-ui>` (main content), optional `<footer-ui>`. Native\n`<header>` / `<section>` / `<footer>` also work; the @scope rules\ntarget both via `:where(header, header-ui)`.\n"
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "Header has scrolled past the sentinel; visual cue applied.",
+        "name": "header-stuck"
+      }
+    ],
+    "synonyms": {},
+    "tag": "page-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/page/page.css

@@ -0,0 +1,68 @@
+@scope (page-ui) {
+  :where(:scope) {
+    /* ── Max-width clamps ── */
+    --page-max-width-prose:  65ch;
+    --page-max-width-narrow: 80ch;
+    --page-max-width-wide:   1080px;
+    --page-max-width-full:   100%;
+
+    /* ── Padding default (when [padding] is set without a value) ── */
+    --page-padding-default:  var(--a-space-6);
+
+    /* ── Surfaces ── */
+    --page-bg:               var(--a-canvas-0);
+    --page-fg:               var(--a-fg);
+
+    /* ── Sticky-header chrome (when [data-header-stuck]) ── */
+    --page-sticky-bg:        var(--a-canvas-0);
+    --page-sticky-border:    1px solid var(--a-border-subtle);
+    --page-sticky-shadow:    var(--a-shadow-sm);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    background: var(--page-bg);
+    color: var(--page-fg);
+  }
+
+  /* ── max-width clamps ── */
+  :scope[max-width="prose"]  { max-width: var(--page-max-width-prose);  margin-inline: auto; }
+  :scope[max-width="narrow"] { max-width: var(--page-max-width-narrow); margin-inline: auto; }
+  :scope[max-width="wide"]   { max-width: var(--page-max-width-wide);   margin-inline: auto; }
+  :scope[max-width="full"]   { max-width: var(--page-max-width-full); }
+
+  /* ── Padding scale (mirrors --a-space-N) ── */
+  :scope[padding=""]  { padding: var(--page-padding-default); }
+  :scope[padding="0"] { padding: 0; }
+  :scope[padding="1"] { padding: var(--a-space-1); }
+  :scope[padding="2"] { padding: var(--a-space-2); }
+  :scope[padding="3"] { padding: var(--a-space-3); }
+  :scope[padding="4"] { padding: var(--a-space-4); }
+  :scope[padding="5"] { padding: var(--a-space-5); }
+  :scope[padding="6"] { padding: var(--a-space-6); }
+  :scope[padding="7"] { padding: var(--a-space-7); }
+  :scope[padding="8"] { padding: var(--a-space-8); }
+
+  /* ── Scroll container ── */
+  :scope[scroll] {
+    overflow-y: auto;
+    height: 100%;
+    overscroll-behavior: contain;
+  }
+
+  /* ── Sticky-header support ── */
+  :scope[sticky-header] > :where(header, header-ui) {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: var(--page-sticky-bg);
+    transition: border-color 150ms ease, box-shadow 150ms ease;
+  }
+
+  :scope[data-header-stuck] > :where(header, header-ui) {
+    border-block-end: var(--page-sticky-border);
+    box-shadow: var(--page-sticky-shadow);
+  }
+}

package/components/page/page.js

@@ -0,0 +1,88 @@
+/**
+ * <page-ui> — Page container.
+ *
+ * Holds page-level chrome — header / content / footer — and manages
+ * max-width clamps, padding scale, optional scroll-container, and an
+ * optional sticky-header sentinel. Compose with the slot primitives
+ * (`<header-ui>`, `<section-ui>`, `<footer-ui>`); the page's @scope
+ * rules style them.
+ *
+ * Authoring:
+ *   <page-ui sticky-header max-width="prose" padding="6">
+ *     <header-ui>...</header-ui>     <!-- page title + actions -->
+ *     <section-ui>...</section-ui>   <!-- main content -->
+ *     <footer-ui>...</footer-ui>     <!-- optional -->
+ *   </page-ui>
+ *
+ * Attributes:
+ *   scroll          — boolean. Page is the scroll container (overflow-y: auto).
+ *   max-width       — '' | 'prose' (65ch) | 'narrow' (80ch) | 'wide' (1080px) | 'full' (100%).
+ *   padding         — '' | '0'..'8' (mapped to --a-space-N).
+ *   sticky-header   — boolean. Installs IntersectionObserver sentinel before the
+ *                     first <header> / <header-ui> child; sets [data-header-stuck]
+ *                     on the page when the sentinel scrolls out of view.
+ *
+ * ADR: .brain/adrs/0009-promote-app-shell-and-page-to-components.md.
+ */
+
+import { AdiaElement } from '../../core/element.js';
+
+class AdiaPage extends AdiaElement {
+  static properties = {
+    scroll:       { type: Boolean, default: false, reflect: true },
+    maxWidth:     { type: String,  default: '',    attribute: 'max-width', reflect: true },
+    padding:      { type: String,  default: '',    reflect: true },
+    stickyHeader: { type: Boolean, default: false, attribute: 'sticky-header', reflect: true },
+  };
+
+  static template = () => null;
+
+  #sentinel = null;
+  #observer = null;
+
+  connected() {
+    if (this.stickyHeader) this.#installSticky();
+  }
+
+  disconnected() {
+    this.#teardownSticky();
+  }
+
+  render() {
+    // Sticky-header attribute changes between renders → install / tear down.
+    if (this.stickyHeader && !this.#sentinel) this.#installSticky();
+    if (!this.stickyHeader && this.#sentinel) this.#teardownSticky();
+  }
+
+  #installSticky() {
+    const header = this.querySelector(':scope > :is(header, header-ui)');
+    if (!header) return;
+
+    if (!this.#sentinel) {
+      this.#sentinel = document.createElement('div');
+      this.#sentinel.setAttribute('data-page-sentinel', '');
+      this.#sentinel.style.cssText = 'height: 0; width: 0; pointer-events: none;';
+      header.insertAdjacentElement('beforebegin', this.#sentinel);
+    }
+
+    if (!this.#observer) {
+      this.#observer = new IntersectionObserver((entries) => {
+        this.toggleAttribute('data-header-stuck', !entries[0].isIntersecting);
+      }, { threshold: 0 });
+    }
+
+    this.#observer.observe(this.#sentinel);
+  }
+
+  #teardownSticky() {
+    this.#observer?.disconnect();
+    this.#observer = null;
+    this.#sentinel?.remove();
+    this.#sentinel = null;
+    this.removeAttribute('data-header-stuck');
+  }
+}
+
+customElements.define('page-ui', AdiaPage);
+
+export { AdiaPage };