feat(label-group): create pf-label-group element

[saraDahanCode]

Partially addresses #2935

What I did

1. Created the new <pf-label-group> element.
2. Implemented functionality for grouping and displaying <pf-label> elements with support for removable and overflow states.
3. Added overflow behavior that collapses extra labels into a "+N more" indicator.
4. Added support for closing the entire label group at once.
5. Implemented title overflow handling to ensure long group titles truncate gracefully with ellipsis.
6. Integrated the group removal feature to dispatch a LabelGroupCloseEvent when the whole group is closed.
7. Added a demo page under /demo/pf-label-group/ showing various configurations (horizontal, vertical, removable, overflow, and closable examples).
8. Added CSS custom properties and shadow parts documentation following the Red Hat Design System style guides.
9. Added .changeset file with type minor to trigger a release.

Testing Instructions

1. Run npm start and open http://localhost:8000/elements/pf-label-group/demo/.
2. Verify that labels render correctly in horizontal and vertical orientations.
3. Test overflow by resizing the viewport — excess labels should collapse into a "+N more" label.
4. Check that removable labels can be removed individually, and verify that LabelCloseEvent is fired.
5. Run npm run lint and npm test to ensure all checks pass successfully.

Notes to Reviewers

1. Please confirm that all public fields, methods, slots, CSS custom properties, and shadow parts are documented according to the Red Hat style guide.
2. The .changeset file is set to minor, since this PR introduces a new element.
3. The commit message follows the Conventional Commits format
4. Ensure that the demo page provides adequate coverage for visual and accessibility testing.

[changeset-bot]

🦋 Changeset detected

Latest commit: 2d9e0e8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@patternfly/elements	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[saraDahanCode]

@bennypowers
Error running npm run dev (also affects npm run test)

When running the dev server, three TypeScript type errors occur in tools/pfe-tools/dev-server/config.ts:

cors, cacheBusterMiddleware, liveReloadTsChangesMiddleware middlewares fail due to incompatible Koa types.

The errors indicate Property 'back' is missing and type conflicts between different @types/koa versions.

This prevents the dev server from starting and causes the tests to fail.

Example snippet:

127 cors, // TS2322: Type '(ctx: Context, next: Next) => Promise' is not assignable to type 'Middleware'
128 cacheBusterMiddleware,
129 liveReloadTsChangesMiddleware(config),

It seems related to multiple @types/koa versions being used in the project.

[mguetta1]

@markcaron @bennypowers @zeroedin Hi,
I am trying to help to fix the tests in this PR. Can you please advise regarding the error here?
IIUC, the errors are in tools/pfe-tools/dev-server/config.ts which didn't change

[netlify]

✅ Deploy Preview for patternfly-elements ready!

Name	Link
🔨 Latest commit	16212ee
🔍 Latest deploy log	https://app.netlify.com/projects/patternfly-elements/deploys/690b3428a6d17c0008a814a7
😎 Deploy Preview	https://deploy-preview-2949--patternfly-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[bennypowers]

it's not clear what this function is doing.

add a trigger button for the modal, and use modal events to handle close, as in line 128

[saraDahanCode]

@bennypowers
so I’ll remove the openModel function, use the other inner functions when needed, and put the model in HTML. right?

[bennypowers]

like this:

<pf-button id="modal-toggle">Show Modal</pf-button>
<pf-modal>
  <h2 slot="header">Add label</h2>
  <form id="add-label-form">
    <label>
      Label text:
      <input id="label-text" class="pf-c-form-control" />
    </label>

    <label>
      Color:
      <pf-select id="color-select" class="pf-c-form-control">
        <pf-option value="Grey" selected>Grey</pf-option>
        <pf-option value="Blue">Blue</pf-option>
        <pf-option value="Cyan">Cyan</pf-option>
        <pf-option value="Green">Green</pf-option>
        <pf-option value="Orange">Orange</pf-option>
        <pf-option value="Purple">Purple</pf-option>
        <pf-option value="Red">Red</pf-option>
        <pf-option value="Gold">Gold</pf-option>
      </pf-select>
    </label>

    <label>
      Icon:
      <pf-select id="icon-select" class="pf-c-form-control">
        <pf-option value=""><span>No Icon</span></pf-option>
        <pf-option value="info-circle"><pf-icon name="info-circle"></pf-icon>Info</pf-option>
        <pf-option value="check-circle"><pf-icon name="check-circle"></pf-icon>Check</pf-option>
        <pf-option value="exclamation-circle"><pf-icon name="exclamation-circle"></pf-icon>Warning</pf-option>
      </pf-select>
    </label>

    <div class="radio-group">
      <label>Dismissable:</label>
      <div>
        <label><input type="radio" name="dismissable" value="true"> Yes</label>
        <label><input type="radio" name="dismissable" value="false" checked> No</label>
      </div>
    </div>

    <div class="radio-group">
      <label>Label type:</label>
      <div>
        <label><input type="radio" name="filled" value="true" checked> Filled</label>
        <label><input type="radio" name="filled" value="false"> Outlined</label>
      </div>
    </div>
  </form>

  <pf-button id="modal-add" slot="footer" variant="primary">Save</pf-button>
  <pf-button id="modal-cancel" slot="footer" variant="secondary">Cancel</pf-button>
</pf-modal>

keep this single modal in HTML, don't create a new one every time there's a call ("modal" is an adjective, meaning that when the modal dialog is displayed, no other actions can occur until the dialog is dismissed or completed)

[saraDahanCode]

got it. I'll implement it.

[bennypowers]

This modal content is static, so put it in the HTML rather than in javascript, and call showModal() on it when you need to