@rcarls/rc-list 0.6.0 → 0.7.0

package/dist/custom-elements.json

@@ -56,6 +56,54 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/listBaseStyles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "LIST_BASE_CSS",
+          "default": "cssText` @layer rc-base { rc-list[reorderable] [data-rc-reorder-handle] { touch-action: none; cursor: grab; } rc-list[data-reordering] { user-select: none; -webkit-user-select: none; } rc-list[data-reordering] [data-rc-reorder-handle] { cursor: grabbing; } /* Items shifting out of the lifted item's way. The lifted item follows the pointer. */ rc-list[data-reordering] > rc-list-item:not([data-dragging]) { transition: translate var(--rc-list-item-reorder-duration, 0ms) var(--rc-list-item-reorder-easing, ease); } @media (prefers-reduced-motion: reduce) { rc-list[data-reordering] > rc-list-item { transition-duration: 0ms; } } } `",
+          "description": "Light-DOM base styles for `rc-list` reordering.\n\nReorder handles are consumer-authored buttons in light DOM, so the list's\nshadow styles cannot reach them. A handle must not start native panning, or\na touch drag scrolls the page instead of moving the item."
+        },
+        {
+          "kind": "function",
+          "name": "ensureListBaseStyles",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "root",
+              "type": {
+                "text": "Document | ShadowRoot"
+              }
+            }
+          ],
+          "description": "Installs the shared list reorder styles once per containing root."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LIST_BASE_CSS",
+          "declaration": {
+            "name": "LIST_BASE_CSS",
+            "module": "src/listBaseStyles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ensureListBaseStyles",
+          "declaration": {
+            "name": "ensureListBaseStyles",
+            "module": "src/listBaseStyles.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/rc-list-item.ts",
@@ -204,6 +252,31 @@
               "name": "--rc-list-item-disabled-opacity",
               "default": "0.38"
             },
+            {
+              "description": "Surface of an item lifted for reordering. Falls back to `--rc-list-item-background`, then `Canvas`, so the item stays opaque.",
+              "name": "--rc-list-item-dragged-background",
+              "default": "Canvas"
+            },
+            {
+              "description": "Shadow of a lifted item. Falls back to `--rc-list-item-box-shadow`.",
+              "name": "--rc-list-item-dragged-box-shadow",
+              "default": "none"
+            },
+            {
+              "description": "Lifted item state opacity.",
+              "name": "--rc-list-item-dragged-state-layer-opacity",
+              "default": "0.16"
+            },
+            {
+              "description": "Duration of the shift that makes room for a lifted item. Read from the item, applied from light-DOM base styles.",
+              "name": "--rc-list-item-reorder-duration",
+              "default": "0ms"
+            },
+            {
+              "description": "Easing of that shift.",
+              "name": "--rc-list-item-reorder-easing",
+              "default": "ease"
+            },
             {
               "description": "Row state transition duration.",
               "name": "--rc-list-item-transition-duration",
@@ -213,6 +286,26 @@
               "description": "Row state transition easing.",
               "name": "--rc-list-item-transition-easing",
               "default": "ease"
+            },
+            {
+              "description": "Details region column placement.",
+              "name": "--rc-list-item-details-grid-column",
+              "default": "content-start / trailing-end"
+            },
+            {
+              "description": "Space below the details region.",
+              "name": "--rc-list-item-details-padding-block-end",
+              "default": "0"
+            },
+            {
+              "description": "Details region foreground.",
+              "name": "--rc-list-item-details-color",
+              "default": "inherit"
+            },
+            {
+              "description": "Details reveal duration.",
+              "name": "--rc-list-item-details-duration",
+              "default": "0ms"
             }
           ],
           "cssParts": [
@@ -239,6 +332,10 @@
             {
               "description": "Row divider.",
               "name": "divider"
+            },
+            {
+              "description": "Expanded supporting region wrapper.",
+              "name": "details"
             }
           ],
           "slots": [
@@ -253,6 +350,10 @@
             {
               "description": "Optional trailing metadata or action.",
               "name": "trailing"
+            },
+            {
+              "description": "Optional supporting region below the row, shown while expanded. A descendant `button[data-rc-list-item-toggle]` (usually in `trailing`) toggles it; the item wires the button's `aria-expanded` and `aria-controls` and the region's `hidden` state.",
+              "name": "details"
             }
           ],
           "members": [
@@ -308,6 +409,51 @@
               "description": "ID of a same-root anchor or button that receives forwarded surface\nclicks — the same contract as `rc-card`'s `action-target`. Checked\nbefore the native radio/checkbox fallback, so a row can combine a\nselection input with its own `action-target` if it ever needs to\n(uncommon, but not fought against).",
               "attribute": "action-target"
             },
+            {
+              "kind": "field",
+              "name": "defaultExpanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Initial expanded state of the `details` region for uncontrolled usage.",
+              "attribute": "default-expanded"
+            },
+            {
+              "kind": "field",
+              "name": "_controlledExpanded",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_uncontrolledExpanded",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_hasDetails",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Current expanded state of the `details` region. Host writes are silent and\ntake control; assign `undefined` to release control.",
+              "attribute": "expanded",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "_hasAssignedElements",
@@ -344,6 +490,61 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_handleDetailsSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_toggle",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement | null"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_details",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement | null"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_syncDetails",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Mirror the expanded state to the authored toggle and details region."
+            },
+            {
+              "kind": "field",
+              "name": "_handleToggleClick",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "_nativeInput",
@@ -373,6 +574,12 @@
               "default": "'listitem'"
             }
           ],
+          "events": [
+            {
+              "description": "Fires when the toggle button requests a new expanded state.",
+              "name": "rc-list-item-toggle"
+            }
+          ],
           "attributes": [
             {
               "description": "Presentational selected state. Host writes are silent.",
@@ -410,6 +617,23 @@
               "default": "''",
               "fieldName": "actionTarget"
             },
+            {
+              "description": "Current expanded state of the `details` region. Host writes are silent and\ntake control; assign `undefined` to release control.",
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "expanded"
+            },
+            {
+              "description": "Initial expanded state of the `details` region for uncontrolled usage.",
+              "name": "default-expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "defaultExpanded"
+            },
             {
               "description": "Reflected when the leading slot has content.",
               "name": "has-leading"
@@ -419,7 +643,11 @@
               "name": "has-trailing"
             },
             {
-              "description": "Visible row position assigned by the parent list.",
+              "description": "Set by a `reorderable` parent list while this item is lifted.",
+              "name": "data-dragging"
+            },
+            {
+              "description": "Row position assigned by the parent list: from `aria-posinset` and `aria-setsize` when the row has them (a virtualized slice), otherwise from rendered order.",
               "name": "data-rc-list-position"
             }
           ],
@@ -482,7 +710,7 @@
               "default": "1rem"
             },
             {
-              "description": "Gap between rows.",
+              "description": "Gap between rows. ## Reordering With `reorderable`, a native `<button data-rc-reorder-handle>` inside an item starts a reorder. Label the button yourself, for example \"Reorder Photo 2\". Handles without an authored `aria-description` get a short keyboard hint. - Pointer: press the handle and drag. The lifted item follows the pointer, the items it passes shift out of its way, and the nearest scroll container scrolls near its edges. Escape cancels. - Touch and pen: as on Android, a long press anywhere on an item also picks it up, then drag. Moving before the press completes scrolls the list instead. A mouse drags only by the handle. Item text cannot be selected in a reorderable list. - Keyboard: Space or Enter picks the item up, the block-axis arrow keys, Home, and End move it, Space or Enter drops it, and Escape returns it. Leaving the handle drops it. Each step is announced through a polite live region mounted in the nearest open `dialog` or popover, else the document body; override the text with `reorderMessages`. Focus stays on the moved item's handle, and is restored to the item at the new position when a framework replaces the item's nodes. The lifted item carries `data-dragging`, and the list carries `data-reordering`. The list writes inline `translate` offsets to items while a pointer drag previews a move.",
               "name": "--rc-list-row-gap",
               "default": "0"
             }
@@ -556,6 +784,15 @@
               "privacy": "private",
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "_unobserveLocale",
+              "type": {
+                "text": "(() => void) | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
             {
               "kind": "field",
               "name": "variant",
@@ -578,6 +815,62 @@
               "attribute": "selection",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "ordered",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether item order is meaningful; positions are exposed without rendered counters.",
+              "attribute": "ordered",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "reorderable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether people can reorder items with a handle. Implies `ordered`.",
+              "attribute": "reorderable",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "reorderMessages",
+              "type": {
+                "text": "RCListReorderMessages | undefined"
+              },
+              "description": "Overrides for the reorder announcements and the handle hint."
+            },
+            {
+              "kind": "field",
+              "name": "_reorder",
+              "type": {
+                "text": "ReorderController"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "new ReorderController(this, { items: () => (this.reorderable ? this._visibleItems() : []), handleSelector: REORDER_HANDLE, disabled: () => !this.reorderable, messages: () => this.reorderMessages, onMove: (item, from, to) => this._moveItem(item as RCListItem, from, to), onActiveChange: (item) => { this.toggleAttribute('data-reordering', item !== null); this._items().forEach(($item) => $item.toggleAttribute('data-dragging', $item === item)); }, })"
+            },
+            {
+              "kind": "field",
+              "name": "_describedHandles",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Map<HTMLElement, string>()",
+              "description": "Handle descriptions this list wrote, released when no longer reorderable."
+            },
+            {
+              "kind": "field",
+              "name": "_positionedItems",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Map<RCListItem, { posinset: string; setsize: string }>()",
+              "description": "Positions this list wrote, by item. An item whose attributes no longer\nmatch was repositioned by its author, possibly after the first sync, and\nis left alone from then on."
+            },
             {
               "kind": "method",
               "name": "_items",
@@ -588,6 +881,16 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "_visibleItems",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "RCListItem[]"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "_expectedInputType",
@@ -636,6 +939,103 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "_syncOrderedPositions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "items",
+                  "type": {
+                    "text": "RCListItem[]"
+                  }
+                }
+              ],
+              "description": "Expose each visible item's position in an ordered list. Items that carry\nauthored positions (a virtualized slice) keep them; positions this list\nwrote are released when the item leaves or the list stops being ordered."
+            },
+            {
+              "kind": "method",
+              "name": "_isOrdered",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_syncHandleDescriptions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "items",
+                  "type": {
+                    "text": "RCListItem[]"
+                  }
+                }
+              ],
+              "description": "Give each handle a keyboard hint unless its author described it. A\ndescription the author rewrites afterward is theirs from then on."
+            },
+            {
+              "kind": "method",
+              "name": "_moveItem",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "RCListItem"
+                  }
+                },
+                {
+                  "name": "from",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "to",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Dispatch a reorder and, unless a consumer took it over, move the node."
+            },
+            {
+              "kind": "method",
+              "name": "_releasePosition",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "$item",
+                  "type": {
+                    "text": "RCListItem"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_restoreItem",
@@ -695,6 +1095,12 @@
               "default": "'list'"
             }
           ],
+          "events": [
+            {
+              "description": "Fires, cancelable, when a reorder moves an item; `detail: { item, from, to }`. Unless the event is canceled the list moves the item's node itself. A framework that renders the items cancels it and reorders its own data. A pointer drag fires once on drop; the keyboard fires on each step, and once more to move the item back when the reorder is canceled.",
+              "name": "rc-list-reorder"
+            }
+          ],
           "attributes": [
             {
               "description": "Appearance hint.",
@@ -714,6 +1120,28 @@
               "default": "'none'",
               "fieldName": "selection"
             },
+            {
+              "description": "Whether item order is meaningful; positions are exposed without rendered counters.",
+              "name": "ordered",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "ordered"
+            },
+            {
+              "description": "Whether people can reorder items with a handle. Implies `ordered`.",
+              "name": "reorderable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "reorderable"
+            },
+            {
+              "description": "Reflected while an item is lifted.",
+              "name": "data-reordering"
+            },
             {
               "description": "Reflected when a visible item uses the leading slot.",
               "name": "has-leading"