docs(ecc-utils-design): fix missing exports in custom elements manifests

[revaarathore11]

Summary

Adds missing @element JSDoc annotations to all components in the ecc-utils-design package so the Custom Elements Manifest analyzer can correctly map classes to their HTML tags.

This fixes missing exports in custom-elements.json, restores IDE IntelliSense, and ensures React wrapper generation works correctly by enforcing kebab-case tag names.

Details

• Added @element ecc-utils-design-* JSDoc tags to all 12 components
• Normalized element names to kebab-case for React wrapper compatibility
• Re-ran CEM analyzer and verified dist/custom-elements.json
• Confirmed full monorepo build, including ecc-docs (Next.js)

Fixes #417

Summary by Sourcery

Annotate ecc-utils-design web components with element metadata for accurate custom elements manifest generation and improved tooling support.

Enhancements:

• Add @element JSDoc annotations to all ecc-utils-design components to ensure they are correctly exposed in the custom-elements manifest and downstream tooling.
• Align component tag naming with kebab-case conventions across select, multi-select, pagination, card, tabs, collapsible, input, badge, code, label, and separator components.
• Clarify skeleton component JSDoc by treating CSS classes as attributes and updating the usage example markup.

Documentation:

• Refine component JSDoc comments to better describe public HTML tags and attributes for consumers of ecc-utils-design.

[vercel]

@revaarathore11 is attempting to deploy a commit to the elixir-cloud-aai Team on Vercel.

A member of the Team first needs to authorize it.

[sourcery-ai]

Reviewer's Guide

Adds or corrects JSDoc metadata so all ecc-utils-design web components are properly declared as custom elements (with kebab-case tag names) in the Custom Elements Manifest, plus a minor doc fix for the skeleton component.

Flow diagram for CEM analyzer using @element tags to restore exports and tooling

flowchart LR
  subgraph Source_Code
    A_ts_files[TypeScript_components]
    A_jsdoc[JSDoc_annotations_with_element_tags]
  end

  subgraph Tooling
    B_cem_analyzer[Custom_Elements_Manifest_analyzer]
    C_manifest[custom_elements_json]
  end

  subgraph Consumers
    D_ide[IDE_Typescript_IntelliSense]
    E_react_generator[React_wrapper_generator]
    F_apps[Consumer_apps_and_docs]
  end

  A_ts_files --> A_jsdoc
  A_jsdoc --> B_cem_analyzer
  B_cem_analyzer --> C_manifest
  C_manifest --> D_ide
  C_manifest --> E_react_generator
  D_ide --> F_apps
  E_react_generator --> F_apps

Loading

File-Level Changes

Change	Details	Files
Annotate select-related components with @element JSDoc tags using kebab-case names so the CEM analyzer can map classes to their custom element tags.	Added @element ecc-utils-design-select to the root select component JSDoc. Added @element ecc-utils-design-select-* tags to trigger, content, item, group, label, separator, and value select subcomponents.	packages/ecc-utils-design/src/components/select/select.ts
Annotate pagination components with @element JSDoc tags to expose them correctly in custom-elements.json.	Added @element ecc-utils-design-pagination to the root pagination component JSDoc. Added @element ecc-utils-design-pagination-* tags to content, item, link, previous, next, and ellipsis pagination subcomponents.	packages/ecc-utils-design/src/components/pagination/pagination.ts
Ensure card and tabs components declare their custom elements via JSDoc, though there are now duplicate @element tags that may be unintentional.	Added duplicate @element tags to card, card-header, card-title, card-description, card-content, and card-footer component JSDocs. Added duplicate @element tags to tabs, tabs-list, tabs-trigger, and tabs-content component JSDocs.	packages/ecc-utils-design/src/components/card/card.ts packages/ecc-utils-design/src/components/tabs/tabs.ts
Annotate multi-select, collapsible, input, badge, code, label, and separator components with @element JSDoc tags for proper CEM export.	Added @element ecc-utils-design-multi-select-* tags to multi-select root, trigger, content, and item components. Added @element ecc-utils-design-collapsible-* tags to collapsible root, trigger, and content components. Added @element ecc-utils-design-input to the input component JSDoc. Added @element ecc-utils-design-badge to the badge component JSDoc. Added @element ecc-utils-design-code to the code editor component JSDoc. Added @element ecc-utils-design-label to the label component JSDoc. Added @element ecc-utils-design-separator to the separator component JSDoc.	packages/ecc-utils-design/src/components/multi-select/multi-select.ts packages/ecc-utils-design/src/components/collapsible/collapsible.ts packages/ecc-utils-design/src/components/input/input.ts packages/ecc-utils-design/src/components/badge/badge.ts packages/ecc-utils-design/src/components/code/code.ts packages/ecc-utils-design/src/components/label/label.ts packages/ecc-utils-design/src/components/separator/separator.ts
Tighten skeleton component documentation so attributes and examples align with usage.	Changed JSDoc from @prop to @attr for the class attribute on the skeleton component. Updated the skeleton usage example to a more explicit width/height/rounded shape class string.	packages/ecc-utils-design/src/components/skeleton/skeleton.ts

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#417	Ensure all custom elements across all packages have complete and correct exports in their custom elements manifests (via appropriate JSDoc, e.g., @element, and regenerating manifests).	❌	The PR only adds @element annotations for components in the ecc-utils-design package and regenerates its manifest. The issue calls for reviewing and fixing manifests for all packages, so repo-wide completeness is not achieved.
#417	Document all component APIs (props/attributes, events, and slots) in the custom elements manifests so documentation and IDE IntelliSense are complete.	❌	The PR primarily adds @element tags and adjusts a single @prop to @attr plus an example. It does not systematically document all props, events, and slots for all components, nor does it show broad API coverage improvements beyond those minimal changes.
#417	Introduce or update automated checks to validate the completeness and correctness of custom elements manifests across the monorepo.	❌	The PR does not add or modify any automated validation or CI checks related to custom elements manifests; it only mentions manual verification of dist/custom-elements.json and a monorepo build.

Possibly linked issues

• Fix Missing Exports in Custom Elements Manifests #417: PR adds @element tags and regenerates ecc-utils-design manifest, directly fixing the missing exports described in the issue.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[changeset-bot]

⚠️ No Changeset found

Latest commit: efa4249

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[sourcery-ai]

Hey - I've left some high level feedback:

• In card.ts and tabs.ts each component’s JSDoc now contains the same @element tag twice; please remove the duplicated annotations so each component has a single @element entry.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- In `card.ts` and `tabs.ts` each component’s JSDoc now contains the same `@element` tag twice; please remove the duplicated annotations so each component has a single `@element` entry.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}