@angular/aria 21.0.0-rc.1 → 21.0.0-rc.3

package/_adev_assets/aria-combobox.json

@@ -20,31 +20,31 @@
           "jsdocTags": []
         },
         {
-          "name": "popup",
-          "type": "any",
+          "name": "element",
+          "type": "HTMLElement",
           "memberType": "property",
           "memberTags": [
             "readonly"
           ],
-          "description": "The combobox popup.",
+          "description": "A reference to the combobox element.",
           "jsdocTags": []
         },
         {
-          "name": "filterMode",
+          "name": "popup",
           "type": "any",
           "memberType": "property",
-          "memberTags": [],
-          "description": "The filter mode for the combobox.",
+          "memberTags": [
+            "readonly"
+          ],
+          "description": "The combobox popup.",
           "jsdocTags": []
         },
         {
-          "name": "isFocused",
+          "name": "filterMode",
           "type": "any",
           "memberType": "property",
-          "memberTags": [
-            "readonly"
-          ],
-          "description": "Whether the combobox is focused.",
+          "memberTags": [],
+          "description": "The filter mode for the combobox.\n- `manual`: The consumer is responsible for filtering the options.\n- `auto-select`: The combobox automatically selects the first matching option.\n- `highlight`: The combobox highlights matching text in the options without changing selection.",
           "jsdocTags": []
         },
         {
@@ -87,6 +87,16 @@
           "description": "Whether the combobox is expanded.",
           "jsdocTags": []
         },
+        {
+          "name": "alwaysExpanded",
+          "type": "any",
+          "memberType": "property",
+          "memberTags": [
+            "readonly"
+          ],
+          "description": "Whether the combobox popup should always be expanded, regardless of user interaction.",
+          "jsdocTags": []
+        },
         {
           "name": "inputElement",
           "type": "any",
@@ -96,6 +106,72 @@
           ],
           "description": "Input element connected to the combobox, if any.",
           "jsdocTags": []
+        },
+        {
+          "name": "open",
+          "signatures": [
+            {
+              "name": "open",
+              "entryType": "function",
+              "description": "Opens the combobox to the selected item.",
+              "generics": [],
+              "isNewType": false,
+              "jsdocTags": [],
+              "params": [],
+              "rawComment": "/** Opens the combobox to the selected item. */",
+              "returnType": "void"
+            }
+          ],
+          "implementation": {
+            "params": [],
+            "isNewType": false,
+            "returnType": "void",
+            "generics": [],
+            "name": "open",
+            "description": "Opens the combobox to the selected item.",
+            "entryType": "function",
+            "jsdocTags": [],
+            "rawComment": "/** Opens the combobox to the selected item. */"
+          },
+          "entryType": "function",
+          "description": "Opens the combobox to the selected item.",
+          "jsdocTags": [],
+          "rawComment": "/** Opens the combobox to the selected item. */",
+          "memberType": "method",
+          "memberTags": []
+        },
+        {
+          "name": "close",
+          "signatures": [
+            {
+              "name": "close",
+              "entryType": "function",
+              "description": "Closes the combobox.",
+              "generics": [],
+              "isNewType": false,
+              "jsdocTags": [],
+              "params": [],
+              "rawComment": "/** Closes the combobox. */",
+              "returnType": "void"
+            }
+          ],
+          "implementation": {
+            "params": [],
+            "isNewType": false,
+            "returnType": "void",
+            "generics": [],
+            "name": "close",
+            "description": "Closes the combobox.",
+            "entryType": "function",
+            "jsdocTags": [],
+            "rawComment": "/** Closes the combobox. */"
+          },
+          "entryType": "function",
+          "description": "Closes the combobox.",
+          "jsdocTags": [],
+          "rawComment": "/** Closes the combobox. */",
+          "memberType": "method",
+          "memberTags": []
         }
       ],
       "generics": [
@@ -103,14 +179,23 @@
           "name": "V"
         }
       ],
-      "description": "",
-      "jsdocTags": [],
-      "rawComment": "",
+      "description": "The container element that wraps a combobox input and popup, and orchestrates its behavior.\n\nThe `ngCombobox` directive is the main entry point for creating a combobox and customizing its\nbehavior. It coordinates the interactions between the `ngComboboxInput` and the popup, which\nis defined by a `ng-template` with the `ngComboboxPopupContainer` directive. If using the\n`CdkOverlay`, the `cdkConnectedOverlay` directive takes the place of `ngComboboxPopupContainer`.\n\n```html\n<div ngCombobox filterMode=\"highlight\">\n  <input\n    ngComboboxInput\n    placeholder=\"Search for a state...\"\n    [(value)]=\"searchString\"\n  />\n\n  <ng-template ngComboboxPopupContainer>\n    <div ngListbox [(value)]=\"selectedValue\">",
+      "jsdocTags": [
+        {
+          "name": "for",
+          "comment": "(option of filteredOptions(); track option) {\n<div ngOption [value]=\"option\" [label]=\"option\">\n<span>{{option}}</span>\n</div>\n}\n</div>\n</ng-template>\n</div>\n```"
+        },
+        {
+          "name": "developerPreview",
+          "comment": "21.0"
+        }
+      ],
+      "rawComment": "/**\n * The container element that wraps a combobox input and popup, and orchestrates its behavior.\n *\n * The `ngCombobox` directive is the main entry point for creating a combobox and customizing its\n * behavior. It coordinates the interactions between the `ngComboboxInput` and the popup, which\n * is defined by a `ng-template` with the `ngComboboxPopupContainer` directive. If using the\n * `CdkOverlay`, the `cdkConnectedOverlay` directive takes the place of `ngComboboxPopupContainer`.\n *\n * ```html\n * <div ngCombobox filterMode=\"highlight\">\n *   <input\n *     ngComboboxInput\n *     placeholder=\"Search for a state...\"\n *     [(value)]=\"searchString\"\n *   />\n *\n *   <ng-template ngComboboxPopupContainer>\n *     <div ngListbox [(value)]=\"selectedValue\">\n *       @for (option of filteredOptions(); track option) {\n *         <div ngOption [value]=\"option\" [label]=\"option\">\n *           <span>{{option}}</span>\n *         </div>\n *       }\n *     </div>\n *   </ng-template>\n * </div>\n * ```\n *\n * @developerPreview 21.0\n */",
       "implements": [],
       "source": {
         "filePath": "src/aria/combobox/combobox.ts",
-        "startLine": 32,
-        "endLine": 117
+        "startLine": 64,
+        "endLine": 170
       }
     },
     {
@@ -118,6 +203,16 @@
       "isAbstract": false,
       "entryType": "directive",
       "members": [
+        {
+          "name": "element",
+          "type": "HTMLElement",
+          "memberType": "property",
+          "memberTags": [
+            "readonly"
+          ],
+          "description": "A reference to the input element.",
+          "jsdocTags": []
+        },
         {
           "name": "combobox",
           "type": "any",
@@ -144,9 +239,14 @@
         }
       ],
       "generics": [],
-      "description": "",
-      "jsdocTags": [],
-      "rawComment": "",
+      "description": "An input that is part of a combobox. It is responsible for displaying the\ncurrent value and handling user input for filtering and selection.\n\nThis directive should be applied to an `<input>` element within an `ngCombobox`\ncontainer. It automatically handles keyboard interactions, such as opening the\npopup and navigating through the options.\n\n```html\n<input\n  ngComboboxInput\n  placeholder=\"Search...\"\n  [(value)]=\"searchString\"\n/>\n```",
+      "jsdocTags": [
+        {
+          "name": "developerPreview",
+          "comment": "21.0"
+        }
+      ],
+      "rawComment": "/**\n * An input that is part of a combobox. It is responsible for displaying the\n * current value and handling user input for filtering and selection.\n *\n * This directive should be applied to an `<input>` element within an `ngCombobox`\n * container. It automatically handles keyboard interactions, such as opening the\n * popup and navigating through the options.\n *\n * ```html\n * <input\n *   ngComboboxInput\n *   placeholder=\"Search...\"\n *   [(value)]=\"searchString\"\n * />\n * ```\n *\n * @developerPreview 21.0\n */",
       "implements": [],
       "isStandalone": true,
       "selector": "input[ngComboboxInput]",
@@ -155,8 +255,8 @@
       ],
       "source": {
         "filePath": "src/aria/combobox/combobox.ts",
-        "startLine": 119,
-        "endLine": 156
+        "startLine": 190,
+        "endLine": 236
       }
     },
     {
@@ -165,14 +265,19 @@
       "entryType": "undecorated_class",
       "members": [],
       "generics": [],
-      "description": "",
-      "jsdocTags": [],
-      "rawComment": "",
+      "description": "A structural directive that marks the `ng-template` to be used as the popup\nfor a combobox. This content is conditionally rendered.\n\nThe content of the popup can be a `ngListbox`, `ngTree`, or `role=\"dialog\"`, allowing for\nflexible and complex combobox implementations. The consumer is responsible for\nimplementing the filtering logic based on the `ngComboboxInput`'s value.\n\n```html\n<ng-template ngComboboxPopupContainer>\n  <div ngListbox [(value)]=\"selectedValue\">\n    <!-- ... options ... -->\n  </div>\n</ng-template>\n```\n\nWhen using CdkOverlay, this directive can be replaced by `cdkConnectedOverlay`.\n\n```html\n<ng-template\n    [cdkConnectedOverlay]=\"{origin: inputElement, usePopover: 'inline' matchWidth: true}\"\n    [cdkConnectedOverlayOpen]=\"combobox.expanded()\">\n  <div ngListbox [(value)]=\"selectedValue\">\n    <!-- ... options ... -->\n  </div>\n</ng-template>\n```",
+      "jsdocTags": [
+        {
+          "name": "developerPreview",
+          "comment": "21.0"
+        }
+      ],
+      "rawComment": "/**\n * A structural directive that marks the `ng-template` to be used as the popup\n * for a combobox. This content is conditionally rendered.\n *\n * The content of the popup can be a `ngListbox`, `ngTree`, or `role=\"dialog\"`, allowing for\n * flexible and complex combobox implementations. The consumer is responsible for\n * implementing the filtering logic based on the `ngComboboxInput`'s value.\n *\n * ```html\n * <ng-template ngComboboxPopupContainer>\n *   <div ngListbox [(value)]=\"selectedValue\">\n *     <!-- ... options ... -->\n *   </div>\n * </ng-template>\n * ```\n *\n * When using CdkOverlay, this directive can be replaced by `cdkConnectedOverlay`.\n *\n * ```html\n * <ng-template\n *     [cdkConnectedOverlay]=\"{origin: inputElement, usePopover: 'inline' matchWidth: true}\"\n *     [cdkConnectedOverlayOpen]=\"combobox.expanded()\">\n *   <div ngListbox [(value)]=\"selectedValue\">\n *     <!-- ... options ... -->\n *   </div>\n * </ng-template>\n * ```\n *\n * @developerPreview 21.0\n */",
       "implements": [],
       "source": {
         "filePath": "src/aria/combobox/combobox.ts",
-        "startLine": 158,
-        "endLine": 163
+        "startLine": 268,
+        "endLine": 273
       }
     },
     {
@@ -189,36 +294,111 @@
           ],
           "description": "The combobox that the popup belongs to.",
           "jsdocTags": []
+        }
+      ],
+      "generics": [
+        {
+          "name": "V"
+        }
+      ],
+      "description": "Identifies an element as a popup for an `ngCombobox`.\n\nThis directive acts as a bridge, allowing the `ngCombobox` to discover and interact\nwith the underlying control (e.g., `ngListbox`, `ngTree`, or `ngComboboxDialog`) that\nmanages the options. It's primarily used as a host directive and is responsible for\nexposing the popup's control pattern to the parent combobox.",
+      "jsdocTags": [
+        {
+          "name": "developerPreview",
+          "comment": "21.0"
+        }
+      ],
+      "rawComment": "/**\n * Identifies an element as a popup for an `ngCombobox`.\n *\n * This directive acts as a bridge, allowing the `ngCombobox` to discover and interact\n * with the underlying control (e.g., `ngListbox`, `ngTree`, or `ngComboboxDialog`) that\n * manages the options. It's primarily used as a host directive and is responsible for\n * exposing the popup's control pattern to the parent combobox.\n *\n * @developerPreview 21.0\n */",
+      "implements": [],
+      "isStandalone": true,
+      "selector": "[ngComboboxPopup]",
+      "exportAs": [
+        "ngComboboxPopup"
+      ],
+      "source": {
+        "filePath": "src/aria/combobox/combobox.ts",
+        "startLine": 285,
+        "endLine": 300
+      }
+    },
+    {
+      "name": "ComboboxDialog",
+      "isAbstract": false,
+      "entryType": "directive",
+      "members": [
+        {
+          "name": "element",
+          "type": "HTMLElement",
+          "memberType": "property",
+          "memberTags": [
+            "readonly"
+          ],
+          "description": "A reference to the dialog element.",
+          "jsdocTags": []
         },
         {
-          "name": "controls",
+          "name": "combobox",
           "type": "any",
           "memberType": "property",
           "memberTags": [
             "readonly"
           ],
-          "description": "The controls the popup exposes to the combobox.",
+          "description": "The combobox that the dialog belongs to.",
           "jsdocTags": []
+        },
+        {
+          "name": "close",
+          "signatures": [
+            {
+              "name": "close",
+              "entryType": "function",
+              "description": "",
+              "generics": [],
+              "isNewType": false,
+              "jsdocTags": [],
+              "params": [],
+              "rawComment": "",
+              "returnType": "void"
+            }
+          ],
+          "implementation": {
+            "params": [],
+            "isNewType": false,
+            "returnType": "void",
+            "generics": [],
+            "name": "close",
+            "description": "",
+            "entryType": "function",
+            "jsdocTags": [],
+            "rawComment": ""
+          },
+          "entryType": "function",
+          "description": "",
+          "jsdocTags": [],
+          "rawComment": "",
+          "memberType": "method",
+          "memberTags": []
         }
       ],
-      "generics": [
+      "generics": [],
+      "description": "Integrates a native `<dialog>` element with the combobox, allowing for\na modal or non-modal popup experience. It handles the opening and closing of the dialog\nbased on the combobox's expanded state.\n\n```html\n<ng-template ngComboboxPopupContainer>\n  <dialog ngComboboxDialog class=\"example-dialog\">\n    <!-- ... dialog content ... -->\n  </dialog>\n</ng-template>\n```",
+      "jsdocTags": [
         {
-          "name": "V"
+          "name": "developerPreview",
+          "comment": "21.0"
         }
       ],
-      "description": "",
-      "jsdocTags": [],
-      "rawComment": "",
+      "rawComment": "/**\n * Integrates a native `<dialog>` element with the combobox, allowing for\n * a modal or non-modal popup experience. It handles the opening and closing of the dialog\n * based on the combobox's expanded state.\n *\n * ```html\n * <ng-template ngComboboxPopupContainer>\n *   <dialog ngComboboxDialog class=\"example-dialog\">\n *     <!-- ... dialog content ... -->\n *   </dialog>\n * </ng-template>\n * ```\n *\n * @developerPreview 21.0\n */",
       "implements": [],
       "isStandalone": true,
-      "selector": "[ngComboboxPopup]",
+      "selector": "dialog[ngComboboxDialog]",
       "exportAs": [
-        "ngComboboxPopup"
+        "ngComboboxDialog"
       ],
       "source": {
         "filePath": "src/aria/combobox/combobox.ts",
-        "startLine": 165,
-        "endLine": 177
+        "startLine": 317,
+        "endLine": 367
       }
     }
   ],
@@ -227,6 +407,10 @@
       "afterRenderEffect",
       "@angular/core"
     ],
+    [
+      "booleanAttribute",
+      "@angular/core"
+    ],
     [
       "computed",
       "@angular/core"
@@ -287,6 +471,10 @@
       "ComboboxTreeControls",
       "@angular/aria/private"
     ],
+    [
+      "ComboboxDialogPattern",
+      "@angular/aria/private"
+    ],
     [
       "Directionality",
       "@angular/cdk/bidi"
@@ -311,6 +499,10 @@
       "ComboboxPopup",
       "@angular/aria/combobox"
     ],
+    [
+      "ComboboxDialog",
+      "@angular/aria/combobox"
+    ],
     [
       "Combobox",
       "@angular/aria/combobox"
@@ -320,15 +512,15 @@
       "@angular/aria/combobox"
     ],
     [
-      "Combobox.popup",
+      "Combobox.element",
       "@angular/aria/combobox"
     ],
     [
-      "Combobox.filterMode",
+      "Combobox.popup",
       "@angular/aria/combobox"
     ],
     [
-      "Combobox.isFocused",
+      "Combobox.filterMode",
       "@angular/aria/combobox"
     ],
     [
@@ -347,14 +539,30 @@
       "Combobox.expanded",
       "@angular/aria/combobox"
     ],
+    [
+      "Combobox.alwaysExpanded",
+      "@angular/aria/combobox"
+    ],
     [
       "Combobox.inputElement",
       "@angular/aria/combobox"
     ],
+    [
+      "Combobox.open",
+      "@angular/aria/combobox"
+    ],
+    [
+      "Combobox.close",
+      "@angular/aria/combobox"
+    ],
     [
       "ComboboxInput",
       "@angular/aria/combobox"
     ],
+    [
+      "ComboboxInput.element",
+      "@angular/aria/combobox"
+    ],
     [
       "ComboboxInput.combobox",
       "@angular/aria/combobox"
@@ -376,7 +584,19 @@
       "@angular/aria/combobox"
     ],
     [
-      "ComboboxPopup.controls",
+      "ComboboxDialog",
+      "@angular/aria/combobox"
+    ],
+    [
+      "ComboboxDialog.element",
+      "@angular/aria/combobox"
+    ],
+    [
+      "ComboboxDialog.combobox",
+      "@angular/aria/combobox"
+    ],
+    [
+      "ComboboxDialog.close",
       "@angular/aria/combobox"
     ]
   ]