@rcarls/rc-select 0.6.0 → 0.7.0

package/dist/custom-elements.json

@@ -44,9 +44,16 @@
       "kind": "javascript-module",
       "path": "src/rc-select.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "DEFAULT_SELECT_MESSAGES",
+          "type": {
+            "text": "Readonly<RCSelectMessages>"
+          }
+        },
         {
           "kind": "class",
-          "description": "Select-only combobox backed by a native <select>, following the WAI-ARIA Combobox\npattern.\n\nWraps a native `<select>` (default slot) as the form value reflector while\nrendering a custom button trigger and popup listbox. Popup placement\nand `aria-activedescendant` virtual keyboard navigation are supported.",
+          "description": "Select-only combobox backed by a native <select>, following the WAI-ARIA Combobox\npattern.\n\nWraps a native `<select>` (default slot) as the form value reflector while\nrendering a custom button trigger and popup listbox. Popup placement\nand `aria-activedescendant` virtual keyboard navigation are supported.\n\nThe fullscreen dialog popup (`popup-mode=\"dialog\"`) and the selected-value\nchips of a `multiple` select load on first use, so a popover single select\nships neither. Importing `@rcarls/rc-select/define` therefore no longer\nregisters `rc-dialog` or `rc-chip-group` by itself.",
           "name": "RCSelect",
           "cssProperties": [
             {
@@ -87,22 +94,37 @@
             {
               "description": "Popup listbox border radius.",
               "name": "--rc-select-listbox-radius",
-              "default": "var(--rc-control-radius)"
+              "default": "var(--rc-popup-radius)"
+            },
+            {
+              "description": "Popup listbox open/close fade transition duration.",
+              "name": "--rc-select-listbox-duration",
+              "default": "150ms"
             },
             {
               "description": "Popup listbox border.",
               "name": "--rc-select-listbox-border",
-              "default": "var(--rc-border)"
+              "default": "var(--rc-popup-border)"
+            },
+            {
+              "description": "Popup listbox background.",
+              "name": "--rc-select-listbox-background",
+              "default": "var(--rc-popup-background)"
+            },
+            {
+              "description": "Popup listbox text color.",
+              "name": "--rc-select-listbox-color",
+              "default": "var(--rc-popup-color)"
             },
             {
               "description": "Popup listbox box shadow.",
               "name": "--rc-select-shadow",
-              "default": "var(--rc-shadow)"
+              "default": "var(--rc-popup-shadow)"
             },
             {
               "description": "Popup listbox block padding.",
               "name": "--rc-select-listbox-padding-block",
-              "default": "var(--rc-control-padding-block)"
+              "default": "var(--rc-popup-padding-block)"
             },
             {
               "description": "Multi-select chip border radius.",
@@ -115,12 +137,17 @@
               "default": "0.1em"
             },
             {
-              "description": "Multi-select chip inline-axis padding.",
-              "name": "--rc-select-chip-padding-inline",
+              "description": "Multi-select chip leading padding.",
+              "name": "--rc-select-chip-padding-inline-start",
               "default": "0.3em"
             },
             {
-              "description": "Gap between chip label and remove icon.",
+              "description": "Multi-select chip trailing padding, including the remove affordance.",
+              "name": "--rc-select-chip-padding-inline-end",
+              "default": "calc(var(--rc-chip-remove-target-size, 1.5rem) + var(--rc-chip-remove-offset-inline, 0.125rem))"
+            },
+            {
+              "description": "Gap between chip content items.",
               "name": "--rc-select-chip-gap",
               "default": "calc(var(--rc-control-gap, 0.25em) * 0.8)"
             },
@@ -129,10 +156,40 @@
               "name": "--rc-select-chip-border",
               "default": "var(--rc-border)"
             },
+            {
+              "description": "Inherited remove-target width reserved by generated multi-select chips.",
+              "name": "--rc-chip-remove-target-size",
+              "default": "1.5rem"
+            },
+            {
+              "description": "Inherited edge offset reserved by generated multi-select chips.",
+              "name": "--rc-chip-remove-offset-inline",
+              "default": "0.125rem"
+            },
+            {
+              "description": "Space returned between wrapped chip rows after a touch target overlaps the field's leading padding.",
+              "name": "--rc-chip-touch-target-overlap-block-start",
+              "default": "0px"
+            },
+            {
+              "description": "Space returned between wrapped chip rows after a touch target overlaps the field's trailing padding.",
+              "name": "--rc-chip-touch-target-overlap-block-end",
+              "default": "0px"
+            },
             {
               "description": "Inline size of the toggle indicator container.",
               "name": "--rc-select-toggle-indicator-size",
               "default": "1.1em"
+            },
+            {
+              "description": "Gap between fullscreen dialog regions.",
+              "name": "--rc-select-dialog-gap",
+              "default": "1rem"
+            },
+            {
+              "description": "Gap between fullscreen dialog header slots.",
+              "name": "--rc-select-dialog-header-gap",
+              "default": "0.5rem"
             }
           ],
           "cssParts": [
@@ -171,6 +228,42 @@
             {
               "description": "The `<rc-listbox>` popup element.",
               "name": "listbox"
+            },
+            {
+              "description": "Dialog popup surface.",
+              "name": "dialog"
+            },
+            {
+              "description": "Managed leading/title/trailing header.",
+              "name": "dialog-header"
+            },
+            {
+              "description": "Leading button that discards pending changes.",
+              "name": "dialog-cancel"
+            },
+            {
+              "description": "Decorative close icon inside the cancel button.",
+              "name": "dialog-cancel-icon"
+            },
+            {
+              "description": "Visible dialog title.",
+              "name": "dialog-title"
+            },
+            {
+              "description": "Scrollable pending-selection chip region.",
+              "name": "dialog-selected"
+            },
+            {
+              "description": "Dialog confirmation action group.",
+              "name": "dialog-actions"
+            },
+            {
+              "description": "Commits pending changes and closes the dialog.",
+              "name": "dialog-confirm"
+            },
+            {
+              "description": "Dialog option list.",
+              "name": "dialog-listbox"
             }
           ],
           "slots": [
@@ -183,11 +276,36 @@
               "name": "display"
             },
             {
-              "description": "Optional. Replaces the default chevron indicator. Accepts any element(s); the container shifts to inline-start in RTL via flex direction.",
+              "description": "Optional. Replaces the default chevron indicator. Accepts any element(s); the container shifts to inline-start in RTL via flex direction. Built-in text (chip names, the dialog actions, the compact summary) follows the element's own `lang`, else `<html lang>`: per element through `messages`, or for every select through `registerMessages()` from `@rcarls/rc-common` under `rc-select`.",
               "name": "toggle-indicator"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "messages",
+              "type": {
+                "text": "Partial<RCSelectMessages> | undefined"
+              },
+              "description": "Built-in text overrides; unset keys fall back to registered text, then English."
+            },
+            {
+              "kind": "field",
+              "name": "_messages",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new MessagesController(this, 'rc-select', DEFAULT_SELECT_MESSAGES, { overrides: () => this.messages, })"
+            },
+            {
+              "kind": "field",
+              "name": "_text",
+              "type": {
+                "text": "RCSelectMessages"
+              },
+              "privacy": "protected",
+              "description": "The resolved built-in text. Subclasses with more text resolve their own scope.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "open",
@@ -221,6 +339,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Mirrors the slotted native `<select>`'s own `required`, for `aria-required` on the trigger.\nRead-only in practice: set `required` on the slotted `<select>` itself, the source of truth\nfor form participation and constraint validation.",
+              "attribute": "required",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "placeholder",
@@ -241,6 +370,28 @@
               "description": "Controls how selected values appear in the trigger.\n\n- `'chips'` — each selected value renders as a removable chip.\n- `'compact'` — selected values are summarized as \"First, +N more\".\n- `'auto'` — uses `'chips'` on pointer devices and `'compact'` on touch.",
               "attribute": "display"
             },
+            {
+              "kind": "field",
+              "name": "popupMode",
+              "type": {
+                "text": "RCSelectPopupMode"
+              },
+              "default": "'popover'",
+              "description": "Presents options in an anchored popover or transactional modal dialog.",
+              "attribute": "popup-mode",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dialogCancelButton",
+              "type": {
+                "text": "'visible' | 'hidden'"
+              },
+              "default": "'visible'",
+              "description": "Whether the leading dialog cancel action is visible.",
+              "attribute": "dialog-cancel-button",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "_$anchor",
@@ -268,6 +419,14 @@
               "privacy": "protected",
               "description": "The `<rc-listbox>` popup. Receives option lists and selected-value updates from the host."
             },
+            {
+              "kind": "field",
+              "name": "_$dialogHost",
+              "type": {
+                "text": "RCDialog | undefined"
+              },
+              "privacy": "protected"
+            },
             {
               "kind": "field",
               "name": "_selectedValues",
@@ -278,6 +437,34 @@
               "default": "new Set()",
               "description": "Reactive set of currently selected option values.\n\nDrive changes through `_applySelection` rather than mutating this directly\nso the listbox and native `<select>` stay in sync."
             },
+            {
+              "kind": "field",
+              "name": "_pendingSelectedValues",
+              "type": {
+                "text": "Set<string> | null"
+              },
+              "privacy": "protected",
+              "default": "null",
+              "description": "Transaction-local selection while a dialog popup is open."
+            },
+            {
+              "kind": "field",
+              "name": "_accessibleName",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "_activePopupMode",
+              "type": {
+                "text": "RCSelectPopupMode"
+              },
+              "privacy": "protected",
+              "default": "'popover'"
+            },
             {
               "kind": "field",
               "name": "_chipNavIndex",
@@ -412,16 +599,61 @@
               "kind": "field",
               "name": "_activeDescendantCtrl",
               "privacy": "protected",
-              "default": "new ActiveDescendantController(this, { host: () => this._$trigger ?? null, items: () => this._$listbox?.navigableItems ?? [], })",
+              "default": "new ActiveDescendantController(this, { host: () => this._$activeDescendantHost, items: () => this._$listbox?.navigableItems ?? [], })",
               "description": "Manages `aria-activedescendant` on `_$trigger` and keyboard cursor position\nwithin `_$listbox.navigableItems`."
             },
             {
               "kind": "field",
               "name": "_anchorCtrl",
               "privacy": "protected",
-              "default": "new AnchorController(this, { anchor: () => this._$anchor ?? null, floating: () => this._$listbox ?? null, shadowHost: () => this, placement: 'bottom-start', offset: 2, })",
+              "default": "new AnchorController(this, { anchor: () => this._$anchor ?? null, floating: () => this._$listbox ?? null, shadowHost: () => this, placement: 'block-end-start', offset: 2, disabled: () => !this.open || this._activePopupMode === 'dialog', })",
               "description": "Manages CSS-anchored (or JS-fallback) placement of `_$listbox` relative to `_$anchor`."
             },
+            {
+              "kind": "field",
+              "name": "_popoverCtrl",
+              "privacy": "protected",
+              "default": "new PopoverController(this, { element: () => this._$listbox ?? null })"
+            },
+            {
+              "kind": "field",
+              "name": "_$activeDescendantHost",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "protected",
+              "description": "Element that owns `aria-activedescendant` for the currently rendered popup.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Forwards focus to the trigger. The host itself is never in the tab order, so without this\noverride, calling `.focus()` on `<rc-select>` (as `rc-field` does when treating it as a\ncontrol provider) would be a no-op."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Forwards blur to the trigger; see `focus()`."
+            },
             {
               "kind": "method",
               "name": "openPopup",
@@ -434,7 +666,7 @@
                 {
                   "name": "returnFocus",
                   "default": "true",
-                  "description": "When `true` (default), returns focus to the trigger."
+                  "description": "when `true` (default), returns focus to the trigger"
                 }
               ],
               "description": "Closes the popup listbox."
@@ -497,6 +729,11 @@
                   "type": {
                     "text": "string[]"
                   }
+                },
+                {
+                  "name": "fromUser",
+                  "default": "false",
+                  "description": "pass `true` only for a selection driven by real user interaction, so\n`_syncNativeSelect` dispatches native `input`/`change` on the underlying `<select>` (a\nprogrammatic `value`/`defaultValue` write is not a native interaction and relies on an\nexternal `sync()` call instead, the same as `rc-textarea`'s controlled-value contract)"
                 }
               ],
               "description": "Applies an already-normalized array of values as the current selection.\n\nIn single-select mode only the first value is kept. Syncs `_$listbox` and the\nnative `<select>` but does NOT dispatch `rc-select-change`."
@@ -784,7 +1021,14 @@
               "kind": "method",
               "name": "_syncNativeSelect",
               "privacy": "protected",
-              "description": "Flips `selected` on each `<option>` in the native `<select>` to match `_selectedValues`; no-op when no native select is present."
+              "parameters": [
+                {
+                  "name": "fromUser",
+                  "default": "false",
+                  "description": "when `true`, also dispatches native `input` and `change` on `$select`\n(in that order, matching a real `<select>`) so outside listeners, including an\n`rc-field` ancestor treating this component as its control provider, observe the change"
+                }
+              ],
+              "description": "Flips `selected` on each `<option>` in the native `<select>` to match `_selectedValues`;\nno-op when no native select is present."
             },
             {
               "kind": "method",
@@ -932,10 +1176,160 @@
               "privacy": "protected",
               "description": "Toggles the popup open or closed on trigger click."
             },
+            {
+              "kind": "field",
+              "name": "_dialogSelectedValues",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "protected",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_focusDialogContent",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_prepareDialogCommit",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Hook for subclasses to finalize provisional options before dialog selection commits."
+            },
+            {
+              "kind": "method",
+              "name": "_commitDialogSelection",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_discardDialogSelection",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_finishDialogClose",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "returnFocus",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleDialogClose",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "CustomEvent<RCDialogCloseEvent>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_stopDialogEvent",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_removePendingValue",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_renderDialogBody",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "_renderDialogPopup",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "_renderAnchor",
+              "privacy": "protected"
+            },
             {
               "kind": "method",
               "name": "_renderChips",
               "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "values",
+                  "default": "this._selectedValues",
+                  "type": {
+                    "text": "Iterable<string>"
+                  }
+                },
+                {
+                  "name": "pending",
+                  "default": "false"
+                }
+              ],
               "description": "Renders selected values as removable input chips inside the shared chip-group layout."
             }
           ],
@@ -990,6 +1384,15 @@
               "default": "false",
               "fieldName": "disabled"
             },
+            {
+              "description": "Mirrors the slotted native `<select>`'s own `required`, for `aria-required` on the trigger.\nRead-only in practice: set `required` on the slotted `<select>` itself, the source of truth\nfor form participation and constraint validation.",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "required"
+            },
             {
               "description": "Text shown in the trigger when no value is selected.",
               "name": "placeholder",
@@ -1008,6 +1411,24 @@
               "default": "'auto'",
               "fieldName": "display"
             },
+            {
+              "description": "Presents options in an anchored popover or transactional modal dialog.",
+              "name": "popup-mode",
+              "type": {
+                "text": "RCSelectPopupMode"
+              },
+              "default": "'popover'",
+              "fieldName": "popupMode"
+            },
+            {
+              "description": "Whether the leading dialog cancel action is visible.",
+              "name": "dialog-cancel-button",
+              "type": {
+                "text": "'visible' | 'hidden'"
+              },
+              "default": "'visible'",
+              "fieldName": "dialogCancelButton"
+            },
             {
               "description": "Present when one or more options are selected. Use with CSS selectors (e.g. `rc-select[has-value]`) for floating-label wrappers.",
               "name": "has-value"
@@ -1022,6 +1443,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "DEFAULT_SELECT_MESSAGES",
+          "declaration": {
+            "name": "DEFAULT_SELECT_MESSAGES",
+            "module": "src/rc-select.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "RCSelect",