feat: listbox elements (#2570)

* feat(dropdown): matched styling and demos to upstream

* feat(dropdown): cleaned up docs

* feat(dropdown): updated divider css

* fix(dropdown): fixed aria-haspopus

* feat(select): implements suggested update to SVG size

Co-authored-by: Steven Spriggs <[email protected]>

* feat(dropdown): prop updated to match upstream api

* Merge branch 'issue-2049' of github.com:patternfly/patternfly-elements into menu-dropdown-listbox

* feat(chip): increased target size for a11y

* feat(dropdown): increased target size for a11y

* feat(select): increased target size for a11y

* fix(select): fixed PfIcon import

Co-authored-by: Steven Spriggs <[email protected]>

* fix(select): updated imports

Co-authored-by: Steven Spriggs <[email protected]>

* fix(select): organized imports

Co-authored-by: Steven Spriggs <[email protected]>

* fix(select): refactor of options list

* docs(dropdown): updated separator in docs

* feat(core): init toggle-controller

* feat(dropdown): updated dropdown to use toggle controller

* feat(select): updated dropdown to use toggle controller

* feat(select): updated dropdown to use toggle controller

* fix(chip): fixed issue with focusing on a chip that is removed

* fix(core): fixed focus on toggle copntroller close

* fix(dropdown): fixed focus issues with dropdown and tests

* docs(dropdown): updated docs

* docs(select): updated docs

* docs(chip): updated docs

* fix(core): Updated toggle-controller

Co-authored-by: Steven Spriggs <[email protected]>

* fix(dropdown): Sorted the #private properties below the decorated

Co-authored-by: Steven Spriggs <[email protected]>

* docs(core): Updated comment on toggle-controller

Co-authored-by: Steven Spriggs <[email protected]>

* docs(core): Updated comment typo in toggle-controller

Co-authored-by: Steven Spriggs <[email protected]>

* fix(select): implemented aria-disabled for a11y

* fix(select): implemented aria-disabled for a11y

* fix(select): implemented aria-disabled for a11y

* fix(select): implemented aria-disabled for a11y

* fix(dropdown): implemented aria-disabled for a11y

* fix(core): rti updateItems to keep focus on activeItem or next item

* fix(chip): fixed chip group keyboard nav and long chip vertical alignment

* fix(dropdown): updated a11y keyboard navigation

* feat(core):  controller formatting

* fix(chip): formatting

* fix(dropdown): formatting

* fix(select): formatting

* feat(core): moved nav by first char form listbox controller to roving tabindex controller

* Updated changeset rh-listbox-elements.md

* Delete outdated .changeset/pf-dropdown.md

* docs(dropdown): removed unused value property

* fix(dropdown): updated test based on correct a11y

* test(dropdown): fixed test

* fix(core): fixes issue where tabindex is not updated when rti items are updated

* fix(chip): removes chips without buttons from rti updates

* fix(core): fixed issue with listbox controller preventing selection

* fix(select): fixed issue with setting aria-disabled

* docs(chip): added screenshot

* docs(dropdown): updated screenshot

* docs(select): updated screenshot

* feat(core): updated toggle controler event handlers

* fix(core): updating rti items should not set focus unless host already has focus

* docs(chip): fixed typo in comment

* test(chip): moved a11y test on its own

* fix(select): chip group should not be removable

* test(select): removed unneccesary waits

* test(select): fixed tests

* fix(select): fixes input toggling

* fix(select): fixed typeahead toggle

* refactor(core): rename internal type

* feat(chip): updated changeset

* feat(dropdown): updated changeset

* feat(select): updated changeset and fixed API based on feedback

* feat(core): updated changeset

* fix(select): refactor aria-disabled

* fix(select): refactored based on review, updated disabled and multiselectable

* fix(core): moved order of event key handling in listbox-controller

* Merge branch 'main' of github.com:patternfly/patternfly-elements into menu-dropdown-listbox

* fix(core): refactored listbox-controller based on feedback

* fix(core): updated listbox controller based on feedback

* fix(core): updated toggle-controler based on feedback

* fix(chip): updated chip, chip group and docs based

* fix(chip): updated has-category

* docs(chip): updated docs references to accessible instead of ARIA

* fix(chip): removed overflow-hidden attribute from chip

* fix(chip): updated chip events

* fix(select): cleaned up properties and styles

* fix(core): updated toggle controller to accept current id or generate one

* fix(select): updated based on feedback

* fix(core): toggle-controller updated random id assignmenrt

* fix(select): updating select based on feedback

* fix(select): fixes filtering

* fix(select): updated API based on feedback

* fix(select): removed unnecessary connected callback

* fix(core): Updated .changeset/roving-tabindex-controller.md

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

* fix(chip): refactor of hiding overflow chips

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

* fix(chip): focus delegation

* fix(dropdown): focus delegation

* fix(core): made internals, rti, listbox and toggle controllers singletons

* docs(chip): updated changeset

* docs(dropdown): updated changeset

* docs(select): updated changeset

* docs(chip): made demo imports inline and split chip-group demos

* docs(chip): removed wrapping div fromd emos

* fix(chip): renamed closeLabel to accessibleCloseLabel

* fix(popover): deprecating close-label and implementing accessible-close-label

* fix(chip): made button private and fixed demos

* fix(chip): removed composed from chip events

* fix(chip): updated readonly property and cleaned up slot

* fix(chip): updated tests

* test(chip): updated chip-group test

* test(chip): updated chip-group test

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

* test(chip): updating chip tests

* test(chip): updated tests

* fix(dropdown): updated dropdown based on feedback

* fix(dropdown): updated dropdown based on feedback

* docs(dropdown): updated readme

* fix(dropdown): refactoring to make us of intenrals if available

* fix(select): working on using internals if available

* fix(core): working on internals controller as a singleton

* fix(core): updated because there can be more than one toggle controller

* test(dropdown): updating tests

* fix(core): ensure there is a role set on toggle

* fix(dropdown): attempting to use internals when possible

* test(dropdown): updated based on feeddback

* fix(core): updated toggle controller to remove forcing a role

* fix(dropdown): added missed import

* test(dropdown): fixed tests

* docs(select): split demos and inline scripts

* fix(select): refactoring create option and updating checkbox attribute

* docs(select): updated demos

* fix(select): refactored create option

* fix(select): updated disabled styling

* Merge branch 'main' of github.com:patternfly/patternfly-elements into menu-dropdown-listbox

* fix(select): resolved arrowDown toggling

* fix(select): remove pf-select-list and pf-select-option to pf-listbox and pf-option

* docs(chip): fixed typos

* docs(dropdown): fixed typos

* docs(dropdown): fixed typos

* docs(core): fixed typos in listbox controller

* docs(chip): fixed typos

* docs(dropdown): wai-aria disabled complex components snippet

* docs(select): wai-aria disabled complex components snippet

* docs(select): updating formatting

* feat(select): renaming option, listbox, and option group

* fix(select): updated pf-listbox and controller

* fix(core): removed unnecessary || undefined from tri's nextMatchingItem

* test(chip): remove shadowRoot query in favor of a11y snapshot

* fix(chip): fixed keyboard navigation

* fix(chip): fixed focus issue when removing a chip

* fix(chip): fixed keyboard navigation and updated tests

* fix(popover): added changeset

* test(chip): fixed describe messages

* test(dropdown): fixed describe messages

* test(chip): cleaned up chip descriptions

* test(dropdown): cleaned up descriptions

* test(select): cleaned up descriptions

* docs(chip): updated demos

* docs(dropdown): updated demos and docs

* docs(select): updated demos

* fix(chip): removed aria-labelled by on overflow chip

* test(select): fixes tests

* fix(chip): updated based on feedback and added more documentaiton

* fix(core): updated toggle-controller based on feedback

* fix(select): updated based on feedback

* docs(chip): updated JSDoc for events

* docs(select): updated JSDoc for events

* docs: changeset

* style: white space and import order

* style(select): whitespace, template

* fix(dropdown): formatting, event

* fix(core): rti types

* chore: build order

* fix(core): internalscontroller aria mixin props

* fix(core): make controllers framework-friendly

* style(dropdown): whitespace

* docs(chip): demos

* fix(chip): events

* refactor(chip): type names

* fix(chip): updated overflow and label properties based on feedback

* fix(chip): updated chip group

* fix(core): removed this.host.expanded from toggle controller

* fix(dropdown): removed unncessary `expanded` property

* fix(dropdown): removed unncessary `expanded` property

* chore: dev script

* refactor(core): internals controller decorators

* refactor(core): listbox controller filter decorator

* fix(core): toggle controller widen type of host

* refactor(chip): remove superfluous super call

* chore: test:watch script

* fix(core): initializers for listbox controller decorator

* fix(core)!: private constructors for controllers

* fix(chip): fix some chip styles

Still lots of work to do here to align this with pfv4

* fix(chip): test and labels

* test(chip): suite names

* fix(chip): overflow text semantics

* docs(core): inline docs

* fix(core): aria element idl attrs

* fix(dropdown): docs, fixes, demos

* chore: dev script

* fix(popover): deprecate attr with deco

* fix(select): docs, refactors, fixes

* chore: sync package lock

* fix: revert dev command changes

* fix(chip): now more overflow-chip styles not needed

* fix: replace activedescendant with tabindex controller

* refactor: rename internalscontroller static constructor

* fix: lint and type errors

* chore: update deps

* fix: avoid ts meltdown

* fix(core): types for Logger

* fix: types for css files

* fix: typescript stuff

* chore: make lit/react a devDep

* chore: wrangle package lock

* test(select): normalize some tests

* feat(chip): reverted from pf-button to button and updated styles

* fix(chip): correcting non pfv4 tokens

* fix(dropdown): correcting non pfv4 tokens

* fix(select): correcting non pfv4 tokens

* fix(select): correcting non pfv4 tokens

* fix(select): use non dark version of token instead

* fix(select): correct typo

* refactor: remove ListboxControllerItem interface

* test(select): fix more tests

* fix(chip): updated target size to WCAG AA 24px

* fix(select): fixed listbox selection

* docs: changeset

* Revert "fix(chip): updated target size to WCAG AA 24px"

Unfortunately, we must ship styles that replicate pfv4.

This should instead be reported as a bug on patternfly

This reverts commit 26f6d32.

* test(chip): fix most chip-group tests

* fix(chip): overflow chip

* fix(dropdown): template typo, tests

* test(popover): fix units

* test(select): update units

* test(chip): update unit

@nikkimk please validate and fix if necessary

* fix(core): toggle controller imposes fewer opinions

* style: remove comments

* fix: pf tokens

---------

Co-authored-by: Nikki Massaro Kauffman <[email protected]>
Co-authored-by: Nikki Massaro Kauffman <[email protected]>
Co-authored-by: Steven Spriggs <[email protected]>

.changeset/lazy-hounds-agree.md

@@ -0,0 +1,18 @@
+---
+"@patternfly/pfe-core": major
+---
+`InternalsController`: made the constructor private. Use `InternalsController.of`
+
+BEFORE:
+```js
+class PfJazzHands extends LitElement {
+  #internals = new InternalsController(this);
+}
+```
+
+AFTER:
+```js
+class PfJazzHands extends LitElement {
+  #internals = InternalsController.of(this);
+}
+```

.changeset/pf-chip.md

@@ -0,0 +1,16 @@
+---
+"@patternfly/elements": minor
+---
+
+✨ Added `<pf-chip>`
+
+A **chip** is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.
+
+```html
+  <pf-chip-group>
+    <pf-chip>Chip 1</pf-chip>
+    <pf-chip>Chip 2</pf-chip>
+    <pf-chip>Chip 3</pf-chip>
+    <pf-chip>Chip 4</pf-chip>
+  </pf-chip-group>
+```

.changeset/pf-dropdown.md

@@ -0,0 +1,24 @@
+---
+"@patternfly/elements": minor
+---
+
+✨ Added `<pf-dropdown>`
+
+A **dropdown** presents a menu of actions or links in a constrained space that will trigger a process or navigate to a new location.
+
+```html
+<pf-dropdown>
+    <pf-dropdown-item>item4</pf-dropdown-item>
+    <div role="separator"></div>
+    <pf-dropdown-group label="Group 1">
+        <pf-dropdown-item>item1</pf-dropdown-item>
+        <pf-dropdown-item>item2</pf-dropdown-item>
+        <div role="separator"></div>
+        <pf-dropdown-item>item3</pf-dropdown-item>
+    </pf-dropdown-group>
+    <pf-dropdown-group label="Group 2">
+        <pf-dropdown-item>item1</pf-dropdown-item>
+        <pf-dropdown-item>item2</pf-dropdown-item>
+    </pf-dropdown-group>
+</pf-dropdown>
+```

.changeset/pf-select.md

@@ -0,0 +1,20 @@
+---
+"@patternfly/elements": minor
+---
+
+✨ Added `<pf-select>`
+
+A select list enables users to select one or more items from a list.
+
+```html
+<pf-select>
+  <pf-option>Blue</pf-option>
+  <pf-option>Green</pf-option>
+  <pf-option>Magenta</pf-option>
+  <pf-option>Orange</pf-option>
+  <pf-option>Purple</pf-option>
+  <pf-option>Pink</pf-option>
+  <pf-option>Red</pf-option>
+  <pf-option>Yellow</pf-option>
+</pf-select>
+```

.changeset/polite-ducks-beg.md

@@ -0,0 +1,15 @@
+---
+"@patternfly/elements": patch
+---
+
+`<pf-popover>`: deprecate `closeButtonLabel` property / `close-label` attribute in favor of `accessibleCloseLabel` property / `accessible-close-label` attribute
+
+Before:
+```html
+<pf-popover close-label="סגירה">...</pf-popover>
+```
+
+After:
+```html
+<pf-popover accessible-close-label="סגירה">...</pf-popover>
+```

.changeset/roving-tabindex-controller.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/pfe-core": minor
+---
+
+`RovingTabindexController`: keyboard navigation includes first-character navigation.

core/pfe-core/controllers/floating-dom-controller.ts

@@ -1,5 +1,5 @@
 import type { Placement } from '@floating-ui/dom';
-import type { ReactiveController, ReactiveElement } from 'lit';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
 import type { StyleInfo } from 'lit/directives/style-map.js';
 import type { OffsetOptions as Offset } from '@floating-ui/core';
 
@@ -46,7 +46,7 @@ export class FloatingDOMController implements ReactiveController {
   #alignment?: Alignment;
   #styles?: StyleInfo;
   #placement?: Placement;
-  #options: Required<FloatingDOMControllerOptions>;
+  #options: FloatingDOMControllerOptions;
 
   get #invoker() {
     const { invoker } = this.#options;
@@ -95,13 +95,15 @@ export class FloatingDOMController implements ReactiveController {
   }
 
   constructor(
-    private host: ReactiveElement,
+    private host: ReactiveControllerHost,
     options: FloatingDOMControllerOptions
   ) {
     host.addController(this);
-    this.#options = options as Required<FloatingDOMControllerOptions>;
-    this.#options.invoker ??= host;
-    this.#options.shift ??= true;
+    this.#options = {
+      invoker: (host instanceof HTMLElement ? () => host : () => undefined),
+      shift: true,
+      ...options,
+    };
   }
 
   hostDisconnected() {