@adia-ai/web-components 0.8.41 → 0.8.43

package/components/description-list/description-list.yaml

@@ -16,7 +16,7 @@ props:
       `start` (default): term and value pack to the term column edge.
       `between`: term left, value right-aligned with `text-align: end`.
       `stretch`: value fills the remaining track width (e.g. for a
-      `<slider-ui>` / `<select-ui>` / `<color-picker-ui>` as `<dd>`
+      `<slider-ui>` / `<select-ui>` / `<color-area-ui>` as `<dd>`
       that should span the full row). Sets `justify-self: stretch` and
       `width: 100%` on `dd` so block-level form controls inside reach
       the column edge rather than shrink-wrapping to content.

package/components/drilldown/drilldown.a2ui.json

@@ -236,6 +236,9 @@
       "--drilldown-row-px": {
         "description": "Inline padding of each row."
       },
+      "--drilldown-row-py": {
+        "description": "Block padding of each row (grows a row past --drilldown-row-height once content, e.g. a two-line label+meta row, exceeds it)."
+      },
       "--drilldown-row-radius": {
         "description": "Border radius of each row."
       }

package/components/drilldown/drilldown.css

@@ -4,6 +4,7 @@
     --drilldown-row-height:  var(--a-size, 2.25rem);
     --drilldown-row-radius:  var(--a-radius-sm);
     --drilldown-row-px:      var(--a-space-2);
+    --drilldown-row-py:      var(--a-space-1-5);
     --drilldown-row-gap:     var(--a-space-2);
     --drilldown-header-px:   var(--a-space-3);
     --drilldown-header-py:   var(--a-space-2);
@@ -189,13 +190,19 @@
     to   { transform: none; opacity: 1; }
   }
 
-  /* ── Rows ── */
+  /* ── Rows ──
+     min-height sets the single-line floor; padding-block (--drilldown-row-py,
+     matching menu-item-ui/action-item-ui's own row-density token) only grows
+     the row once content (e.g. a two-line label+meta row, gh#1591) exceeds
+     that floor — the two never stack into a taller one-liner because a
+     single-line row's content-box is shorter than the min-height already. */
   [role="option"] {
     display: flex;
     align-items: center;
     gap: var(--drilldown-row-gap);
     min-height: var(--drilldown-row-height);
     padding-inline: var(--drilldown-row-px);
+    padding-block: var(--drilldown-row-py);
     border-radius: var(--drilldown-row-radius);
     cursor: pointer;
     outline: none;

package/components/drilldown/drilldown.yaml

@@ -194,6 +194,8 @@ tokens:
     description: Border radius of each row.
   --drilldown-row-px:
     description: Inline padding of each row.
+  --drilldown-row-py:
+    description: Block padding of each row (grows a row past --drilldown-row-height once content, e.g. a two-line label+meta row, exceeds it).
   --drilldown-row-gap:
     description: Gap between row elements (dot / main / counts / chevron).
   --drilldown-bg-hover:

package/components/field/field.a2ui.json

@@ -99,7 +99,7 @@
     ],
     "slots": {
       "default": {
-        "description": "The form control — a WIDE control like input-ui, select-ui, textarea-ui, slider-ui, range-ui, calendar-picker-ui, color-picker-ui, upload-ui, otp-input-ui. Auto-id'd for the label's [for] binding.\nDO NOT wrap small self-labeling widgets here. check-ui, switch-ui, radio-ui, toggle-ui all carry their own [label] attribute that renders inline next to the control — wrapping them in field-ui produces broken layouts (settings-row `justify-self: end` rule pushes the control to the trailing edge, away from the label that field-ui stamps; the widget's own label then renders again on the right, creating a doubled / right-justified affordance). See anti_patterns below for the canonical alternatives."
+        "description": "The form control — a WIDE control like input-ui, select-ui, textarea-ui, slider-ui, range-ui, calendar-picker-ui, color-area-ui, upload-ui, otp-input-ui. Auto-id'd for the label's [for] binding.\nDO NOT wrap small self-labeling widgets here. check-ui, switch-ui, radio-ui, toggle-ui all carry their own [label] attribute that renders inline next to the control — wrapping them in field-ui produces broken layouts (settings-row `justify-self: end` rule pushes the control to the trailing edge, away from the label that field-ui stamps; the widget's own label then renders again on the right, creating a doubled / right-justified affordance). See anti_patterns below for the canonical alternatives."
       },
       "action": {
         "description": "Button adjacent to the control for inline actions (clear, reset, help popover)."

package/components/field/field.class.js

@@ -279,8 +279,11 @@ export class UIField extends UIElement {
     'input-ui', 'textarea-ui', 'select-ui', 'combobox-ui', 'search-ui',
     'check-ui', 'radio-ui', 'switch-ui', 'slider-ui', 'range-ui',
     'otp-input-ui', 'tags-input-ui', 'chat-input-ui', 'autocomplete-input-ui',
-    'datetime-picker-ui', 'date-range-picker-ui', 'calendar-picker-ui',
-    'color-picker-ui', 'upload-ui', 'rating-ui', 'segmented-ui',
+    'date-range-picker-ui', 'calendar-picker-ui',
+    // datetime-picker-ui / color-picker-ui cut in 0.8.43 (gh#1617,
+    // ADR-0063/gh#1372) — calendar-picker-ui / color-area-ui are the
+    // sole tags now.
+    'color-area-ui', 'upload-ui', 'rating-ui', 'segmented-ui',
     'input', 'textarea', 'select',
   ]);
 

package/components/field/field.yaml

@@ -68,7 +68,7 @@ slots:
     description: >-
       The form control — a WIDE control like input-ui, select-ui,
       textarea-ui, slider-ui, range-ui, calendar-picker-ui,
-      color-picker-ui, upload-ui, otp-input-ui. Auto-id'd for the
+      color-area-ui, upload-ui, otp-input-ui. Auto-id'd for the
       label's [for] binding.
 
       DO NOT wrap small self-labeling widgets here. check-ui,

package/components/index.js

@@ -50,7 +50,7 @@ export { UITooltip } from './tooltip/tooltip.js';
 export { UIBadge } from './badge/badge.js';
 export { UIBreadcrumb } from './breadcrumb/breadcrumb.js';
 export { UICommand } from './command/command.js';
-export { UIColorPicker } from './color-picker/color-picker.js';
+export { UIColorArea } from './color-area/color-area.js';
 export { UIColorInput } from './color-input/color-input.js';
 export { UINoodles } from './noodles/noodles.js';
 export { UITable } from './table/table.js';
@@ -114,18 +114,15 @@ export { UISearch } from './search/search.js';
 export { UICombobox } from './combobox/combobox.js';
 export { UITagsInput } from './tags-input/tags-input.js';
 export { UIStat } from './stat/stat.js';
-export { UIProgressRow } from './progress-row/progress-row.js';
 export { UIActionList, UIActionItem } from './action-list/action-list.js';
 export { UIEmptyState } from './empty-state/empty-state.js';
 export { UICalendarGrid } from './calendar-grid/calendar-grid.js';
 export { UICalendarPicker } from './calendar-picker/calendar-picker.js';
 export { UIDateRangePicker } from './date-range-picker/date-range-picker.js';
 export { UITimePicker } from './time-picker/time-picker.js';
-export { UIDatetimePicker } from './datetime-picker/datetime-picker.js';
 export { UIEmbed } from './embed/embed.js';
 export { UIBlock } from './block/block.js';
 export { UIText } from './text/text.js';
-export { UIToggleGroup, UIToggleOption } from './toggle-group/toggle-group.js';
 export { UIToggleScheme } from './toggle-scheme/toggle-scheme.js';
 export { UIDemoToggle } from './demo-toggle/demo-toggle.js';
 export { UIRichText } from './richtext/richtext.js';

package/components/input/input.a2ui.json

@@ -14,7 +14,7 @@
   ],
   "properties": {
     "type": {
-      "description": "Input type. `password` wraps a native `<input>` for disc masking; `number` renders a contenteditable + stepper buttons (no native input). `text`/`email`/`tel`/`url` use plain contenteditable. input-ui does NOT implement date/time/color/search affordances — those HTML5 type values render as a plain contenteditable with no calendar, clock, swatch, or search affordance (first-pass-VALID against this enum historically, but functionally broken generation output). Use the owning primitive instead — CalendarPicker for date (+ month/week, no dedicated granularity primitive exists), DatetimePicker for datetime-local, TimePicker for time, ColorInput/ColorPicker for color, Search for search. See anti_patterns.",
+      "description": "Input type. `password` wraps a native `<input>` for disc masking; `number` renders a contenteditable + stepper buttons (no native input). `text`/`email`/`tel`/`url` use plain contenteditable. input-ui does NOT implement date/time/color/search affordances — those HTML5 type values render as a plain contenteditable with no calendar, clock, swatch, or search affordance (first-pass-VALID against this enum historically, but functionally broken generation output). Use the owning primitive instead — CalendarPicker for date (+ month/week, no dedicated granularity primitive exists), CalendarPicker precision=\"minute\" for datetime-local, TimePicker for time, ColorInput/ColorArea for color, Search for search. See anti_patterns.",
       "type": "string",
       "enum": [
         "text",
@@ -165,8 +165,8 @@
         "wrong": "{\"component\": \"Input\", \"type\": \"date\"}\n"
       },
       {
-        "fix": "{\"component\": \"DatetimePicker\"}\n",
-        "why": "Same gap as \"date\" — no native datetime picker rendered. Use\nDatetimePicker for combined date + time input.\n",
+        "fix": "{\"component\": \"CalendarPicker\", \"precision\": \"minute\"}\n",
+        "why": "Same gap as \"date\" — no native datetime picker rendered. Use\nCalendarPicker with precision=\"minute\" for combined date + time\ninput (DatetimePicker was a deprecated thin alias, cut in 0.8.43,\ngh#1617 — CalendarPicker is the sole tag now).\n",
         "wrong": "{\"component\": \"Input\", \"type\": \"datetime-local\"}\n"
       },
       {
@@ -186,7 +186,7 @@
       },
       {
         "fix": "{\"component\": \"ColorInput\"}\n",
-        "why": "No native color swatch/picker rendered — just a plain text\nsurface. Use ColorInput for a compact form-bearing swatch +\npopover, or ColorPicker directly for the full OKLCH picker\nsurface.\n",
+        "why": "No native color swatch/picker rendered — just a plain text\nsurface. Use ColorInput for a compact form-bearing swatch +\npopover, or ColorArea directly for the full OKLCH picker surface\n(ColorPicker was a deprecated thin alias, cut in 0.8.43, gh#1617 —\nColorArea is the sole tag now).\n",
         "wrong": "{\"component\": \"Input\", \"type\": \"color\"}\n"
       },
       {

package/components/input/input.class.js

@@ -272,11 +272,19 @@ export class UIInput extends UIFormElement {
       `;
     }
 
+    // Suppress browser-native suggestion/autofill affordances on the
+    // contenteditable surface (gh#1593) — a bespoke editable, not a real
+    // form <input>, so a browser's saved-values dropdown or spellcheck
+    // suggestion strip is always noise here, never a wanted feature.
+    // aria-autocomplete="none" documents the same intent for AT users.
     const editable = `
       <span slot="text" contenteditable="plaintext-only" tabindex="0"
             ${this.value ? '' : 'data-empty=""'}
             ${labelby}
             data-placeholder="${this.placeholder}"
+            autocomplete="off" aria-autocomplete="none"
+            autocorrect="off" autocapitalize="off" spellcheck="false"
+            data-lpignore="true" data-1p-ignore="true"
             ${this.#isNumberMode ? 'inputmode="decimal"' : ''}></span>`;
 
     const controls = this.#isNumberMode ? `

package/components/input/input.css

@@ -51,6 +51,11 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     /* ── State: disabled ── */
     --input-bg-disabled:     var(--a-ui-bg-disabled);
     --input-fg-disabled:     var(--a-ui-text-disabled);
+    /* gh#1595 — border kept full contrast on disabled; otp-input.css /
+       upload.css already alias this exact role for their own disabled
+       border, so this follows that sibling pattern rather than inventing
+       a new one. */
+    --input-border-disabled: var(--a-ui-border-disabled);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -381,6 +386,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
   :scope[disabled] [slot="field"] {
     background: var(--input-bg-disabled);
     color: var(--input-fg-disabled);
+    border-color: var(--input-border-disabled);
     cursor: not-allowed;
   }
 

package/components/input/input.yaml

@@ -33,8 +33,8 @@ props:
       against this enum historically, but functionally broken generation
       output). Use the owning primitive instead — CalendarPicker for date
       (+ month/week, no dedicated granularity primitive exists),
-      DatetimePicker for datetime-local, TimePicker for time,
-      ColorInput/ColorPicker for color, Search for search. See
+      CalendarPicker precision="minute" for datetime-local, TimePicker
+      for time, ColorInput/ColorArea for color, Search for search. See
       anti_patterns.
     type: string
     default: text
@@ -291,8 +291,8 @@ a2ui:
       — text/email/password/number/tel/url (gh#1363 B10). Never
       set [type] to an HTML5 value input-ui doesn't render — route
       date/time/color/search intents to the owning primitive instead:
-      CalendarPicker, DatetimePicker, TimePicker, ColorInput (or
-      ColorPicker directly), Search. See anti_patterns.
+      CalendarPicker (precision="minute" for datetime-local), TimePicker,
+      ColorInput (or ColorArea directly), Search. See anti_patterns.
 anti_patterns:
   - wrong: |
       {"component": "Input", "type": "date"}
@@ -307,9 +307,11 @@ anti_patterns:
       {"component": "Input", "type": "datetime-local"}
     why: |
       Same gap as "date" — no native datetime picker rendered. Use
-      DatetimePicker for combined date + time input.
+      CalendarPicker with precision="minute" for combined date + time
+      input (DatetimePicker was a deprecated thin alias, cut in 0.8.43,
+      gh#1617 — CalendarPicker is the sole tag now).
     fix: |
-      {"component": "DatetimePicker"}
+      {"component": "CalendarPicker", "precision": "minute"}
   - wrong: |
       {"component": "Input", "type": "time"}
     why: |
@@ -338,8 +340,9 @@ anti_patterns:
     why: |
       No native color swatch/picker rendered — just a plain text
       surface. Use ColorInput for a compact form-bearing swatch +
-      popover, or ColorPicker directly for the full OKLCH picker
-      surface.
+      popover, or ColorArea directly for the full OKLCH picker surface
+      (ColorPicker was a deprecated thin alias, cut in 0.8.43, gh#1617 —
+      ColorArea is the sole tag now).
     fix: |
       {"component": "ColorInput"}
   - wrong: |

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

@@ -16,7 +16,8 @@
 
 ```html
 <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-ui slot="actions">
+    <button-ui slot="trigger" icon="dots-three" variant="ghost" aria-label="More"></button-ui>
     <menu-item-ui action="reauth">Re-authenticate</menu-item-ui>
     <menu-item-ui action="disconnect" variant="danger">Disconnect</menu-item-ui>
   </menu-ui>

package/components/menu/menu-item.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/MenuItem.json",
   "title": "MenuItem",
-  "description": "Child of `<menu-ui>`. One actionable row inside a menu, with optional leading icon + label + subtitle + value.",
+  "description": "Child of `<menu-ui>`. One actionable row inside a menu, with optional leading icon + label + description + value. (The deprecated `subtitle` prop alias for `description` was cut in 0.8.43 — ADR-0063, gh#1563/gh#1617.)",
   "type": "object",
   "allOf": [
     {
@@ -13,6 +13,11 @@
     }
   ],
   "properties": {
+    "description": {
+      "description": "Optional secondary description line rendered under the label. Canonical spelling (ADR-0063, gh#1563) replacing `subtitle` — converges menu-item onto the ~20-component corpus majority that already names this concept `description`. The deprecated `subtitle` prop alias was cut in 0.8.43 (gh#1617).",
+      "type": "string",
+      "default": ""
+    },
     "component": {
       "const": "MenuItem"
     },
@@ -26,11 +31,6 @@
       "type": "string",
       "default": ""
     },
-    "subtitle": {
-      "description": "Optional secondary description line rendered under the label.",
-      "type": "string",
-      "default": ""
-    },
     "text": {
       "description": "Item label text.",
       "type": "string",
@@ -81,7 +81,7 @@
         "description": "Custom leading element override; falls through to `[icon]` prop if not slotted."
       },
       "subtitle": {
-        "description": "Custom secondary-line content override; falls through to `[subtitle]` prop if not slotted."
+        "description": "Custom secondary-line content override; falls through to the `[description]` prop if not slotted (ADR-0063, gh#1563 — the deprecated `[subtitle]` prop alias was cut in 0.8.43, gh#1617). The slot's own name is unchanged by that rename — this is a distinct, deliberately-unrenamed surface."
       },
       "text": {
         "description": "Custom label content; falls through to `[text]` prop if not slotted."

package/components/menu/menu-item.yaml

@@ -13,7 +13,7 @@ component: MenuItem
 category: navigation
 version: 1
 description: |-
-  Child of `<menu-ui>`. One actionable row inside a menu, with optional leading icon + label + subtitle + value.
+  Child of `<menu-ui>`. One actionable row inside a menu, with optional leading icon + label + description + value. (The deprecated `subtitle` prop alias for `description` was cut in 0.8.43 — ADR-0063, gh#1563/gh#1617.)
 
 props:
   icon:
@@ -24,8 +24,13 @@ props:
     description: Item label text.
     type: string
     default: ""
-  subtitle:
-    description: Optional secondary description line rendered under the label.
+  description:
+    description: >-
+      Optional secondary description line rendered under the label.
+      Canonical spelling (ADR-0063, gh#1563) replacing `subtitle` —
+      converges menu-item onto the ~20-component corpus majority that
+      already names this concept `description`. The deprecated `subtitle`
+      prop alias was cut in 0.8.43 (gh#1617).
     type: string
     default: ""
   value:
@@ -49,7 +54,12 @@ slots:
   text:
     description: Custom label content; falls through to `[text]` prop if not slotted.
   subtitle:
-    description: Custom secondary-line content override; falls through to `[subtitle]` prop if not slotted.
+    description: >-
+      Custom secondary-line content override; falls through to the
+      `[description]` prop if not slotted (ADR-0063, gh#1563 — the
+      deprecated `[subtitle]` prop alias was cut in 0.8.43, gh#1617). The
+      slot's own name is unchanged by that rename — this is a distinct,
+      deliberately-unrenamed surface.
   trailing:
     description: Trailing element pinned to the far edge (shortcut hint, check mark).
 
@@ -81,9 +91,12 @@ a2ui:
       hint).
     - >-
       <action-item-ui> (child of <action-list-ui>) shares this row contract
-      (icon/text/subtitle/value/variant/disabled props, icon/text/subtitle/
-      trailing slot overrides) for inline, non-popover command rows — use
-      it instead when the surface isn't a <menu-ui> popover (#1363 C5).
+      (icon/text/description/value/variant/disabled props, icon/text/
+      subtitle/trailing slot overrides) for inline, non-popover command
+      rows — use it instead when the surface isn't a <menu-ui> popover
+      (#1363 C5). Both components' deprecated `subtitle` PROP aliases for
+      `description` were cut in 0.8.43 (ADR-0063, gh#1563/gh#1571,
+      gh#1617); the `subtitle` SLOT on both is unchanged.
 
 keywords:
   - menu-item

package/components/menu/menu.class.js

@@ -258,7 +258,12 @@ export class UIMenuItem extends UIElement {
   static properties = {
     icon:     { type: String,  default: '', reflect: true },
     text:     { type: String,  default: '', reflect: true },
-    subtitle: { type: String,  default: '', reflect: true },
+    // ADR-0063 (gh#1563) — `description` is canonical (menu-item was the
+    // sole ~20-component-corpus outlier using `subtitle`); the deprecated
+    // `subtitle` PROP dual-read shim was cut in 0.8.43 (gh#1617). The
+    // `subtitle` SLOT (a separate surface — see menu-item.yaml) is
+    // deliberately unchanged.
+    description: { type: String, default: '', reflect: true },
     value:    { type: String,  default: '', reflect: true },
     variant:  { type: String,  default: 'default', reflect: true },
     disabled: { type: Boolean, default: false, reflect: true },
@@ -324,10 +329,10 @@ export class UIMenuItem extends UIElement {
       this.appendChild(span);
     }
 
-    if (this.subtitle && !this.#ownChild('[slot="subtitle"]')) {
+    if (this.description && !this.#ownChild('[slot="subtitle"]')) {
       const sub = this.#stampMark(document.createElement('span'));
       sub.setAttribute('slot', 'subtitle');
-      sub.textContent = this.subtitle;
+      sub.textContent = this.description;
       this.appendChild(sub);
     }
   }
@@ -357,15 +362,16 @@ export class UIMenuItem extends UIElement {
     const textEl = this.#ownChild('[slot="text"]');
     if (this.#wasStamped(textEl)) textEl.textContent = this.text;
 
-    // Sync subtitle — only touch elements we stamped.
+    // Sync subtitle (backed by the `description` prop — ADR-0063, gh#1563)
+    // — only touch elements we stamped.
     const subEl = this.#ownChild('[slot="subtitle"]');
-    if (this.subtitle) {
+    if (this.description) {
       if (subEl) {
-        if (this.#wasStamped(subEl)) subEl.textContent = this.subtitle;
+        if (this.#wasStamped(subEl)) subEl.textContent = this.description;
       } else {
         const el = this.#stampMark(document.createElement('span'));
         el.setAttribute('slot', 'subtitle');
-        el.textContent = this.subtitle;
+        el.textContent = this.description;
         this.appendChild(el);
       }
     } else if (this.#wasStamped(subEl)) {

package/components/menu/menu.d.ts

@@ -41,12 +41,12 @@ export class UIMenuDivider extends UIElement {
 }
 
 export class UIMenuItem extends UIElement {
+  /** Optional secondary description line rendered under the label. Canonical spelling (ADR-0063, gh#1563) replacing `subtitle` — converges menu-item onto the ~20-component corpus majority that already names this concept `description`. The deprecated `subtitle` prop alias was cut in 0.8.43 (gh#1617). */
+  description: string;
   /** Disabled state — blocks pointer + keyboard activation. */
   disabled: boolean;
   /** Optional leading Phosphor icon name. */
   icon: string;
-  /** Optional secondary description line rendered under the label. */
-  subtitle: string;
   /** Item label text. */
   text: string;
   /** Stable identifier emitted via the parent menu's `select` event. */

package/components/pane/pane.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Pane.json",
   "title": "Pane",
-  "description": "Collapsible, resizable content panel — drag-resize handle on the\ninner edge when [side=\"leading\"] / [side=\"trailing\"], [resizable]\nopt-in. Used standalone for resizable two-pane layouts, or wrapped\nby <editor-sidebar> / <admin-sidebar> which DELEGATE drag to the\ninner pane-ui rather than reimplementing it. See pane.yaml's\na2ui.rules for the full composition contract.\n",
+  "description": "Collapsible, resizable content panel — drag-resize handle on the\ninner edge when [edge=\"leading\"] / [edge=\"trailing\"], [resizable]\nopt-in. Used standalone for resizable two-pane layouts, or wrapped\nby <editor-sidebar> / <admin-sidebar> which DELEGATE drag to the\ninner pane-ui rather than reimplementing it. See pane.yaml's\na2ui.rules for the full composition contract.\n",
   "type": "object",
   "allOf": [
     {
@@ -21,6 +21,16 @@
     "component": {
       "const": "Pane"
     },
+    "edge": {
+      "description": "Opts a pane into horizontal-sibling chrome: suppresses the default\nfour-sided border and moves the resize grabber to the inner edge\n(right edge for `leading`, left edge for `trailing`). Also flips the\nresize-drag direction so `trailing` panes grow when dragged leftward.\nUnset keeps the pane-intrinsic chrome (full border, right-edge\ngrabber when resizable). Canonical spelling (ADR-0063, gh#1563) — the\ndeprecated `side` dual-read alias was cut in 0.8.43 (gh#1617).\n",
+      "type": "string",
+      "enum": [
+        "",
+        "leading",
+        "trailing"
+      ],
+      "default": ""
+    },
     "maxWidth": {
       "description": "Component property: maxWidth.",
       "type": "number",
@@ -35,16 +45,6 @@
       "description": "Component property: resizable.",
       "type": "boolean",
       "default": false
-    },
-    "side": {
-      "description": "Opts a pane into horizontal-sibling chrome: suppresses the default\nfour-sided border and moves the resize grabber to the inner edge\n(right edge for `leading`, left edge for `trailing`). Also flips the\nresize-drag direction so `trailing` panes grow when dragged leftward.\nUnset keeps the pane-intrinsic chrome (full border, right-edge\ngrabber when resizable).\n",
-      "type": "string",
-      "enum": [
-        "",
-        "leading",
-        "trailing"
-      ],
-      "default": ""
     }
   },
   "required": [

package/components/pane/pane.class.js

@@ -32,12 +32,14 @@
  *   resizable    — boolean, enables drag-to-resize (width)
  *   min-width    — minimum width when resizing (default: 200)
  *   max-width    — maximum width when resizing (default: 600)
- *   side         — 'leading' | 'trailing' | '' (default). When set, the
+ *   edge         — 'leading' | 'trailing' | '' (default). When set, the
  *                  pane is treated as a horizontal sibling: the default
  *                  four-sided border is suppressed, only the inner-edge
  *                  border is drawn, the resize grabber moves to that
  *                  inner edge, and the resize-drag direction flips so
- *                  trailing panes grow when dragged leftward.
+ *                  trailing panes grow when dragged leftward. The
+ *                  deprecated `side` dual-read alias was cut in 0.8.43
+ *                  (gh#1617, ADR-0063).
  *
  * JS API:
  *   pane.collapsed = true/false
@@ -58,7 +60,9 @@ export class UIPane extends UIElement {
     resizable:  { type: Boolean, default: false, reflect: true },
     minWidth:   { type: Number,  default: 200, attribute: 'min-width', reflect: true },
     maxWidth:   { type: Number,  default: 9999, attribute: 'max-width', reflect: true },
-    side:       { type: String,  default: '', reflect: true },
+    // ADR-0063 (gh#1563) — `edge` is the canonical spelling; the deprecated
+    // `side` dual-read alias was cut in 0.8.43 (gh#1617).
+    edge:       { type: String,  default: '', reflect: true },
   };
 
   static template = () => null;
@@ -164,7 +168,7 @@ export class UIPane extends UIElement {
     // is anchored on the RIGHT side of its flex row — dragging leftward
     // should GROW the pane (grabber moves further left = more width),
     // not shrink it. Negate dx in that case.
-    const sign = this.side === 'trailing' ? -1 : 1;
+    const sign = this.edge === 'trailing' ? -1 : 1;
     const dx = (e.clientX - this.#startX) * sign;
     const w = Math.max(this.minWidth, Math.min(this.maxWidth, this.#startW + dx));
     this.style.width = `${w}px`;

package/components/pane/pane.css

@@ -63,20 +63,23 @@
     transition: none;
   }
 
-  /* Side-aware border treatment.
+  /* Edge-aware border treatment. ADR-0063 (gh#1563): `[edge]` is the
+     canonical attribute — pane.class.js's connected() mirrors an
+     old-only `[side]` value onto `[edge]` before the first render, so
+     selecting on `[edge=...]` alone covers both spellings.
      `leading`  — pane sits at the leading edge of a horizontal row, so
                   the only visual separator it needs is on its trailing
                   edge (right in LTR).
      `trailing` — mirror: only a leading-edge border (left in LTR).
-     Default (no side attr) keeps the full 4-sided border. */
-  :scope[side="leading"],
-  :scope[side="trailing"] {
+     Default (no edge attr) keeps the full 4-sided border. */
+  :scope[edge="leading"],
+  :scope[edge="trailing"] {
     border: none;
   }
-  :scope[side="leading"] {
+  :scope[edge="leading"] {
     border-inline-end: 1px solid var(--pane-border);
   }
-  :scope[side="trailing"] {
+  :scope[edge="trailing"] {
     border-inline-start: 1px solid var(--pane-border);
   }
 
@@ -184,11 +187,13 @@
   }
 
   /* ── Resize handle ──
-     Default (no side) positions the grabber on the right edge. When
-     `side="trailing"` is set, flip the grabber to the left edge so it
+     Default (no edge) positions the grabber on the right edge. When
+     `edge="trailing"` is set, flip the grabber to the left edge so it
      sits on the pane's "inner" side (where it meets the sibling
      content/pane in a horizontal row). `inset-inline-*` lets the rules
-     stay LTR/RTL-safe. */
+     stay LTR/RTL-safe. `side="trailing"` is a deprecated dual-read alias
+     (ADR-0063, gh#1563) — pane.class.js's connected() mirrors it onto
+     `[edge]` before the first render, so this selector alone covers both. */
   [slot="resize"] {
     position: absolute;
     top: 0;
@@ -202,7 +207,7 @@
     z-index: 1;
   }
 
-  :scope[side="trailing"] > [slot="resize"] {
+  :scope[edge="trailing"] > [slot="resize"] {
     inset-inline-end: auto;
     inset-inline-start: 0;
   }

package/components/pane/pane.d.ts

@@ -1,6 +1,6 @@
 /**
  * `<pane-ui>` — Collapsible, resizable content panel — drag-resize handle on the
-inner edge when [side="leading"] / [side="trailing"], [resizable]
+inner edge when [edge="leading"] / [edge="trailing"], [resizable]
 opt-in. Used standalone for resizable two-pane layouts, or wrapped
 by <editor-sidebar> / <admin-sidebar> which DELEGATE drag to the
 inner pane-ui rather than reimplementing it. See pane.yaml's
@@ -23,20 +23,21 @@ export type PaneToggleEvent = CustomEvent<unknown>;
 export class UIPane extends UIElement {
   /** Component property: collapsed. */
   collapsed: boolean;
-  /** Component property: maxWidth. */
-  maxWidth: number;
-  /** Component property: minWidth. */
-  minWidth: number;
-  /** Component property: resizable. */
-  resizable: boolean;
   /** Opts a pane into horizontal-sibling chrome: suppresses the default
 four-sided border and moves the resize grabber to the inner edge
 (right edge for `leading`, left edge for `trailing`). Also flips the
 resize-drag direction so `trailing` panes grow when dragged leftward.
 Unset keeps the pane-intrinsic chrome (full border, right-edge
-grabber when resizable).
+grabber when resizable). Canonical spelling (ADR-0063, gh#1563) — the
+deprecated `side` dual-read alias was cut in 0.8.43 (gh#1617).
  */
-  side: '' | 'leading' | 'trailing';
+  edge: '' | 'leading' | 'trailing';
+  /** Component property: maxWidth. */
+  maxWidth: number;
+  /** Component property: minWidth. */
+  minWidth: number;
+  /** Component property: resizable. */
+  resizable: boolean;
 
   addEventListener(type: 'toggle', listener: (ev: PaneToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(