@adia-ai/web-components 0.8.12 → 0.8.14

package/components/display-field/display-field.examples.md

@@ -1,44 +1,19 @@
 # display-field — Examples
 
-A display-only labeled value. No input semantics (no focus, no
-contenteditable, no form participation). For an editable field use
-`field-ui` + `input-ui`; for a metric use `stat-ui`; for many read-only
-pairs use `description-list-ui`.
-
-## Basic
+## basic
 
 ```html
 <display-field-ui label="Account ID" value="acct_1Q9xK2"></display-field-ui>
 ```
 
-## Masked value
-
-```html
-<display-field-ui
-  label="Card on file"
-  value="•••• •••• •••• 4242"
-  variant="masked"></display-field-ui>
-```
-
-## With a leading icon and a hint
+## variant="masked"
 
 ```html
-<display-field-ui
-  label="Card on file"
-  value="•••• 4242"
-  variant="masked"
-  icon="lock"
-  hint="Expires 12/26"></display-field-ui>
+<display-field-ui label="Card on file" value="•••• •••• •••• 4242" variant="masked"></display-field-ui>
 ```
 
-## Hosting a third-party element (Stripe Element)
-
-Slot the foreign element as the default child; it takes the value region
-under the label. The host's `role="group"` + `aria-labelledby` names it for
-assistive tech.
+## icon + hint
 
 ```html
-<display-field-ui label="Card number">
-  <div id="card-element"><!-- stripe.elements().create('card').mount('#card-element') --></div>
-</display-field-ui>
+<display-field-ui label="Card on file" value="•••• 4242" variant="masked" icon="lock" hint="Expires 12/26"></display-field-ui>
 ```

package/components/drawer/drawer.examples.md

@@ -1,42 +1,16 @@
 # drawer — Examples
 
-## Authoring
-
-```html
-<drawer-ui side="right" size="md">
-  <header>
-    <span slot="icon">
-      <avatar-ui icon="user"></avatar-ui>
-    </span>
-    <span slot="heading">
-      <text-ui strong>Profile</text-ui>
-      <badge-ui text="Pro" variant="accent"></badge-ui>
-    </span>
-    <span slot="description">
-      <text-ui color="subtle" size="sm">Update your account</text-ui>
-    </span>
-  </header>
-  <section>...</section>
-  <footer>
-    <grid-ui>
-      <button-ui text="Cancel" variant="ghost"></button-ui>
-      <button-ui text="Save" variant="primary"></button-ui>
-    </grid-ui>
-  </footer>
-</drawer-ui>
-```
-
 ## side
 
 ```html
 <button-ui text="Left" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
 <drawer-ui text="Navigation" side="left" size="sm">
-  <section>
-    <col-ui gap="1">
-      <button-ui text="Dashboard" icon="house" variant="ghost"></button-ui>
-      <button-ui text="Projects" icon="folder" variant="ghost"></button-ui>
-      <button-ui text="Settings" icon="gear" variant="ghost"></button-ui>
-    </col-ui>
+  <section bleed>
+    <nav-ui>
+      <nav-item-ui icon="house" text="Dashboard" value="dashboard"></nav-item-ui>
+      <nav-item-ui icon="folder" text="Projects" value="projects"></nav-item-ui>
+      <nav-item-ui icon="gear" text="Settings" value="settings"></nav-item-ui>
+    </nav-ui>
   </section>
 </drawer-ui>
 ```
@@ -61,3 +35,14 @@
   </section>
 </drawer-ui>
 ```
+
+## text
+
+```html
+<button-ui text="text=&quot;Settings&quot;" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
+<drawer-ui text="Settings" side="right">
+  <section>
+    <text-ui color="subtle">No header authored — the drawer stamps the title from the text attribute.</text-ui>
+  </section>
+</drawer-ui>
+```

package/components/field/field.examples.md

@@ -8,22 +8,41 @@
 </field-ui>
 ```
 
-## Inline layout
+## Typography registers
 
 ```html
-<field-ui inline label="Search">
-  <input-ui type="search" placeholder="Type a command…"></input-ui>
-</field-ui>
+<row-ui gap="6" align="start" wrap>
+  <col-ui gap="2">
+    <text-ui variant="caption" color="muted">verse</text-ui>
+    <div verse style="width:220px">
+      <field-ui label="Email">
+        <input-ui type="email" placeholder="you@example.com"></input-ui>
+      </field-ui>
+    </div>
+  </col-ui>
+  <col-ui gap="2">
+    <text-ui variant="caption" color="muted">regular</text-ui>
+    <div style="width:220px">
+      <field-ui label="Email">
+        <input-ui type="email" placeholder="you@example.com"></input-ui>
+      </field-ui>
+    </div>
+  </col-ui>
+  <col-ui gap="2">
+    <text-ui variant="caption" color="muted">prose</text-ui>
+    <div prose style="width:220px">
+      <field-ui label="Email">
+        <input-ui type="email" placeholder="you@example.com"></input-ui>
+      </field-ui>
+    </div>
+  </col-ui>
+</row-ui>
 ```
 
-## Any form control
+## Inline layout
 
 ```html
-<field-ui label="Priority">
-  <select-ui>
-    <option value="low">Low</option>
-    <option value="med" selected>Medium</option>
-    <option value="high">High</option>
-  </select-ui>
+<field-ui inline label="Search">
+  <input-ui type="search" placeholder="Type a command…"></input-ui>
 </field-ui>
 ```

package/components/grid/grid.examples.md

@@ -19,3 +19,30 @@
   <card-ui>Side panel</card-ui>
 </grid-ui>
 ```
+
+## Rendered demos
+
+```html
+<grid-ui columns="4" gap="3">
+  <card-ui>
+    <section>
+      <stat-ui label="Revenue" value="$12,400" change="+8.4%" trend="up" icon="currency-dollar"></stat-ui>
+    </section>
+  </card-ui>
+  <card-ui>
+    <section>
+      <stat-ui label="Users" value="2,840" change="+12%" trend="up" icon="users"></stat-ui>
+    </section>
+  </card-ui>
+  <card-ui>
+    <section>
+      <stat-ui label="Conversion" value="3.2%" change="-0.3%" trend="down" icon="chart-line"></stat-ui>
+    </section>
+  </card-ui>
+  <card-ui>
+    <section>
+      <stat-ui label="Avg. Order" value="$87" change="+$4" trend="up" icon="receipt"></stat-ui>
+    </section>
+  </card-ui>
+</grid-ui>
+```

package/components/heatmap/heatmap.examples.md

@@ -12,8 +12,8 @@
 <heatmap-ui id="hm-matrix" type="matrix" rows="7" cols="12" color-scheme="accent"></heatmap-ui>
 ```
 
-## Data stream (data-stream-*)
+## color-scheme
 
 ```html
-<heatmap-ui type="matrix" rows="5" cols="4" color-scheme="accent" aria-label="Commit activity from activity.json" data-stream-src="/site/mock/activity.json"></heatmap-ui>
+<heatmap-ui type="matrix" rows="7" cols="12" color-scheme="warning"></heatmap-ui>
 ```

package/components/inline-edit/inline-edit.examples.md

@@ -0,0 +1,32 @@
+# inline-edit — Examples
+
+## Basic click-to-edit
+
+```html
+<col-ui gap="2">
+  <text-ui size="sm" color="subtle">Draft document title</text-ui>
+  <h2 style="margin: 0;">
+    <inline-edit-ui value="Quarterly revenue report — Q4 2025"></inline-edit-ui>
+  </h2>
+</col-ui>
+```
+
+## Empty + placeholder
+
+```html
+<col-ui gap="2">
+  <text-ui size="sm" color="subtle">Untitled item</text-ui>
+  <h3 style="margin: 0;">
+    <inline-edit-ui placeholder="Click to name this draft"></inline-edit-ui>
+  </h3>
+</col-ui>
+```
+
+## Commit policy
+
+```html
+<col-ui gap="2">
+  <text-ui size="sm" color="subtle">commit="blur" — default</text-ui>
+  <inline-edit-ui value="Click outside to save" commit="blur"></inline-edit-ui>
+</col-ui>
+```

package/components/integration-card/integration-card.examples.md

@@ -1,41 +1,24 @@
 # integration-card — Examples
 
-## Available (default)
+## status
 
 ```html
-<integration-card-ui
-  provider="slack"
-  name="Slack"
-  logo="/integrations/slack.svg"
-  description="Send AI replies and notifications to channels."
-  status="available">
-</integration-card-ui>
+<integration-card-ui provider="slack" name="Slack" description="Send AI replies and notifications to channels." status="available"></integration-card-ui>
 ```
 
-## Connected — overflow menu
+## logo
 
 ```html
-<integration-card-ui provider="github" name="GitHub" status="connected"
-                      logo="/integrations/github.svg"
-                      description="Sync issues and pull requests.">
-  <menu-ui slot="actions" label="More" trigger-icon="dots-three" trigger-variant="ghost">
-    <menu-item-ui action="reauth">Re-authenticate</menu-item-ui>
-    <menu-item-ui action="disconnect" variant="danger">Disconnect</menu-item-ui>
-  </menu-ui>
-</integration-card-ui>
+<integration-card-ui provider="webhook" name="Webhook" description="POST events to a custom endpoint." logo="lightning" status="available"></integration-card-ui>
 ```
 
-## Error — Retry
+## actions slot
 
 ```html
-<integration-card-ui provider="stripe" name="Stripe" status="error"
-                      error-message="Token expired — re-authenticate.">
-</integration-card-ui>
-```
-
-## Coming soon (non-interactive)
-
-```html
-<integration-card-ui provider="zapier" name="Zapier" status="coming-soon">
+<integration-card-ui provider="github" name="GitHub" description="Sync issues and pull requests." status="connected">
+  <menu-ui slot="actions" label="More" trigger-icon="dots-three" trigger-variant="ghost">
+    <menu-item-ui action="reauth">Re-authenticate</menu-item-ui>
+    <menu-item-ui action="disconnect" variant="danger">Disconnect</menu-item-ui>
+  </menu-ui>
 </integration-card-ui>
 ```

package/components/list-window/list-window.examples.md

@@ -1,73 +1,19 @@
 # list-window — Examples
 
-## basic — fixed-size rows
+## basic — fixed-size rows, 1000 items
 
 ```html
-<list-window-ui item-size="40" overscan="3" style="height:320px">
-</list-window-ui>
-<script>
-  const el = document.querySelector('list-window-ui');
-  el.renderRow = (item) => {
-    const row = document.createElement('list-item-ui');
-    row.setAttribute('text', item.text);
-    return row;
-  };
-  el.items = Array.from({ length: 1000 }, (_, i) => ({
-    id: `b-${i}`,
-    text: `Row ${i + 1}`,
-  }));
-</script>
+<list-window-ui id="lw-basic" item-size="40" overscan="3" style="height: 320px; border: 1px solid var(--md-sys-color-neutral-outline-variant); border-radius: var(--a-radius-md);"></list-window-ui>
 ```
 
 ## 10,000 rows
 
 ```html
-<list-window-ui item-size="32" overscan="5" style="height:320px">
-</list-window-ui>
-<script>
-  const el = document.querySelector('list-window-ui');
-  el.items = Array.from({ length: 10_000 }, (_, i) => ({
-    id: `lg-${i}`,
-    text: `Log line ${i}`,
-  }));
-</script>
+<list-window-ui id="lw-large" item-size="32" overscan="5" style="height: 320px; border: 1px solid var(--md-sys-color-neutral-outline-variant); border-radius: var(--a-radius-md); font-family: var(--a-font-mono);"></list-window-ui>
 ```
 
-## pin-bottom — chat-thread / log-tail
+## variable-height — feed-card rows
 
 ```html
-<list-window-ui item-size="28" pin-bottom style="height:240px">
-</list-window-ui>
-<script>
-  const el = document.querySelector('list-window-ui');
-  el.items = initialMessages;
-  // Appending keeps scroll pinned at the bottom.
-  el.items = [...el.items, ...newMessages];
-</script>
-```
-
-## variable-height — feed cards
-
-```html
-<list-window-ui estimated-size="120" overscan="2" style="height:360px">
-</list-window-ui>
-<script>
-  const el = document.querySelector('list-window-ui');
-  el.renderRow = (item) => buildCardElement(item);
-  el.items = cards;
-</script>
-```
-
-## loading state
-
-```html
-<list-window-ui item-size="48" loading style="height:240px"></list-window-ui>
-```
-
-## empty state
-
-```html
-<list-window-ui item-size="40" style="height:160px">
-  <div slot="empty">No items to display.</div>
-</list-window-ui>
+<list-window-ui id="lw-variable" estimated-size="120" overscan="2" style="height: 360px; border: 1px solid var(--md-sys-color-neutral-outline-variant); border-radius: var(--a-radius-md);"></list-window-ui>
 ```

package/components/loading-overlay/loading-overlay.examples.md

@@ -1,50 +1,33 @@
 # loading-overlay — Examples
 
-## Default (auto-stamped spinner)
-
-The host parent must be positioned (`position: relative` or similar);
-the overlay does not mutate parent layout. When the default slot is
-empty, a centered `<spinner-ui size="lg">` is auto-stamped.
-
-```html
-<card-ui style="position: relative;">
-  <section>
-    <table-ui id="orders" data-stream-src="/api/orders"></table-ui>
-    <loading-overlay-ui active label="Loading orders…"></loading-overlay-ui>
-  </section>
-</card-ui>
-```
-
-## Skeleton placeholder
-
-Pair `variant="transparent"` with a slotted skeleton stack to render
-shape-of-content placeholders instead of a centered spinner.
+## Default
 
 ```html
-<div style="position: relative;">
-  <loading-overlay-ui active variant="transparent" label="Loading content">
-    <stack-ui>
-      <skeleton-ui width="100%" height="1rem"></skeleton-ui>
-      <skeleton-ui width="80%"  height="1rem"></skeleton-ui>
-      <skeleton-ui width="60%"  height="1rem"></skeleton-ui>
-    </stack-ui>
-  </loading-overlay-ui>
+<div style="position:relative; width:240px; height:180px; padding:var(--a-space-4); border:1px solid var(--md-sys-color-neutral-outline-variant); border-radius:var(--a-radius-md);">
+  <p style="margin:0;">Card content the overlay is covering.</p>
+  <loading-overlay-ui active label="Loading…" delay="0"></loading-overlay-ui>
 </div>
 ```
 
-## Fast-load (no flash)
-
-The default 200 ms grace window suppresses paint on fast-resolving
-loads. If the underlying work resolves before the timer fires, the
-overlay never paints.
+## variant
 
 ```html
-<loading-overlay-ui active delay="200"></loading-overlay-ui>
+<div style="position:relative; width:200px; height:140px; padding:var(--a-space-4); border:1px solid var(--md-sys-color-neutral-outline-variant); border-radius:var(--a-radius-md);">
+  <p style="margin:0;">Content</p>
+  <loading-overlay-ui active variant="default" label="Loading" delay="0"></loading-overlay-ui>
+</div>
 ```
 
-For known-slow operations (server-side jobs, large uploads) opt out
-with `delay="0"`:
+## Skeleton placeholder
 
 ```html
-<loading-overlay-ui active delay="0" label="Generating report…"></loading-overlay-ui>
+<div style="position:relative; width:280px; height:200px; padding:var(--a-space-4); border:1px solid var(--md-sys-color-neutral-outline-variant); border-radius:var(--a-radius-md);">
+  <loading-overlay-ui active variant="transparent" label="Loading content" delay="0">
+    <div style="display:flex; flex-direction:column; gap:var(--a-space-2); width:100%; padding:var(--a-space-4); box-sizing:border-box;">
+      <skeleton-ui width="100%" height="1.2rem"></skeleton-ui>
+      <skeleton-ui width="80%" height="1rem"></skeleton-ui>
+      <skeleton-ui width="60%" height="1rem"></skeleton-ui>
+    </div>
+  </loading-overlay-ui>
+</div>
 ```

package/components/mark/mark.examples.md

@@ -0,0 +1,62 @@
+# mark — Examples
+
+## Search-result match
+
+```html
+<col-ui gap="3">
+  <text-ui size="lg">
+    Quarterly
+    <mark-ui>revenue</mark-ui>
+    report — Q4 2025
+  </text-ui>
+  <text-ui size="lg">
+    Annual
+    <mark-ui>revenue</mark-ui>
+    projections — 2026 outlook
+  </text-ui>
+  <text-ui size="lg">
+    Marketing spend vs
+    <mark-ui>revenue</mark-ui>
+    attribution
+  </text-ui>
+</col-ui>
+```
+
+## Variants
+
+```html
+<col-ui gap="2">
+  <text-ui>
+    <mark-ui>warning</mark-ui>
+    — the default; classic highlighter yellow.
+  </text-ui>
+  <text-ui>
+    <mark-ui variant="info">info</mark-ui>
+    — brand-color emphasis.
+  </text-ui>
+  <text-ui>
+    <mark-ui variant="success">success</mark-ui>
+    — added line, "new since".
+  </text-ui>
+  <text-ui>
+    <mark-ui variant="danger">danger</mark-ui>
+    — removed line, conflict.
+  </text-ui>
+  <text-ui>
+    <mark-ui variant="muted">muted</mark-ui>
+    — neutral emphasis.
+  </text-ui>
+</col-ui>
+```
+
+## Diff prose (success / danger)
+
+```html
+<text-ui>
+  We now ship
+  <mark-ui variant="success">light-DOM web components</mark-ui>
+  for theme-aware rendering, replacing the previous
+  <mark-ui variant="danger">shadow-DOM module system</mark-ui>
+  . The migration is incremental.
+</text-ui>
+```

package/components/menu/menu.css

@@ -3,7 +3,11 @@
     --menu-popover-padding:    var(--a-space-1);
     --menu-popover-border:     var(--md-sys-color-neutral-outline-variant);
     --menu-popover-radius:     var(--a-radius-lg);
-    --menu-popover-bg:         var(--a-bg-subtle);
+    /* surface-bright — the one elevated-overlay plane shared with
+       select-ui's dropdown, popover-ui, and context-menu-ui. Was
+       --a-bg-subtle (--md-sys-color-neutral-surface), i.e. page level, so a
+       menu floating over the page read flat against it in dark mode. */
+    --menu-popover-bg:         var(--md-sys-color-neutral-surface-bright);
     --menu-popover-shadow:     var(--a-shadow-lg);
     --menu-popover-min-width:  10rem;
     --menu-popover-font-size:  var(--a-ui-size);
@@ -49,7 +53,9 @@ menu-ui [data-menu-popover] {
   padding: var(--a-space-1);
   border: 1px solid var(--md-sys-color-neutral-outline-variant);
   border-radius: var(--a-radius-lg);
-  background: var(--a-bg-subtle);
+  /* Keep in sync with --menu-popover-bg above — the top-layer element can't
+     inherit the scoped token (see the note at this block's head). */
+  background: var(--md-sys-color-neutral-surface-bright);
   box-shadow: var(--a-shadow-lg);
   min-width: 10rem;
   font-family: var(--menu-font-family, var(--a-font-family-ui));

package/components/nav/nav.examples.md

@@ -3,7 +3,7 @@
 ## variant — primary
 
 ```html
-<nav-ui style="width:240px;height:280px;border:1px solid var(--a-border);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
+<nav-ui style="width:240px;height:280px;border:1px solid var(--md-sys-color-neutral-outline);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
   <nav-item-ui text="Dashboard" icon="house" value="dashboard" selected></nav-item-ui>
   <nav-item-ui text="Reports" icon="chart-bar" value="reports"></nav-item-ui>
   <nav-group-ui text="Settings" icon="gear">
@@ -28,7 +28,7 @@
 ## collapsed
 
 ```html
-<nav-ui collapsed style="width:64px;height:280px;border:1px solid var(--a-border);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
+<nav-ui collapsed style="width:64px;height:280px;border:1px solid var(--md-sys-color-neutral-outline);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
   <nav-item-ui text="Dashboard" icon="house" value="dashboard" selected></nav-item-ui>
   <nav-item-ui text="Reports" icon="chart-bar" value="reports"></nav-item-ui>
   <nav-group-ui text="Settings" icon="gear">

package/components/nav-group/nav-group.class.js

@@ -86,6 +86,14 @@ export class UINavGroup extends UIElement {
     if (badgeEl) badgeEl.textContent = this.badge;
 
     this.setAttribute('aria-expanded', String(this.open));
+
+    // Mirrors nav-item-ui's selected → fill convention: an open group
+    // reads as the active section via the same filled-glyph treatment
+    // [open] already drives (nav-group.css's [open] > [slot=header] color
+    // rule) — a state-driven weight swap, not a CSS color change, since
+    // Phosphor ships filled/regular as distinct SVGs.
+    const iconEl = this.querySelector('[slot="header"] [slot="icon"] icon-ui');
+    if (iconEl) iconEl.setAttribute('weight', this.open ? 'fill' : 'regular');
   }
 
   showPopover() {

package/components/nav-group/nav-group.examples.md

@@ -3,7 +3,7 @@
 ## text + icon
 
 ```html
-<nav-ui style="width:240px;border:1px solid var(--a-border);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
+<nav-ui style="width:240px;border:1px solid var(--md-sys-color-neutral-outline);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
   <nav-group-ui text="Settings" icon="gear">
     <nav-item-ui text="Profile" value="settings/profile"></nav-item-ui>
     <nav-item-ui text="Billing" value="settings/billing"></nav-item-ui>
@@ -14,7 +14,7 @@
 ## badge
 
 ```html
-<nav-ui style="width:240px;border:1px solid var(--a-border);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
+<nav-ui style="width:240px;border:1px solid var(--md-sys-color-neutral-outline);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
   <nav-group-ui text="Notifications" icon="bell" badge="3" open>
     <nav-item-ui text="Mentions" value="notif/mentions"></nav-item-ui>
     <nav-item-ui text="Follows" value="notif/follows"></nav-item-ui>

package/components/nav-group/nav-group.test.js

@@ -30,3 +30,38 @@ describe('nav-group-ui — header stamp-if-absent (wrapper trap)', () => {
     expect(headers[0].dataset.test).toBe('h');
   });
 });
+
+describe('nav-group-ui — [open] drives the header icon weight', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('defaults the auto-stamped header icon to weight="regular"', async () => {
+    const el = mount('<nav-group-ui text="Reports" icon="folder"></nav-group-ui>');
+    await tick();
+    const icon = el.querySelector('[slot="header"] [slot="icon"] icon-ui');
+    expect(icon.getAttribute('weight')).toBe('regular');
+  });
+
+  it('switches the header icon to weight="fill" when [open] is set', async () => {
+    const el = mount('<nav-group-ui text="Reports" icon="folder"></nav-group-ui>');
+    await tick();
+    el.open = true;
+    await tick();
+    const icon = el.querySelector('[slot="header"] [slot="icon"] icon-ui');
+    expect(icon.getAttribute('weight')).toBe('fill');
+  });
+
+  it('reverts to weight="regular" when [open] is cleared', async () => {
+    const el = mount('<nav-group-ui text="Reports" icon="folder" open></nav-group-ui>');
+    await tick();
+    el.open = false;
+    await tick();
+    const icon = el.querySelector('[slot="header"] [slot="icon"] icon-ui');
+    expect(icon.getAttribute('weight')).toBe('regular');
+  });
+
+  it('is a no-op when the group has no icon (empty icon slot, no icon-ui)', async () => {
+    const el = mount('<nav-group-ui text="Reports" open></nav-group-ui>');
+    await tick();
+    expect(el.querySelector('[slot="header"] [slot="icon"] icon-ui')).toBeNull();
+  });
+});

package/components/nav-item/nav-item.class.js

@@ -77,6 +77,12 @@ export class UINavItem extends UIElement {
     this.setAttribute('tabindex', this.disabled ? '-1' : '0');
     if (this.selected) this.setAttribute('aria-current', 'page');
     else this.removeAttribute('aria-current');
+
+    // Selected rows read as filled glyphs, unselected as regular weight —
+    // a state-driven weight swap (Phosphor ships filled/regular as distinct
+    // SVGs, so this can't be a CSS-only color change).
+    const iconEl = this.querySelector('[slot="icon"] icon-ui');
+    if (iconEl) iconEl.setAttribute('weight', this.selected ? 'fill' : 'regular');
   }
 
   disconnected() {