@chromvoid/uikit 0.1.0

package/specs/components/drawer.md

@@ -0,0 +1,216 @@
+# cv-drawer
+
+Slide-out panel dialog anchored to a viewport edge, used for navigation, forms, or supplementary content.
+
+**Headless:** [`createDrawer`](https://github.com/chromvoid/headless-ui/blob/main/specs/components/drawer.md)
+
+## Anatomy
+
+```
+<cv-drawer> (host)
+├── <button part="trigger">
+│   └── <slot name="trigger">
+└── <div part="overlay"> (hidden when closed)
+    └── <section part="panel" role="dialog|alertdialog" data-placement="...">
+        ├── <header part="header">
+        │   ├── <h2 part="title" id="...">
+        │   │   └── <slot name="title">
+        │   ├── <p part="description" id="...">
+        │   │   └── <slot name="description">
+        │   └── <button part="header-close" aria-label="Close">
+        │       └── <slot name="header-close">
+        ├── <div part="body">
+        │   └── <slot>
+        └── <footer part="footer">
+            └── <slot name="footer">
+```
+
+## Attributes
+
+| Attribute                  | Type    | Default    | Description                                                        |
+| -------------------------- | ------- | ---------- | ------------------------------------------------------------------ |
+| `open`                     | Boolean | `false`    | Whether the drawer is visible                                      |
+| `modal`                    | Boolean | `true`     | Enables modal behavior (focus trap, scroll lock, backdrop)         |
+| `placement`                | String  | `"end"`    | Edge the drawer slides from: `start` \| `end` \| `top` \| `bottom` |
+| `type`                     | String  | `"dialog"` | ARIA role type: `dialog` \| `alertdialog`                          |
+| `close-on-escape`          | Boolean | `true`     | Whether Escape key closes the drawer                               |
+| `close-on-outside-pointer` | Boolean | `true`     | Whether clicking outside closes the drawer                         |
+| `close-on-outside-focus`   | Boolean | `true`     | Whether focusing outside closes the drawer                         |
+| `initial-focus-id`         | String  | ---        | Id of element to focus when drawer opens                           |
+| `no-header`                | Boolean | `false`    | Hides the header (title, description, header close button)         |
+
+## Slots
+
+| Slot           | Description                                              |
+| -------------- | -------------------------------------------------------- |
+| `(default)`    | Drawer body content                                      |
+| `trigger`      | Content for the trigger button                           |
+| `title`        | Drawer title text                                        |
+| `description`  | Description text below the title                         |
+| `header-close` | Icon content for the header close button (defaults to X) |
+| `footer`       | Footer content (action buttons, etc.)                    |
+
+## CSS Parts
+
+| Part           | Element     | Description                                                 |
+| -------------- | ----------- | ----------------------------------------------------------- |
+| `trigger`      | `<button>`  | Trigger button that opens the drawer                        |
+| `overlay`      | `<div>`     | Backdrop/overlay container                                  |
+| `panel`        | `<section>` | Drawer panel with `role="dialog"` or `role="alertdialog"`   |
+| `header`       | `<header>`  | Header area containing title, description, and close button |
+| `title`        | `<h2>`      | Drawer title element                                        |
+| `description`  | `<p>`       | Drawer description element                                  |
+| `header-close` | `<button>`  | Header close icon button                                    |
+| `body`         | `<div>`     | Body content area                                           |
+| `footer`       | `<footer>`  | Footer area for user-provided action buttons                |
+
+## CSS Custom Properties
+
+| Property                                  | Default                                       | Description                                                                                           |
+| ----------------------------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| `--cv-drawer-z-index`                     | `40`                                          | Z-index of the overlay layer                                                                          |
+| `--cv-drawer-size`                        | `360px`                                       | Inline size (for `start`/`end`) or block size (for `top`/`bottom`) of the panel                       |
+| `--cv-drawer-max-size`                    | `calc(100dvh - 32px)`                         | Maximum size before internal scrolling (block axis for `top`/`bottom`, inline axis for `start`/`end`) |
+| `--cv-drawer-header-spacing`              | `var(--cv-space-4, 16px)`                     | Header padding                                                                                        |
+| `--cv-drawer-body-spacing`                | `var(--cv-space-4, 16px)`                     | Body padding                                                                                          |
+| `--cv-drawer-footer-spacing`              | `var(--cv-space-4, 16px)`                     | Footer padding                                                                                        |
+| `--cv-drawer-overlay-color`               | `color-mix(in oklab, black 56%, transparent)` | Backdrop overlay color                                                                                |
+| `--cv-drawer-overlay-transition-duration` | `0ms`                                         | Overlay opacity transition duration                                                                   |
+| `--cv-drawer-overlay-closed-opacity`      | `1`                                           | Overlay opacity while the panel is animating out or before the panel animates in                      |
+| `--cv-drawer-border-radius`               | `var(--cv-radius-lg, 14px)`                   | Panel border radius (applied to the inward edge only)                                                 |
+| `--cv-drawer-transition-duration`         | `250ms`                                       | Slide transition duration                                                                             |
+
+## Visual States
+
+| Host selector                 | Description                                                         |
+| ----------------------------- | ------------------------------------------------------------------- |
+| `:host([open])`               | Drawer visible, overlay shown                                       |
+| `:host([modal])`              | Modal mode active (focus trap, scroll lock, backdrop)               |
+| `:host([type="alertdialog"])` | Alert dialog mode with `role="alertdialog"`                         |
+| `:host([no-header])`          | Header section hidden                                               |
+| `:host([placement="start"])`  | Panel anchored to the inline-start edge (left in LTR, right in RTL) |
+| `:host([placement="end"])`    | Panel anchored to the inline-end edge (right in LTR, left in RTL)   |
+| `:host([placement="top"])`    | Panel anchored to the top edge                                      |
+| `:host([placement="bottom"])` | Panel anchored to the bottom edge                                   |
+
+### Placement layout rules
+
+- `start` / `end`: Panel stretches full viewport block size; inline size set by `--cv-drawer-size`. Border radius applied to the inner vertical edge.
+- `top` / `bottom`: Panel stretches full viewport inline size; block size set by `--cv-drawer-size`. Border radius applied to the inner horizontal edge.
+- `start` and `end` follow CSS logical directions and automatically flip in RTL layouts.
+
+## Events
+
+| Event           | Detail            | Description                                        |
+| --------------- | ----------------- | -------------------------------------------------- |
+| `cv-input`      | `{open: boolean}` | Fires when open state changes via user interaction |
+| `cv-change`     | `{open: boolean}` | Fires when open state commits                      |
+| `cv-show`       | ---               | Fires when drawer begins to open                   |
+| `cv-after-show` | ---               | Fires after drawer open animation completes        |
+| `cv-hide`       | ---               | Fires when drawer begins to close                  |
+| `cv-after-hide` | ---               | Fires after drawer close animation completes       |
+
+`cv-input` and `cv-change` fire only for user-initiated state changes (trigger click, Escape, outside pointer, outside focus, header close). Programmatic `open` attribute changes do not emit these events.
+
+## Reactive State Mapping
+
+`cv-drawer` is a visual adapter over headless `createDrawer`.
+
+| UIKit Property             | Direction      | Headless Binding                                                                       |
+| -------------------------- | -------------- | -------------------------------------------------------------------------------------- |
+| `open`                     | attr -> action | `actions.open()` / `actions.close()`                                                   |
+| `modal`                    | attr -> option | passed as `isModal` in `createDrawer(options)`                                         |
+| `placement`                | attr -> action | `actions.setPlacement(placement)` and passed as `placement` in `createDrawer(options)` |
+| `type`                     | attr -> option | passed as `type` in `createDrawer(options)`                                            |
+| `close-on-escape`          | attr -> option | passed as `closeOnEscape` in `createDrawer(options)`                                   |
+| `close-on-outside-pointer` | attr -> option | passed as `closeOnOutsidePointer` in `createDrawer(options)`                           |
+| `close-on-outside-focus`   | attr -> option | passed as `closeOnOutsideFocus` in `createDrawer(options)`                             |
+| `initial-focus-id`         | attr -> option | passed as `initialFocusId` in `createDrawer(options)`                                  |
+| `no-header`                | attr -> DOM    | controls header visibility (UIKit-only, no headless binding)                           |
+
+| Headless State                 | Direction       | DOM Reflection                                |
+| ------------------------------ | --------------- | --------------------------------------------- |
+| `state.isOpen()`               | state -> attr   | `[open]` host attribute                       |
+| `state.isModal()`              | state -> attr   | `[modal]` host attribute                      |
+| `state.type()`                 | state -> attr   | `[type]` host attribute                       |
+| `state.placement()`            | state -> attr   | `[placement]` host attribute                  |
+| `state.isFocusTrapped()`       | state -> effect | activates focus trap within the drawer        |
+| `state.shouldLockScroll()`     | state -> effect | applies `overflow: hidden` to `document.body` |
+| `state.restoreTargetId()`      | state -> effect | focuses the trigger element on close          |
+| `state.initialFocusTargetId()` | state -> effect | focuses the specified element on open         |
+
+- `contracts.getTriggerProps()` is spread onto `[part="trigger"]` to apply `role`, `aria-haspopup`, `aria-expanded`, `aria-controls`, `tabindex`, and click/keydown handlers.
+- `contracts.getOverlayProps()` is spread onto `[part="overlay"]` to apply `hidden`, `data-open`, and outside pointer/focus handlers.
+- `contracts.getPanelProps()` is spread onto `[part="panel"]` to apply `role` (`dialog` or `alertdialog`), `aria-modal`, `aria-labelledby`, `aria-describedby`, `data-placement`, `tabindex`, and keydown handler.
+- `contracts.getTitleProps()` is spread onto `[part="title"]` to apply the `id` for `aria-labelledby`.
+- `contracts.getDescriptionProps()` is spread onto `[part="description"]` to apply the `id` for `aria-describedby`.
+- `contracts.getHeaderCloseButtonProps()` is spread onto `[part="header-close"]` to apply `role`, `tabindex`, `aria-label: 'Close'`, and click handler.
+- UIKit dispatches `cv-input` and `cv-change` events by observing `isOpen` changes triggered by user interaction (not by controlled `open` attribute changes).
+- UIKit dispatches `cv-show`/`cv-after-show`/`cv-hide`/`cv-after-hide` lifecycle events to bracket CSS transitions.
+- UIKit owns scroll lock implementation, focus trap implementation, focus restoration, backdrop rendering, slide animations, and CSS transitions -- headless provides signals, UIKit applies side effects.
+
+## Usage
+
+```html
+<!-- Basic drawer (slides from end) -->
+<cv-drawer>
+  <span slot="trigger">Open drawer</span>
+  <span slot="title">Settings</span>
+  <p>Drawer body content here.</p>
+  <div slot="footer">
+    <cv-button variant="ghost">Cancel</cv-button>
+    <cv-button variant="primary">Save</cv-button>
+  </div>
+</cv-drawer>
+
+<!-- Left-side navigation drawer -->
+<cv-drawer placement="start">
+  <span slot="trigger">Menu</span>
+  <span slot="title">Navigation</span>
+  <nav>
+    <a href="/home">Home</a>
+    <a href="/settings">Settings</a>
+  </nav>
+</cv-drawer>
+
+<!-- Bottom sheet drawer -->
+<cv-drawer placement="bottom">
+  <span slot="trigger">Show details</span>
+  <span slot="title">Details</span>
+  <p>Content slides up from the bottom.</p>
+</cv-drawer>
+
+<!-- Top drawer -->
+<cv-drawer placement="top">
+  <span slot="trigger">Notifications</span>
+  <span slot="title">Notifications</span>
+  <p>Notification content slides down from the top.</p>
+</cv-drawer>
+
+<!-- Non-modal drawer -->
+<cv-drawer modal="false">
+  <span slot="trigger">Show panel</span>
+  <span slot="title">Side panel</span>
+  <p>This drawer does not block the page.</p>
+</cv-drawer>
+
+<!-- Alert drawer -->
+<cv-drawer type="alertdialog">
+  <span slot="trigger">Delete account</span>
+  <span slot="title">Are you sure?</span>
+  <span slot="description">This action is permanent and cannot be undone.</span>
+  <div slot="footer">
+    <cv-button variant="ghost">Cancel</cv-button>
+    <cv-button variant="danger">Delete</cv-button>
+  </div>
+</cv-drawer>
+
+<!-- Without header -->
+<cv-drawer no-header>
+  <span slot="trigger">Quick panel</span>
+  <p>Minimal drawer with body content only.</p>
+  <div slot="footer">
+    <cv-button variant="primary">Done</cv-button>
+  </div>
+</cv-drawer>
+```

package/specs/components/feed.md

@@ -0,0 +1,266 @@
+# cv-feed
+
+Bidirectional infinite-scrolling feed container that dynamically loads articles as the user scrolls, with APG-compliant keyboard navigation and focus management.
+
+**Headless:** [`createFeed`](https://github.com/chromvoid/headless-ui/blob/main/specs/components/feed.md)
+
+## Cross-Spec Consistency
+
+This document is the UIKit surface contract for Feed.
+
+- Headless `createFeed` is the source of truth for state, transitions, and invariants.
+- UIKit mirrors headless contracts through DOM attributes and events.
+- Any intentional divergence between UIKit and headless MUST be documented in both specs.
+
+## Anatomy
+
+```
+<cv-feed> (host)
+└── <div part="base" role="feed">
+    ├── <div part="sentinel-top">                ← IntersectionObserver target for loading newer
+    ├── <div part="loading-indicator" aria-hidden="true">  ← only when [loading]
+    │   └── <slot name="loading">
+    ├── <slot name="empty">                      ← only when [empty]
+    ├── <slot name="error">                      ← only when [error]
+    ├── <slot>                                   ← accepts <cv-feed-article> children
+    └── <div part="sentinel-bottom">             ← IntersectionObserver target for loading more
+```
+
+## Attributes
+
+| Attribute | Type    | Default | Description                                                              |
+| --------- | ------- | ------- | ------------------------------------------------------------------------ |
+| `label`   | String  | `""`    | Accessible name for the feed (`aria-label`)                              |
+| `busy`    | Boolean | `false` | Reflects `aria-busy` during load operations                              |
+| `loading` | Boolean | `false` | Shows loading indicator                                                  |
+| `empty`   | Boolean | `false` | Indicates no articles are loaded (read-only, reflected from headless)    |
+| `error`   | Boolean | `false` | Indicates an error state is present (read-only, reflected from headless) |
+
+## Slots
+
+| Slot        | Description                                      |
+| ----------- | ------------------------------------------------ |
+| `(default)` | One or more `<cv-feed-article>` children         |
+| `empty`     | Content shown when the feed has no articles      |
+| `error`     | Content shown when the feed is in an error state |
+| `loading`   | Custom loading indicator content                 |
+
+## CSS Parts
+
+| Part                | Element  | Description                                           |
+| ------------------- | -------- | ----------------------------------------------------- |
+| `base`              | `<div>`  | Root wrapper with `role="feed"`                       |
+| `sentinel-top`      | `<div>`  | Top intersection sentinel for loading newer content   |
+| `sentinel-bottom`   | `<div>`  | Bottom intersection sentinel for loading more content |
+| `empty`             | `<slot>` | Empty state slot wrapper                              |
+| `error`             | `<slot>` | Error state slot wrapper                              |
+| `loading-indicator` | `<div>`  | Loading indicator wrapper                             |
+
+## CSS Custom Properties
+
+| Property                       | Default                   | Description                                         |
+| ------------------------------ | ------------------------- | --------------------------------------------------- |
+| `--cv-feed-gap`                | `var(--cv-space-3, 12px)` | Spacing between articles                            |
+| `--cv-feed-padding-block`      | `var(--cv-space-3, 12px)` | Vertical padding of the feed container              |
+| `--cv-feed-padding-inline`     | `0`                       | Horizontal padding of the feed container            |
+| `--cv-feed-sentinel-height`    | `1px`                     | Height of sentinel elements (should remain minimal) |
+| `--cv-feed-loading-min-height` | `48px`                    | Minimum height of the loading indicator area        |
+
+## Visual States
+
+| Host selector      | Description                                                       |
+| ------------------ | ----------------------------------------------------------------- |
+| `:host([busy])`    | Feed is busy loading content; `aria-busy="true"` on the feed root |
+| `:host([loading])` | Loading indicator is visible                                      |
+| `:host([empty])`   | Feed has no articles; empty slot is rendered                      |
+| `:host([error])`   | Feed has an error; error slot is rendered                         |
+
+## ARIA Contract
+
+- Root element has `role="feed"`
+- Root element exposes `aria-label` (from `label` attribute) and `aria-busy` (from `busy` attribute)
+- The feed container itself is NOT focusable
+- Articles are focusable via roving tabindex managed by headless
+- `Ctrl+End` and `Ctrl+Home` move focus outside the feed (adapter responsibility)
+
+All ARIA attributes on the feed root are derived from `contracts.getFeedProps()`. UIKit does not compute ARIA state independently.
+
+## Events
+
+| Event            | Detail | Description                                                               |
+| ---------------- | ------ | ------------------------------------------------------------------------- |
+| `cv-load-more`   | `{}`   | Fired when the bottom sentinel enters the viewport (IntersectionObserver) |
+| `cv-load-newer`  | `{}`   | Fired when the top sentinel enters the viewport (IntersectionObserver)    |
+| `cv-exit-after`  | `{}`   | Fired on `Ctrl+End`; consumer should move focus after the feed            |
+| `cv-exit-before` | `{}`   | Fired on `Ctrl+Home`; consumer should move focus before the feed          |
+
+These events are output-only signals. The feed does not use `input` or `change` events because it has no user-modifiable value state.
+
+## Reactive State Mapping
+
+`cv-feed` is a visual adapter over headless `createFeed`.
+
+### Attribute to Headless (UIKit -> Headless)
+
+| UIKit Property | Direction      | Headless Binding                               |
+| -------------- | -------------- | ---------------------------------------------- |
+| `label`        | attr -> option | passed as `ariaLabel` in `createFeed(options)` |
+| `busy`         | attr -> action | `actions.setBusy(value)`                       |
+
+### Headless to DOM (Headless -> UIKit)
+
+| Headless State            | Direction       | DOM Reflection                                   |
+| ------------------------- | --------------- | ------------------------------------------------ |
+| `state.isBusy()`          | state -> attr   | `[busy]` host attribute                          |
+| `state.isLoading()`       | state -> attr   | `[loading]` host attribute                       |
+| `state.isEmpty()`         | state -> attr   | `[empty]` host attribute                         |
+| `state.hasError()`        | state -> attr   | `[error]` host attribute                         |
+| `state.error()`           | state -> render | error message available for the error slot       |
+| `state.canLoadMore()`     | state -> render | bottom sentinel visibility / observer activation |
+| `state.canLoadNewer()`    | state -> render | top sentinel visibility / observer activation    |
+| `state.articleIds()`      | state -> render | ordered list for rendering articles              |
+| `state.activeArticleId()` | state -> render | focus management on child articles               |
+
+### Contract Spreading
+
+- `contracts.getFeedProps()` is spread onto `[part="base"]` -- applies `role`, `aria-label`, `aria-busy`
+- `contracts.getArticleProps(articleId)` is spread onto each `cv-feed-article` child -- applies `role`, `tabindex`, `aria-posinset`, `aria-setsize`, `aria-disabled`, `data-active`, `onFocus`
+
+### UIKit-Only Concerns (NOT in headless)
+
+- IntersectionObserver setup on `[part="sentinel-top"]` and `[part="sentinel-bottom"]`
+- DOM focus transfer for `Ctrl+End` / `Ctrl+Home` (dispatches `cv-exit-after` / `cv-exit-before` events)
+- Empty state and error state conditional slot rendering
+- Loading indicator rendering
+- `cv-load-more` and `cv-load-newer` event dispatch
+
+## Behavioral Contract
+
+### Bidirectional Loading
+
+- The bottom sentinel `[part="sentinel-bottom"]` is observed via IntersectionObserver. When it intersects the viewport and `state.canLoadMore()` is `true`, `actions.loadMore()` is called and `cv-load-more` is dispatched.
+- The top sentinel `[part="sentinel-top"]` is observed via IntersectionObserver. When it intersects the viewport and `state.canLoadNewer()` is `true`, `actions.loadNewer()` is called and `cv-load-newer` is dispatched.
+- Concurrent load operations are guarded by headless (second call is a no-op while loading).
+
+### Keyboard Navigation
+
+Per W3C APG Feed Pattern:
+
+- `PageDown`: move focus to the next article (headless `focusNextArticle`)
+- `PageUp`: move focus to the previous article (headless `focusPrevArticle`)
+- `Ctrl+End`: dispatch `cv-exit-after` event; consumer moves focus after the feed
+- `Ctrl+Home`: dispatch `cv-exit-before` event; consumer moves focus before the feed
+
+Keyboard events are forwarded to `actions.handleKeyDown(event)`. The return value determines adapter behavior:
+
+- `'next'` / `'prev'`: headless handled focus movement
+- `'exit-after'`: UIKit dispatches `cv-exit-after`
+- `'exit-before'`: UIKit dispatches `cv-exit-before`
+- `null`: key not handled, no action
+
+### Conditional Rendering
+
+- When `state.isEmpty()` is `true`, the `empty` named slot is rendered and the default slot is hidden.
+- When `state.hasError()` is `true`, the `error` named slot is rendered.
+- When `state.isLoading()` is `true`, the `loading` named slot / default loading indicator is rendered.
+- Empty and error states are not mutually exclusive with loading; the feed may show a loading indicator alongside an error slot.
+
+## Usage
+
+```html
+<!-- Basic feed -->
+<cv-feed label="Latest posts">
+  <cv-feed-article article-id="post-1">
+    <h3>First Post</h3>
+    <p>Content of the first post.</p>
+  </cv-feed-article>
+  <cv-feed-article article-id="post-2">
+    <h3>Second Post</h3>
+    <p>Content of the second post.</p>
+  </cv-feed-article>
+</cv-feed>
+
+<!-- Feed with empty and error states -->
+<cv-feed label="Activity feed">
+  <div slot="empty">No activity yet.</div>
+  <div slot="error">Failed to load. Please try again.</div>
+  <div slot="loading">Loading articles...</div>
+</cv-feed>
+
+<!-- Feed with event handling for infinite scroll -->
+<cv-feed
+  label="News feed"
+  @cv-load-more="${handleLoadMore}"
+  @cv-load-newer="${handleLoadNewer}"
+  @cv-exit-after="${handleExitAfter}"
+  @cv-exit-before="${handleExitBefore}"
+>
+  <cv-feed-article article-id="news-1">
+    <h3>Breaking News</h3>
+    <p>Details here.</p>
+  </cv-feed-article>
+</cv-feed>
+```
+
+## Child Elements
+
+### cv-feed-article
+
+Individual article within a feed. The parent `cv-feed` manages all ARIA attributes on this element via headless contracts.
+
+#### Anatomy
+
+```
+<cv-feed-article> (host)
+└── <div part="base" role="article">
+    └── <slot>
+```
+
+#### Attributes
+
+| Attribute    | Type    | Default | Description                                                               |
+| ------------ | ------- | ------- | ------------------------------------------------------------------------- |
+| `article-id` | String  | `""`    | Required unique identifier for this article within the feed               |
+| `active`     | Boolean | `false` | Whether this article is the currently focused article. Managed by parent. |
+| `disabled`   | Boolean | `false` | Whether this article is disabled (skipped during keyboard navigation)     |
+
+#### Slots
+
+| Slot        | Description     |
+| ----------- | --------------- |
+| `(default)` | Article content |
+
+#### CSS Parts
+
+| Part   | Element | Description                        |
+| ------ | ------- | ---------------------------------- |
+| `base` | `<div>` | Root wrapper with `role="article"` |
+
+#### CSS Custom Properties
+
+| Property                          | Default                                      | Description                             |
+| --------------------------------- | -------------------------------------------- | --------------------------------------- |
+| `--cv-feed-article-padding`       | `var(--cv-space-3, 12px)`                    | Padding inside the article              |
+| `--cv-feed-article-border-radius` | `var(--cv-radius-sm, 6px)`                   | Border radius of the article            |
+| `--cv-feed-article-focus-ring`    | `2px solid var(--cv-color-primary, #65d7ff)` | Focus ring style for the active article |
+
+#### Visual States
+
+| Host selector       | Description                                                 |
+| ------------------- | ----------------------------------------------------------- |
+| `:host([active])`   | Article is the currently focused/active article in the feed |
+| `:host([disabled])` | Article is disabled and skipped during keyboard navigation  |
+
+#### Reactive State Mapping
+
+`cv-feed-article` receives its ARIA props from the parent `cv-feed` via `contracts.getArticleProps(articleId)`:
+
+| Contract Prop   | DOM Reflection                                                |
+| --------------- | ------------------------------------------------------------- |
+| `role`          | `role="article"` on `[part="base"]`                           |
+| `tabindex`      | `tabindex="0"` (active) or `tabindex="-1"` (inactive) on host |
+| `aria-posinset` | Position within the feed (1-based)                            |
+| `aria-setsize`  | Total article count or `-1` if unknown                        |
+| `aria-disabled` | `"true"` when article is disabled                             |
+| `data-active`   | `"true"` or `"false"` reflecting active state                 |
+| `onFocus`       | Sets this article as active in headless state                 |