Make our docs more attractive for developers and consumers #3607
Conversation
📝 WalkthroughWalkthroughThe README.md file was extensively revised to improve its clarity, structure, and visual presentation. New sections, badges, and branding elements were added, along with reorganized content, enhanced installation instructions, and expanded community and support information. No code or exported entities were changed; all modifications are documentation-only. The docs-index.html file was completely restructured and enhanced with richer metadata, improved semantic markup, a categorized and searchable version listing UI, and rewritten JavaScript logic for version sorting and filtering. A new CSS stylesheet, docs-index.css, was added to define a comprehensive design system and styling rules for the documentation index page, including color schemes, layout, typography, and interactive states. The file The ESLint configuration was updated to globally ignore the Changes
Suggested labels
Suggested reviewers
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! 📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (6)
💤 Files with no reviewable changes (1)
🧰 Additional context used📓 Path-based instructions (1)**/*.{ts,tsx}Instructions used from: Sources: 🧠 Learnings (4)📓 Common learningseslint.config.mjs (5)docs-index.html (14)docs-index.css (9)⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
🔇 Additional comments (14)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
|
Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-3607/ |
Kiarokh
force-pushed
the
improve-docs
branch
5 times, most recently
from
a5a0a8e to
17883fa
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR refactors and enriches the project’s README to make it more visually engaging and developer-friendly by introducing a branded header, clearer feature highlights, and streamlined setup instructions.
- Adds an inline logo and succinct tagline to the header
- Introduces a “Why Lime Elements?” feature overview and consolidated status badges
- Refreshes Quick Start, Community & Support, and Contributing sections for clarity
Comments suppressed due to low confidence (1)
README.md:51
- The import example deep-paths into the package build. For typical usage and future-proofing, consider importing from the package’s main entrypoint (
import '@limetech/lime-elements') to simplify updates and align with standard NPM practices.
import '@limetech/lime-elements/dist/lime-elements/lime-elements.esm.js';
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
README.md (1)
1-1: Inline HTML logo repeats past concern – still a portability issue
Inline<img>with astyle=attribute is flagged by markdown-lint (MD033) and may be stripped or rendered inconsistently outside GitHub. The same issue was pointed out in an earlier review. Consider the plain-markdown alternative:-# <img src="https://raw.githubusercontent.com/Lundalogik/lime-elements/main/icon.png" alt="Lime Elements Logo" style="width: 2.5rem; vertical-align: middle;"> Lime Elements +#  Lime Elements
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
README.md(3 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3581
File: src/components/chip-set/chip-set.tsx:626-626
Timestamp: 2025-07-02T12:49:21.522Z
Learning: When contributors add new props to existing components in the lime-elements repository, they should always add documentation examples that demonstrate the new prop's usage and explain how it works. This helps with user adoption, feature discoverability, and maintains comprehensive documentation.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:1-3
Timestamp: 2025-04-25T14:23:56.018Z
Learning: In the lime-elements repository, CSS custom properties prefixed with `--lime-` are considered internal implementation details and should not be documented in JSDoc comments, while other custom properties should be documented as they are part of the public API.
README.md (13)
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3581
File: src/components/chip-set/chip-set.tsx:626-626
Timestamp: 2025-07-02T12:49:21.522Z
Learning: When contributors add new props to existing components in the lime-elements repository, they should always add documentation examples that demonstrate the new prop's usage and explain how it works. This helps with user adoption, feature discoverability, and maintains comprehensive documentation.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-16T14:14:18.253Z
Learning: For lime-elements, example files should be self-contained and avoid importing internal implementation details. Example files should only import public exports from '@limetech/lime-elements' or use relative imports for other files within the examples folder. Duplicating simple type definitions in example files is preferred over importing internal types.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-17T09:39:36.254Z
Learning: For lime-elements, example files should import types from the public API using '@limetech/lime-elements' rather than defining duplicate types locally. This includes types like `EditorUiType` which are part of the component's public API.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-16T14:14:18.253Z
Learning: For lime-elements, example files should be self-contained and avoid importing internal implementation details. This includes not importing types from internal files like '../types.ts', especially those marked with @beta. Duplicating simple type definitions in example files is preferred over importing internal types that may change.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/inserter.ts:1-11
Timestamp: 2025-03-04T14:27:29.714Z
Learning: In example components (typically found in `src/components/*/examples/`), imports of lime-elements exports should use `@limetech/lime-elements` instead of relative paths. This is because example components aren't included in type declarations and are used in documentation to show developers how to properly use lime-elements components.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:1-3
Timestamp: 2025-04-25T14:23:56.018Z
Learning: In the lime-elements repository, CSS custom properties prefixed with `--lime-` are considered internal implementation details and should not be documented in JSDoc comments, while other custom properties should be documented as they are part of the public API.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/inserter.ts:1-11
Timestamp: 2025-03-04T13:48:44.712Z
Learning: The lime-elements codebase must use relative imports (even with multiple "../") rather than alias imports or re-exports because they export types to `<repo-root>/dist/types`. Using non-relative imports breaks type generation as import paths from generated type files point to full .ts files rather than .d.ts files.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/view.scss:14-17
Timestamp: 2025-03-11T13:31:46.958Z
Learning: Lime Elements generally does not support unreasonably old browsers, so modern CSS properties like `scale` that have good support in current browsers are preferred over older alternatives.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/notched-outline/examples/notched-outline-basic.scss:11-22
Timestamp: 2025-04-14T10:01:18.721Z
Learning: Examples in Lime Elements use Shadow DOM (with `shadow: true` in the component decorator) for style encapsulation, making additional class-based selectors unnecessary. This ensures styles are automatically scoped to each component without leaking to the rest of the application.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:24-28
Timestamp: 2025-04-25T14:22:02.157Z
Learning: In lime-elements, CSS custom properties follow a specific naming convention:
1. Internal use variables (not for consumers) are prefixed with `--limel-component-name-`
2. External use variables (intended for consumers) are prefixed with `--component-name-`
Variables documented with JSDoc comments are typically meant for external use.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.tsx:30-38
Timestamp: 2025-04-25T13:32:56.396Z
Learning: For StencilJS components in lime-elements, prefer using the `<Host>` element to wrap child elements in the render method instead of returning an array of elements. This follows the standard pattern in the codebase and eliminates the need for key attributes.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.tsx:30-38
Timestamp: 2025-04-25T13:32:56.396Z
Learning: For StencilJS components in lime-elements, prefer using the `<Host>` element to wrap child elements in the render method instead of returning an array of elements, which eliminates the need for key attributes and follows StencilJS best practices.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:96-122
Timestamp: 2025-04-25T14:18:07.755Z
Learning: In Lime Elements components that use Shadow DOM (with `shadow: true` in the component decorator), keyframe animation names don't need to be namespaced as they are automatically scoped to the component and won't collide with animations from other components.
🪛 LanguageTool
README.md
[grammar] ~1-~1: Use correct spacing
Context: ... 2.5rem; vertical-align: middle;"> Lime Elements **Modern Web Components for Enterprise Ap...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~3-~3: Use correct spacing
Context: ... Modern Web Components for Enterprise Applications _A comprehensive design system and compo...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~5-~5: Use correct spacing
Context: ...system and component library built with Stencil_ --- ## Why Lime Elements? - 🚀 **Enterprise-R...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~9-~9: Use correct spacing
Context: ...y built with Stencil_ --- ## Why Lime Elements? - 🚀 Enterprise-Ready - Battle-tested...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~11-~11: There might be a mistake here.
Context: ...# Why Lime Elements? - 🚀 Enterprise-Ready - Battle-tested components used in product...
(QB_NEW_EN_OTHER)
[grammar] ~12-~12: There might be a mistake here.
Context: ...n production applications - 🎨 Design System - Consistent UX/UI design with comprehens...
(QB_NEW_EN_OTHER)
[typographical] ~12-~12: To join two clauses or set off examples, consider using an em dash.
Context: ...n applications - 🎨 Design System - Consistent UX/UI design with comprehensive usage g...
(QB_NEW_EN_DASH_RULE_EM)
[grammar] ~13-~13: There might be a mistake here.
Context: ...omprehensive usage guidelines - ⚡ Web Standards - Built with Stencil, works with any fram...
(QB_NEW_EN_OTHER)
[typographical] ~13-~13: To join two clauses or set off examples, consider using an em dash.
Context: ...sage guidelines - ⚡ Web Standards - Built with Stencil, works with any framework ...
(QB_NEW_EN_DASH_RULE_EM)
[grammar] ~14-~14: There might be a problem here.
Context: ...ith Stencil, works with any framework - 👾 TypeScript - Full type safety and excellent developer...
(QB_NEW_EN_MERGED_MATCH)
[grammar] ~15-~15: There might be a problem here.
Context: ...ty and excellent developer experience - ♿ Accessible - Built with accessibility in mind - ⚙️ **...
(QB_NEW_EN_MERGED_MATCH)
[grammar] ~16-~16: There might be a mistake here.
Context: ...Built with accessibility in mind - ⚙️ Customizable - Extensive styling options --- Spo...
(QB_NEW_EN_OTHER)
[grammar] ~16-~16: Use correct spacing
Context: ...⚙️ Customizable - Extensive styling options --- Sponsored by <img src="https://www.lime...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~20-~20: Use correct spacing
Context: ...alable, and accessible web applications faster. Whether you're building from scratch or...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~22-~22: Use correct spacing
Context: ...experiences that work across all modern frameworks. Visit our [📚 Documentation](https:...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~24-~24: Use correct spacing
Context: ... examples, or install directly from 📦 NPM. ### Project Status [
[grammar] ~26-~26: There might be a problem here.
Context: .../@limetech/lime-elements). ### Project Status 
(QB_NEW_EN_MERGED_MATCH)
[grammar] ~30-~30: There might be a problem here.
Context: ...@limetech/lime-elements) ### Quality & Reliability 
[
[grammar] ~32-~32: Use correct spacing
Context: ...a.com/result?p=@limetech/lime-elements) 
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~34-~34: There might be a problem here.
Context: ...alogik/lime-elements) ### Technology & Standards 
(QB_NEW_EN_MERGED_MATCH)
[grammar] ~38-~38: There might be a problem here.
Context: ...g/licenses/Apache-2.0) ### Community & Activity 
(QB_NEW_EN_MERGED_MATCH)
[grammar] ~40-~40: Use correct spacing
Context: ...ub.com/Lundalogik/lime-elements/issues) 
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~44-~44: Use correct spacing
Context: .../graphs/commit-activity) --- ## Quick Start bash # Install the package npm install @limetech/lime-elements # Import and use in your project import '@limetech/lime-elements/dist/lime-elements/lime-elements.esm.js'; html <!-- Use components in your HTML --> <limel-input-field label="Name" placeholder="Enter your full name" ></limel-input-field> <limel-button primary="true" label="Submit"></limel-button> **[Try it live in our playground](https://...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~63-~63: There might be a mistake here.
Context: ...imel-button> ``` Try it live in our playground --- ## Getting Started - To install, run `npm...
(QB_NEW_EN_OTHER)
[grammar] ~67-~67: Use correct spacing
Context: .../versions/latest/#/)** --- ## Getting Started - To install, run `npm install @limetech/...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~69-~69: There might be a problem here.
Context: ... ## Getting Started - To install, run npm install @limetech/lime-elements. ### Requirements #### 1. Font To achieve a blazing fast rend...
(QB_NEW_EN_MERGED_MATCH)
[grammar] ~97-~97: Use correct spacing
Context: ...displayed as a leading icon on an input field. If you're using Lime Elements in a non-...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~99-~99: Use correct spacing
Context: ...ssets with our package due to licensing restrictions. Providing your own icons is crucial as ...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~101-~101: There might be a mistake here.
Context: ...trictions. Providing your own icons is crucial as many of our components use an Icon...
(QB_NEW_EN_OTHER)
[grammar] ~101-~101: Use correct spacing
Context: ...ou can use this to display an icon on a button. ##### How to Set Up Your Icons Folder - **Fo...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~103-~103: Use correct spacing
Context: ...button. ##### How to Set Up Your Icons Folder - For Lime products: To use `@lu...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~105-~105: Use correct spacing
Context: ...et Up Your Icons Folder - For Lime products: To use @lundalogik/lime-icons8, the `...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~107-~107: Use hyphens correctly
Context: ...e-icons8` must be made available on the web-server. - For non-Lime products: To...
(QB_NEW_EN_OTHER_ERROR_IDS_29)
[grammar] ~109-~109: Use correct spacing
Context: ... on the web-server. - For non-Lime products: To use a different icon set, the icons ...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~141-~141: Use correct spacing
Context: ...d without warning. --- ## Community & Support - 💬 Questions? [create an issue](htt...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~146-~146: Use correct spacing
Context: ...ents/blob/main/CHANGELOG.md) for latest updates --- ## Contributing We welcome contributions f...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~152-~152: Use correct spacing
Context: ... from the community! Here's how you can help: - 🔍 Found an issue? Feel free to fix...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~154-~154: There might be a mistake here.
Context: ...sue?** Feel free to fix it and submit a PR - 📝 Improve docs? Documentation im...
(QB_NEW_EN_OTHER)
[grammar] ~155-~155: There might be a mistake here.
Context: ...* Documentation improvements are always appreciated - 🎨 Design feedback? Share your UX...
(QB_NEW_EN_OTHER)
[grammar] ~156-~156: There might be a mistake here.
Context: ...- 🎨 Design feedback? Share your UX insights - 🧪 Testing? Help us test new feat...
(QB_NEW_EN_OTHER)
[grammar] ~157-~157: There might be a mistake here.
Context: ...** Help us test new features and report bugs Quick setup: ```bash git clone https...
(QB_NEW_EN_OTHER)
[grammar] ~159-~159: Use correct spacing
Context: ...t new features and report bugs Quick setup: bash git clone https://github.com/Lundalogik/lime-elements.git cd lime-elements npm install npm start # Starts local development server 📋 **[Read our full contributing guidel...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~168-~168: Use correct spacing
Context: ...r ``` 📋 Read our full contributing guidelines --- ## 📄 License Lime Elements is open sourc...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~172-~172: Use correct spacing
Context: ...lob/main/CONTRIBUTING.md)** --- ## 📄 License Lime Elements is open source software l...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~174-~174: Use hyphens correctly
Context: ...* --- ## 📄 License Lime Elements is open source software licensed under the [Apac...
(QB_NEW_EN_OTHER_ERROR_IDS_29)
[grammar] ~174-~174: Use correct spacing
Context: ...software licensed under the Apache 2.0 License. ---
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~180-~180: There might be a problem here.
Context: ...r"> Built with ❤️ by your friends at Lime Technologies _Empowering developers to create amazing...
(QB_NEW_EN_MERGED_MATCH)
[style] ~182-~182: Consider using a more formal and expressive alternative to ‘amazing’.
Context: ...m/)** Empowering developers to create amazing user experiences [⭐ Star us on GitHub...
(AWESOME)
[grammar] ~182-~182: Use correct spacing
Context: ...ering developers to create amazing user experiences_ [⭐ Star us on GitHub](https://github.com...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~184-~184: Use correct spacing
Context: ...dalogik.github.io/lime-elements/) • 📦 NPM
(QB_NEW_EN_OTHER_ERROR_IDS_5)
🪛 markdownlint-cli2 (0.17.2)
README.md
1-1: Inline HTML
Element: img
(MD033, no-inline-html)
3-3: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
5-5: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
20-20: Inline HTML
Element: img
(MD033, no-inline-html)
178-178: Inline HTML
Element: div
(MD033, no-inline-html)
182-182: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Docs / Publish Docs
- GitHub Check: Test
- GitHub Check: Build
🔇 Additional comments (1)
README.md (1)
123-125:<limel-config>example mixes JSX with plain HTML
config={{iconPath: '/my/parent/path/'}}is JSX syntax and will not parse in a markup file. For an HTML snippet, encode the JSON and quote it, e.g.<limel-config config='{"iconPath":"/my/parent/path/"}'></limel-config>(or show the JSX version explicitly inside a TSX block).
This comment was marked as resolved.
This comment was marked as resolved.
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
docs-index.html(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3581
File: src/components/chip-set/chip-set.tsx:626-626
Timestamp: 2025-07-02T12:49:21.522Z
Learning: When contributors add new props to existing components in the lime-elements repository, they should always add documentation examples that demonstrate the new prop's usage and explain how it works. This helps with user adoption, feature discoverability, and maintains comprehensive documentation.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:1-3
Timestamp: 2025-04-25T14:23:56.018Z
Learning: In the lime-elements repository, CSS custom properties prefixed with `--lime-` are considered internal implementation details and should not be documented in JSDoc comments, while other custom properties should be documented as they are part of the public API.
docs-index.html (10)
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-16T14:14:18.253Z
Learning: For lime-elements, example files should be self-contained and avoid importing internal implementation details. Example files should only import public exports from '@limetech/lime-elements' or use relative imports for other files within the examples folder. Duplicating simple type definitions in example files is preferred over importing internal types.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/view.scss:14-17
Timestamp: 2025-03-11T13:31:46.958Z
Learning: Lime Elements generally does not support unreasonably old browsers, so modern CSS properties like `scale` that have good support in current browsers are preferred over older alternatives.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:1-3
Timestamp: 2025-04-25T14:23:56.018Z
Learning: In the lime-elements repository, CSS custom properties prefixed with `--lime-` are considered internal implementation details and should not be documented in JSDoc comments, while other custom properties should be documented as they are part of the public API.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/inserter.ts:1-11
Timestamp: 2025-03-04T14:27:29.714Z
Learning: In example components (typically found in `src/components/*/examples/`), imports of lime-elements exports should use `@limetech/lime-elements` instead of relative paths. This is because example components aren't included in type declarations and are used in documentation to show developers how to properly use lime-elements components.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3581
File: src/components/chip-set/chip-set.tsx:626-626
Timestamp: 2025-07-02T12:49:21.522Z
Learning: When contributors add new props to existing components in the lime-elements repository, they should always add documentation examples that demonstrate the new prop's usage and explain how it works. This helps with user adoption, feature discoverability, and maintains comprehensive documentation.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-17T09:39:36.254Z
Learning: For lime-elements, example files should import types from the public API using '@limetech/lime-elements' rather than defining duplicate types locally. This includes types like `EditorUiType` which are part of the component's public API.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/notched-outline/examples/notched-outline-basic.scss:11-22
Timestamp: 2025-04-14T10:01:18.721Z
Learning: Examples in Lime Elements use Shadow DOM (with `shadow: true` in the component decorator) for style encapsulation, making additional class-based selectors unnecessary. This ensures styles are automatically scoped to each component without leaking to the rest of the application.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/inserter.ts:1-11
Timestamp: 2025-03-04T13:48:44.712Z
Learning: The lime-elements codebase must use relative imports (even with multiple "../") rather than alias imports or re-exports because they export types to `<repo-root>/dist/types`. Using non-relative imports breaks type generation as import paths from generated type files point to full .ts files rather than .d.ts files.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-16T14:14:18.253Z
Learning: For lime-elements, example files should be self-contained and avoid importing internal implementation details. This includes not importing types from internal files like '../types.ts', especially those marked with @beta. Duplicating simple type definitions in example files is preferred over importing internal types that may change.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3579
File: src/components/collapsible-section/collapsible-section.tsx:199-203
Timestamp: 2025-06-10T12:19:51.990Z
Learning: In Lime Elements codebase, components consistently use randomly generated IDs (via `createRandomString()`) for HTML elements even within shadow DOM, despite shadow DOM providing ID isolation. This pattern is maintained for consistency, accessibility robustness, future-proofing, and better development experience.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Docs / Publish Docs
- GitHub Check: Test
- GitHub Check: Build
- GitHub Check: Lint
- GitHub Check: SonarCloud
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (3)
docs-index.html (3)
90-92: Avoid render-blocking by addingdeferto theversions.jsscript
Same observation as in the previous review: this synchronous script blocks HTML parsing. Adddefer(or move the tag to the end of<body>) to improve perceived load performance.- <script src="versions.js"></script> + <script src="versions.js" defer></script>
107-122: Version-sorting logic is still brittle & ignores full semver rules
The hand-rolled comparator breaks on pre-release tags (-alpha,-rc.0) and multi-digit patch numbers (10vs9). Replace it withIntl.Collator(numeric option) or a light semver parser to future-proof the list.
93-103: Add semantic landmarks (<main>,<nav>) for accessibility
Wrapping the main content in<main>and the version list in a labelled<nav>greatly improves keyboard navigation and screen-reader semantics while leaving the visual layout untouched.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
docs-index.html(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3581
File: src/components/chip-set/chip-set.tsx:626-626
Timestamp: 2025-07-02T12:49:21.522Z
Learning: When contributors add new props to existing components in the lime-elements repository, they should always add documentation examples that demonstrate the new prop's usage and explain how it works. This helps with user adoption, feature discoverability, and maintains comprehensive documentation.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:1-3
Timestamp: 2025-04-25T14:23:56.018Z
Learning: In the lime-elements repository, CSS custom properties prefixed with `--lime-` are considered internal implementation details and should not be documented in JSDoc comments, while other custom properties should be documented as they are part of the public API.
docs-index.html (14)
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-17T09:39:36.254Z
Learning: For lime-elements, example files should import types from the public API using '@limetech/lime-elements' rather than defining duplicate types locally. This includes types like `EditorUiType` which are part of the component's public API.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:1-3
Timestamp: 2025-04-25T14:23:56.018Z
Learning: In the lime-elements repository, CSS custom properties prefixed with `--lime-` are considered internal implementation details and should not be documented in JSDoc comments, while other custom properties should be documented as they are part of the public API.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3588
File: src/components/collapsible-section/collapsible-section.tsx:260-270
Timestamp: 2025-06-24T14:04:52.699Z
Learning: When handling missing content in aria-labels for collapsible/expandable UI components, provide a meaningful fallback rather than omitting the aria-label entirely. Screen reader users benefit from understanding the button's core functionality ("Open section" / "Close section") even when specific content identifiers are missing, as this helps them navigate imperfect interfaces.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-16T14:14:18.253Z
Learning: For lime-elements, example files should be self-contained and avoid importing internal implementation details. Example files should only import public exports from '@limetech/lime-elements' or use relative imports for other files within the examples folder. Duplicating simple type definitions in example files is preferred over importing internal types.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3581
File: src/components/chip-set/chip-set.tsx:626-626
Timestamp: 2025-07-02T12:49:21.522Z
Learning: When contributors add new props to existing components in the lime-elements repository, they should always add documentation examples that demonstrate the new prop's usage and explain how it works. This helps with user adoption, feature discoverability, and maintains comprehensive documentation.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3579
File: src/components/collapsible-section/collapsible-section.tsx:199-203
Timestamp: 2025-06-10T12:19:51.990Z
Learning: In Lime Elements codebase, components consistently use randomly generated IDs (via `createRandomString()`) for HTML elements even within shadow DOM, despite shadow DOM providing ID isolation. This pattern is maintained for consistency, accessibility robustness, future-proofing, and better development experience.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/chip-set/chip-set.tsx:367-385
Timestamp: 2025-04-14T12:22:22.298Z
Learning: In limel-chip-set, the onClick handler should be placed on the content div (<div slot="content">) rather than on the limel-notched-outline component, and should only be applied when type is 'input'.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-16T14:14:18.253Z
Learning: For lime-elements, example files should be self-contained and avoid importing internal implementation details. This includes not importing types from internal files like '../types.ts', especially those marked with @beta. Duplicating simple type definitions in example files is preferred over importing internal types that may change.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/inserter.ts:1-11
Timestamp: 2025-03-04T14:27:29.714Z
Learning: In example components (typically found in `src/components/*/examples/`), imports of lime-elements exports should use `@limetech/lime-elements` instead of relative paths. This is because example components aren't included in type declarations and are used in documentation to show developers how to properly use lime-elements components.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.tsx:30-38
Timestamp: 2025-04-25T13:32:56.396Z
Learning: For StencilJS components in lime-elements, prefer using the `<Host>` element to wrap child elements in the render method instead of returning an array of elements, which eliminates the need for key attributes and follows StencilJS best practices.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.tsx:30-38
Timestamp: 2025-04-25T13:32:56.396Z
Learning: For StencilJS components in lime-elements, prefer using the `<Host>` element to wrap child elements in the render method instead of returning an array of elements. This follows the standard pattern in the codebase and eliminates the need for key attributes.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/notched-outline/examples/notched-outline-basic.scss:11-22
Timestamp: 2025-04-14T10:01:18.721Z
Learning: Examples in Lime Elements use Shadow DOM (with `shadow: true` in the component decorator) for style encapsulation, making additional class-based selectors unnecessary. This ensures styles are automatically scoped to each component without leaking to the rest of the application.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/view.scss:14-17
Timestamp: 2025-03-11T13:31:46.958Z
Learning: Lime Elements generally does not support unreasonably old browsers, so modern CSS properties like `scale` that have good support in current browsers are preferred over older alternatives.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/inserter.ts:1-11
Timestamp: 2025-03-04T13:48:44.712Z
Learning: The lime-elements codebase must use relative imports (even with multiple "../") rather than alias imports or re-exports because they export types to `<repo-root>/dist/types`. Using non-relative imports breaks type generation as import paths from generated type files point to full .ts files rather than .d.ts files.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Docs / Publish Docs
- GitHub Check: Test
- GitHub Check: Lint
- GitHub Check: Build
- GitHub Check: SonarCloud
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (3)
docs-index.html (3)
90-95: Still loadingversions.jssynchronously – adddefer
Same nitpick as the previous review: the synchronous<script>blocks HTML parsing.- <script src="versions.js"></script> + <script src="versions.js" defer></script>
64-70: Favicon SVG path will 404 on GitHub Pages
src/favicon.svgassumes asrc/folder is published. Move the asset next
todocs-index.htmlor fix the path; same for the external PNG that adds an
extra DNS/CORS hit.- <link rel="icon" type="image/svg+xml" href="src/favicon.svg" /> + <link rel="icon" type="image/svg+xml" href="favicon.svg" />…and host the PNG locally.
218-240: Version sorting still breaks on pre-releases & multi-digit patches
parseInt+ manual compare ignores full SemVer rules (1.0.0-rc.0,10.2.11vs10.2.3, etc.).
You already load JS; a lightweight fix keeps the file self-contained:- window.versions.sort(function (a, b) { - // Simple semantic version comparison - const parseVersion = (v) => { - const parts = v.split('.'); - return { - major: parseInt(parts[0]) || 0, - minor: parseInt(parts[1]) || 0, - patch: parseInt(parts[2]) || 0, - full: v, - }; - }; - const vA = parseVersion(a); - const vB = parseVersion(b); - - if (vA.major !== vB.major) return vB.major - vA.major; - if (vA.minor !== vB.minor) return vB.minor - vA.minor; - if (vA.patch !== vB.patch) return vB.patch - vA.patch; - - return b.localeCompare(a); - }); + const collator = new Intl.Collator(undefined, { + numeric: true, + sensitivity: 'base', + }); + window.versions.sort((a, b) => collator.compare(b, a));Keeps <1 kB, handles pre-releases, and doesn’t require an external library.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
docs-index.css(1 hunks)docs-index.html(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3581
File: src/components/chip-set/chip-set.tsx:626-626
Timestamp: 2025-07-02T12:49:21.522Z
Learning: When contributors add new props to existing components in the lime-elements repository, they should always add documentation examples that demonstrate the new prop's usage and explain how it works. This helps with user adoption, feature discoverability, and maintains comprehensive documentation.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:1-3
Timestamp: 2025-04-25T14:23:56.018Z
Learning: In the lime-elements repository, CSS custom properties prefixed with `--lime-` are considered internal implementation details and should not be documented in JSDoc comments, while other custom properties should be documented as they are part of the public API.
docs-index.html (13)
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-17T09:39:36.254Z
Learning: For lime-elements, example files should import types from the public API using '@limetech/lime-elements' rather than defining duplicate types locally. This includes types like `EditorUiType` which are part of the component's public API.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:1-3
Timestamp: 2025-04-25T14:23:56.018Z
Learning: In the lime-elements repository, CSS custom properties prefixed with `--lime-` are considered internal implementation details and should not be documented in JSDoc comments, while other custom properties should be documented as they are part of the public API.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3588
File: src/components/collapsible-section/collapsible-section.tsx:260-270
Timestamp: 2025-06-24T14:04:52.699Z
Learning: When handling missing content in aria-labels for collapsible/expandable UI components, provide a meaningful fallback rather than omitting the aria-label entirely. Screen reader users benefit from understanding the button's core functionality ("Open section" / "Close section") even when specific content identifiers are missing, as this helps them navigate imperfect interfaces.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-16T14:14:18.253Z
Learning: For lime-elements, example files should be self-contained and avoid importing internal implementation details. Example files should only import public exports from '@limetech/lime-elements' or use relative imports for other files within the examples folder. Duplicating simple type definitions in example files is preferred over importing internal types.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3581
File: src/components/chip-set/chip-set.tsx:626-626
Timestamp: 2025-07-02T12:49:21.522Z
Learning: When contributors add new props to existing components in the lime-elements repository, they should always add documentation examples that demonstrate the new prop's usage and explain how it works. This helps with user adoption, feature discoverability, and maintains comprehensive documentation.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3579
File: src/components/collapsible-section/collapsible-section.tsx:199-203
Timestamp: 2025-06-10T12:19:51.990Z
Learning: In Lime Elements codebase, components consistently use randomly generated IDs (via `createRandomString()`) for HTML elements even within shadow DOM, despite shadow DOM providing ID isolation. This pattern is maintained for consistency, accessibility robustness, future-proofing, and better development experience.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/chip-set/chip-set.tsx:367-385
Timestamp: 2025-04-14T12:22:22.298Z
Learning: In limel-chip-set, the onClick handler should be placed on the content div (<div slot="content">) rather than on the limel-notched-outline component, and should only be applied when type is 'input'.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-16T14:14:18.253Z
Learning: For lime-elements, example files should be self-contained and avoid importing internal implementation details. This includes not importing types from internal files like '../types.ts', especially those marked with @beta. Duplicating simple type definitions in example files is preferred over importing internal types that may change.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/inserter.ts:1-11
Timestamp: 2025-03-04T14:27:29.714Z
Learning: In example components (typically found in `src/components/*/examples/`), imports of lime-elements exports should use `@limetech/lime-elements` instead of relative paths. This is because example components aren't included in type declarations and are used in documentation to show developers how to properly use lime-elements components.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/view.scss:14-17
Timestamp: 2025-03-11T13:31:46.958Z
Learning: Lime Elements generally does not support unreasonably old browsers, so modern CSS properties like `scale` that have good support in current browsers are preferred over older alternatives.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/notched-outline/examples/notched-outline-basic.scss:11-22
Timestamp: 2025-04-14T10:01:18.721Z
Learning: Examples in Lime Elements use Shadow DOM (with `shadow: true` in the component decorator) for style encapsulation, making additional class-based selectors unnecessary. This ensures styles are automatically scoped to each component without leaking to the rest of the application.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.tsx:30-38
Timestamp: 2025-04-25T13:32:56.396Z
Learning: For StencilJS components in lime-elements, prefer using the `<Host>` element to wrap child elements in the render method instead of returning an array of elements. This follows the standard pattern in the codebase and eliminates the need for key attributes.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.tsx:30-38
Timestamp: 2025-04-25T13:32:56.396Z
Learning: For StencilJS components in lime-elements, prefer using the `<Host>` element to wrap child elements in the render method instead of returning an array of elements, which eliminates the need for key attributes and follows StencilJS best practices.
docs-index.css (8)
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:1-3
Timestamp: 2025-04-25T14:23:56.018Z
Learning: In the lime-elements repository, CSS custom properties prefixed with `--lime-` are considered internal implementation details and should not be documented in JSDoc comments, while other custom properties should be documented as they are part of the public API.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:24-28
Timestamp: 2025-04-25T14:22:02.157Z
Learning: In lime-elements, CSS custom properties follow a specific naming convention:
1. Internal use variables (not for consumers) are prefixed with `--limel-component-name-`
2. External use variables (intended for consumers) are prefixed with `--component-name-`
Variables documented with JSDoc comments are typically meant for external use.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-16T14:14:18.253Z
Learning: For lime-elements, example files should be self-contained and avoid importing internal implementation details. Example files should only import public exports from '@limetech/lime-elements' or use relative imports for other files within the examples folder. Duplicating simple type definitions in example files is preferred over importing internal types.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/notched-outline/examples/notched-outline-basic.scss:11-22
Timestamp: 2025-04-14T10:01:18.721Z
Learning: Examples in Lime Elements use Shadow DOM (with `shadow: true` in the component decorator) for style encapsulation, making additional class-based selectors unnecessary. This ensures styles are automatically scoped to each component without leaking to the rest of the application.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3529
File: src/components/ai-avatar/ai-avatar.scss:20-22
Timestamp: 2025-04-29T14:15:32.104Z
Learning: In components using Shadow DOM (like those in lime-elements), the universal selector `*` is already scoped to the component's shadow tree and won't cause unwanted side effects outside the component. There's no functional difference between `*` and `:host *` in this context.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/view.scss:14-17
Timestamp: 2025-03-11T13:31:46.958Z
Learning: Lime Elements generally does not support unreasonably old browsers, so modern CSS properties like `scale` that have good support in current browsers are preferred over older alternatives.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-17T09:39:36.254Z
Learning: For lime-elements, example files should import types from the public API using '@limetech/lime-elements' rather than defining duplicate types locally. This includes types like `EditorUiType` which are part of the component's public API.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:96-122
Timestamp: 2025-04-25T14:18:07.755Z
Learning: In Lime Elements components that use Shadow DOM (with `shadow: true` in the component decorator), keyframe animation names don't need to be namespaced as they are automatically scoped to the component and won't collide with animations from other components.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Docs / Publish Docs
- GitHub Check: Test
- GitHub Check: Build
adrianschmidt
force-pushed
the
improve-docs
branch
from
ef2006f to
e669d8b
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (4)
docs-index.css (1)
119-131: Focus outline removed without replacement – still violates WCAG 2.1 (2.4.7)
a:focus { outline: none; }erases the only keyboard-visible focus cue for plain links. Unless every anchor receives an alternative focus style (they don’t), this is an accessibility regression already flagged previously.
Please either drop the rule or add a visible replacement (e.g. a 2 px outline/border).docs-index.html (2)
64-74:src/favicon.svglikely 404s on GitHub PagesThe page is served from the repo root, not
/src. Unlesssrc/is published alongside the page the SVG will fail to load, causing an extra request for the PNG fallback.-<link rel="icon" type="image/svg+xml" href="src/favicon.svg" /> +<link rel="icon" type="image/svg+xml" href="favicon.svg" />
220-240: Version-sorting still breaks on pre-releases & multi-digit patchesThe new numeric parser (
parseInt(parts[2])) treats38.13.2-dev.1aspatch = 0and cannot differentiate10vs9. The earlier review already suggested usingIntl.Collatoror a lightweight semver parser for reliable ordering.README.md (1)
46-55: Example still couples consumers to internal bundle pathUsing
dist/lime-elements/lime-elements.esm.jsties users to our private build layout and skips the tree-shakable loader.-<script type="module" src="https://cdn.jsdelivr.net/npm/@limetech/lime-elements@latest/dist/lime-elements/lime-elements.esm.js"></script> +<script type="module" src="https://cdn.jsdelivr.net/npm/@limetech/lime-elements@latest/loader/index.esm.js"></script> +<!-- or, for vanilla projects --> +import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@limetech/lime-elements@latest/loader/index.esm.js'; +defineCustomElements();This follows Stencil’s recommended pattern and survives future packaging changes.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
README.md(3 hunks)docs-index.css(1 hunks)docs-index.html(1 hunks)
🧰 Additional context used
🧠 Learnings (4)
📓 Common learnings
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3581
File: src/components/chip-set/chip-set.tsx:626-626
Timestamp: 2025-07-02T12:49:21.522Z
Learning: When contributors add new props to existing components in the lime-elements repository, they should always add documentation examples that demonstrate the new prop's usage and explain how it works. This helps with user adoption, feature discoverability, and maintains comprehensive documentation.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:1-3
Timestamp: 2025-04-25T14:23:56.018Z
Learning: In the lime-elements repository, CSS custom properties prefixed with `--lime-` are considered internal implementation details and should not be documented in JSDoc comments, while other custom properties should be documented as they are part of the public API.
docs-index.css (10)
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:1-3
Timestamp: 2025-04-25T14:23:56.018Z
Learning: In the lime-elements repository, CSS custom properties prefixed with `--lime-` are considered internal implementation details and should not be documented in JSDoc comments, while other custom properties should be documented as they are part of the public API.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3588
File: src/components/collapsible-section/collapsible-section.tsx:260-270
Timestamp: 2025-06-24T14:04:52.699Z
Learning: When handling missing content in aria-labels for collapsible/expandable UI components, provide a meaningful fallback rather than omitting the aria-label entirely. Screen reader users benefit from understanding the button's core functionality ("Open section" / "Close section") even when specific content identifiers are missing, as this helps them navigate imperfect interfaces.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/chip-set/chip-set.tsx:367-385
Timestamp: 2025-04-14T12:22:22.298Z
Learning: In limel-chip-set, the onClick handler should be placed on the content div (<div slot="content">) rather than on the limel-notched-outline component, and should only be applied when type is 'input'.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:24-28
Timestamp: 2025-04-25T14:22:02.157Z
Learning: In lime-elements, CSS custom properties follow a specific naming convention:
1. Internal use variables (not for consumers) are prefixed with `--limel-component-name-`
2. External use variables (intended for consumers) are prefixed with `--component-name-`
Variables documented with JSDoc comments are typically meant for external use.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-16T14:14:18.253Z
Learning: For lime-elements, example files should be self-contained and avoid importing internal implementation details. Example files should only import public exports from '@limetech/lime-elements' or use relative imports for other files within the examples folder. Duplicating simple type definitions in example files is preferred over importing internal types.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/notched-outline/examples/notched-outline-basic.scss:11-22
Timestamp: 2025-04-14T10:01:18.721Z
Learning: Examples in Lime Elements use Shadow DOM (with `shadow: true` in the component decorator) for style encapsulation, making additional class-based selectors unnecessary. This ensures styles are automatically scoped to each component without leaking to the rest of the application.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3529
File: src/components/ai-avatar/ai-avatar.scss:20-22
Timestamp: 2025-04-29T14:15:32.104Z
Learning: In components using Shadow DOM (like those in lime-elements), the universal selector `*` is already scoped to the component's shadow tree and won't cause unwanted side effects outside the component. There's no functional difference between `*` and `:host *` in this context.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/view.scss:14-17
Timestamp: 2025-03-11T13:31:46.958Z
Learning: Lime Elements generally does not support unreasonably old browsers, so modern CSS properties like `scale` that have good support in current browsers are preferred over older alternatives.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-17T09:39:36.254Z
Learning: For lime-elements, example files should import types from the public API using '@limetech/lime-elements' rather than defining duplicate types locally. This includes types like `EditorUiType` which are part of the component's public API.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:96-122
Timestamp: 2025-04-25T14:18:07.755Z
Learning: In Lime Elements components that use Shadow DOM (with `shadow: true` in the component decorator), keyframe animation names don't need to be namespaced as they are automatically scoped to the component and won't collide with animations from other components.
README.md (14)
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3581
File: src/components/chip-set/chip-set.tsx:626-626
Timestamp: 2025-07-02T12:49:21.522Z
Learning: When contributors add new props to existing components in the lime-elements repository, they should always add documentation examples that demonstrate the new prop's usage and explain how it works. This helps with user adoption, feature discoverability, and maintains comprehensive documentation.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-16T14:14:18.253Z
Learning: For lime-elements, example files should be self-contained and avoid importing internal implementation details. Example files should only import public exports from '@limetech/lime-elements' or use relative imports for other files within the examples folder. Duplicating simple type definitions in example files is preferred over importing internal types.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-17T09:39:36.254Z
Learning: For lime-elements, example files should import types from the public API using '@limetech/lime-elements' rather than defining duplicate types locally. This includes types like `EditorUiType` which are part of the component's public API.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-16T14:14:18.253Z
Learning: For lime-elements, example files should be self-contained and avoid importing internal implementation details. This includes not importing types from internal files like '../types.ts', especially those marked with @beta. Duplicating simple type definitions in example files is preferred over importing internal types that may change.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/inserter.ts:1-11
Timestamp: 2025-03-04T14:27:29.714Z
Learning: In example components (typically found in `src/components/*/examples/`), imports of lime-elements exports should use `@limetech/lime-elements` instead of relative paths. This is because example components aren't included in type declarations and are used in documentation to show developers how to properly use lime-elements components.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:1-3
Timestamp: 2025-04-25T14:23:56.018Z
Learning: In the lime-elements repository, CSS custom properties prefixed with `--lime-` are considered internal implementation details and should not be documented in JSDoc comments, while other custom properties should be documented as they are part of the public API.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/inserter.ts:1-11
Timestamp: 2025-03-04T13:48:44.712Z
Learning: The lime-elements codebase must use relative imports (even with multiple "../") rather than alias imports or re-exports because they export types to `<repo-root>/dist/types`. Using non-relative imports breaks type generation as import paths from generated type files point to full .ts files rather than .d.ts files.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/view.scss:14-17
Timestamp: 2025-03-11T13:31:46.958Z
Learning: Lime Elements generally does not support unreasonably old browsers, so modern CSS properties like `scale` that have good support in current browsers are preferred over older alternatives.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/notched-outline/examples/notched-outline-basic.scss:11-22
Timestamp: 2025-04-14T10:01:18.721Z
Learning: Examples in Lime Elements use Shadow DOM (with `shadow: true` in the component decorator) for style encapsulation, making additional class-based selectors unnecessary. This ensures styles are automatically scoped to each component without leaking to the rest of the application.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:24-28
Timestamp: 2025-04-25T14:22:02.157Z
Learning: In lime-elements, CSS custom properties follow a specific naming convention:
1. Internal use variables (not for consumers) are prefixed with `--limel-component-name-`
2. External use variables (intended for consumers) are prefixed with `--component-name-`
Variables documented with JSDoc comments are typically meant for external use.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.tsx:30-38
Timestamp: 2025-04-25T13:32:56.396Z
Learning: For StencilJS components in lime-elements, prefer using the `<Host>` element to wrap child elements in the render method instead of returning an array of elements. This follows the standard pattern in the codebase and eliminates the need for key attributes.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/chip-set/chip-set.tsx:367-385
Timestamp: 2025-04-14T12:22:22.298Z
Learning: In limel-chip-set, the onClick handler should be placed on the content div (<div slot="content">) rather than on the limel-notched-outline component, and should only be applied when type is 'input'.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.tsx:30-38
Timestamp: 2025-04-25T13:32:56.396Z
Learning: For StencilJS components in lime-elements, prefer using the `<Host>` element to wrap child elements in the render method instead of returning an array of elements, which eliminates the need for key attributes and follows StencilJS best practices.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:96-122
Timestamp: 2025-04-25T14:18:07.755Z
Learning: In Lime Elements components that use Shadow DOM (with `shadow: true` in the component decorator), keyframe animation names don't need to be namespaced as they are automatically scoped to the component and won't collide with animations from other components.
docs-index.html (12)
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-17T09:39:36.254Z
Learning: For lime-elements, example files should import types from the public API using '@limetech/lime-elements' rather than defining duplicate types locally. This includes types like `EditorUiType` which are part of the component's public API.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:1-3
Timestamp: 2025-04-25T14:23:56.018Z
Learning: In the lime-elements repository, CSS custom properties prefixed with `--lime-` are considered internal implementation details and should not be documented in JSDoc comments, while other custom properties should be documented as they are part of the public API.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3588
File: src/components/collapsible-section/collapsible-section.tsx:260-270
Timestamp: 2025-06-24T14:04:52.699Z
Learning: When handling missing content in aria-labels for collapsible/expandable UI components, provide a meaningful fallback rather than omitting the aria-label entirely. Screen reader users benefit from understanding the button's core functionality ("Open section" / "Close section") even when specific content identifiers are missing, as this helps them navigate imperfect interfaces.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-16T14:14:18.253Z
Learning: For lime-elements, example files should be self-contained and avoid importing internal implementation details. Example files should only import public exports from '@limetech/lime-elements' or use relative imports for other files within the examples folder. Duplicating simple type definitions in example files is preferred over importing internal types.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3581
File: src/components/chip-set/chip-set.tsx:626-626
Timestamp: 2025-07-02T12:49:21.522Z
Learning: When contributors add new props to existing components in the lime-elements repository, they should always add documentation examples that demonstrate the new prop's usage and explain how it works. This helps with user adoption, feature discoverability, and maintains comprehensive documentation.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3579
File: src/components/collapsible-section/collapsible-section.tsx:199-203
Timestamp: 2025-06-10T12:19:51.990Z
Learning: In Lime Elements codebase, components consistently use randomly generated IDs (via `createRandomString()`) for HTML elements even within shadow DOM, despite shadow DOM providing ID isolation. This pattern is maintained for consistency, accessibility robustness, future-proofing, and better development experience.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/chip-set/chip-set.tsx:367-385
Timestamp: 2025-04-14T12:22:22.298Z
Learning: In limel-chip-set, the onClick handler should be placed on the content div (<div slot="content">) rather than on the limel-notched-outline component, and should only be applied when type is 'input'.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-16T14:14:18.253Z
Learning: For lime-elements, example files should be self-contained and avoid importing internal implementation details. This includes not importing types from internal files like '../types.ts', especially those marked with @beta. Duplicating simple type definitions in example files is preferred over importing internal types that may change.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/inserter.ts:1-11
Timestamp: 2025-03-04T14:27:29.714Z
Learning: In example components (typically found in `src/components/*/examples/`), imports of lime-elements exports should use `@limetech/lime-elements` instead of relative paths. This is because example components aren't included in type declarations and are used in documentation to show developers how to properly use lime-elements components.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/view.scss:14-17
Timestamp: 2025-03-11T13:31:46.958Z
Learning: Lime Elements generally does not support unreasonably old browsers, so modern CSS properties like `scale` that have good support in current browsers are preferred over older alternatives.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/notched-outline/examples/notched-outline-basic.scss:11-22
Timestamp: 2025-04-14T10:01:18.721Z
Learning: Examples in Lime Elements use Shadow DOM (with `shadow: true` in the component decorator) for style encapsulation, making additional class-based selectors unnecessary. This ensures styles are automatically scoped to each component without leaking to the rest of the application.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.tsx:30-38
Timestamp: 2025-04-25T13:32:56.396Z
Learning: For StencilJS components in lime-elements, prefer using the `<Host>` element to wrap child elements in the render method instead of returning an array of elements. This follows the standard pattern in the codebase and eliminates the need for key attributes.
🪛 LanguageTool
README.md
[grammar] ~1-~1: Use correct spacing
Context: ... 2.5rem; vertical-align: middle;"> Lime Elements **Modern Web Components for Enterprise App...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~3-~3: Use correct spacing
Context: ... Modern Web Components for Enterprise Applications _A comprehensive design system and compon...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~5-~5: Use correct spacing
Context: ...system and component library built with Stencil_ --- ## Why Lime Elements? - 🚀 **Enterprise-Re...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~9-~9: Use correct spacing
Context: ...y built with Stencil_ --- ## Why Lime Elements? - 🚀 Enterprise-Ready - Battle-tested ...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~16-~16: Use correct spacing
Context: ...⚙️ Customizable - Extensive styling options --- Sponsored by <img src="https://www.lime-...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~20-~20: Use correct spacing
Context: ...alable, and accessible web applications faster. Whether you're building from scratch or ...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~22-~22: Use correct spacing
Context: ...experiences that work across all modern frameworks. Visit our [📚 Documentation](https:/...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~24-~24: Use correct spacing
Context: ... examples, or install directly from 📦 NPM. ### Project Status [
[grammar] ~26-~26: There might be a problem here.
Context: .../@limetech/lime-elements). ### Project Status 
(QB_NEW_EN_MERGED_MATCH)
[grammar] ~30-~30: Use correct spacing
Context: ...@limetech/lime-elements) ### Quality & Reliability 
[
[grammar] ~32-~32: Use correct spacing
Context: ...a.com/result?p=@limetech/lime-elements)
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~34-~34: Use correct spacing
Context: ...alogik/lime-elements) ### Technology & Standards
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~36-~36: There might be a mistake here.
Context: ...iLz4KPC9zdmc+)](https://stenciljs.com/)
(QB_NEW_EN_OTHER)
[grammar] ~38-~38: Use correct spacing
Context: ...g/licenses/Apache-2.0) ### Community & Activity
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~40-~40: Use correct spacing
Context: ...ub.com/Lundalogik/lime-elements/issues)
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~44-~44: Use correct spacing
Context: .../graphs/commit-activity) --- ## Quick Start html <!-- Load the package --> <script type="module" src="https://cdn.jsdelivr.net/npm/@limetech/lime-elements@latest/dist/lime-elements/lime-elements.esm.js"></script> <!-- Use components in your HTML --> <limel-input-field label="Name" placeholder="Enter your full name" ></limel-input-field> <limel-button primary label="Submit"></limel-button> **[Try it live in our playground](https://l...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~58-~58: There might be a mistake here.
Context: ...imel-button> ``` Try it live in our playground --- ## Getting Started - To install, run `npm ...
(QB_NEW_EN_OTHER)
[grammar] ~62-~62: Use correct spacing
Context: .../versions/latest/#/)** --- ## Getting Started - To install, run `npm install @limetech/l...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~64-~64: Use correct spacing
Context: ... ## Getting Started - To install, run npm install @limetech/lime-elements. ### Requirements #### 1. Font To achieve a...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~92-~92: Use correct spacing
Context: ...displayed as a leading icon on an input field. If you're using Lime Elements in a non-L...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~94-~94: Use correct spacing
Context: ...ssets with our package due to licensing restrictions. Providing your own icons is crucial as m...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~96-~96: Use correct spacing
Context: ...ou can use this to display an icon on a button. ##### How to Set Up Your Icons Folder - **For...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~98-~98: Use correct spacing
Context: ...button. ##### How to Set Up Your Icons Folder - For Lime products: To use `@lun...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~100-~100: There might be a mistake here.
Context: ...et Up Your Icons Folder - For Lime products: To use @lundalogik/lime-icons8, the `...
(QB_NEW_EN_OTHER)
[grammar] ~102-~102: There might be a problem here.
Context: ...e-icons8` must be made available on the web-server. - For non-Lime products: To use a...
(QB_NEW_EN_MERGED_MATCH)
[grammar] ~104-~104: There might be a mistake here.
Context: ... on the web-server. - For non-Lime products: To use a different icon set, the icons ...
(QB_NEW_EN_OTHER)
[grammar] ~136-~136: Use correct spacing
Context: ...d without warning. --- ## Community & Support - 💬 Questions? [create an issue](http...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~145-~145: Use correct spacing
Context: ...ANGELOG.md) for latest updates --- ## Contributing We welcome contributions from the commun...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~147-~147: There might be a mistake here.
Context: ... from the community! Here's how you can help: - 🔍 Found an issue? Feel free to fix...
(QB_NEW_EN_OTHER)
[grammar] ~149-~149: Use proper capitalization
Context: ...sue?** Feel free to fix it and submit a PR - 📝 Improve docs? Documentation impro...
(QB_NEW_EN_OTHER_ERROR_IDS_6)
[grammar] ~150-~150: There might be a mistake here.
Context: ...* Documentation improvements are always appreciated - 🎨 Design feedback? Share your UX in...
(QB_NEW_EN_OTHER)
[grammar] ~151-~151: There might be a mistake here.
Context: ...- 🎨 Design feedback? Share your UX insights - 🧪 Testing? Help us test new feature...
(QB_NEW_EN_OTHER)
[grammar] ~152-~152: There might be a mistake here.
Context: ...** Help us test new features and report bugs Quick setup: ```bash git clone https:...
(QB_NEW_EN_OTHER)
[grammar] ~154-~154: There might be a mistake here.
Context: ...t new features and report bugs Quick setup: bash git clone https://github.com/Lundalogik/lime-elements.git cd lime-elements npm install npm start # Starts local development server 📋 **[Read our full contributing...
(QB_NEW_EN_OTHER)
[grammar] ~163-~163: Use correct spacing
Context: ...r ``` 📋 Read our full contributing guidelines --- ## 📄 License Lime Elements is open source...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~167-~167: Use correct spacing
Context: ...lob/main/CONTRIBUTING.md)** --- ## 📄 License Lime Elements is open source software li...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~169-~169: Use hyphens correctly
Context: ...* --- ## 📄 License Lime Elements is open source software licensed under the [Apac...
(QB_NEW_EN_OTHER_ERROR_IDS_29)
[grammar] ~169-~169: Use correct spacing
Context: ...software licensed under the Apache 2.0 License. ---
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~175-~175: There might be a problem here.
Context: ...r"> Built with ❤️ by your friends at Lime Technologies _Empowering developers to create amazing ...
(QB_NEW_EN_MERGED_MATCH)
[style] ~177-~177: Consider using a more formal and expressive alternative to ‘amazing’.
Context: ...m/)** Empowering developers to create amazing user experiences [⭐ Star us on GitHub...
(AWESOME)
[grammar] ~177-~177: Use correct spacing
Context: ...ering developers to create amazing user experiences_ [⭐ Star us on GitHub](https://github.com/...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~179-~179: Use correct spacing
Context: ...dalogik.github.io/lime-elements/) • 📦 NPM
(QB_NEW_EN_OTHER_ERROR_IDS_5)
🪛 markdownlint-cli2 (0.17.2)
README.md
1-1: Inline HTML
Element: img
(MD033, no-inline-html)
3-3: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
5-5: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
20-20: Inline HTML
Element: img
(MD033, no-inline-html)
173-173: Inline HTML
Element: div
(MD033, no-inline-html)
177-177: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Docs / Publish Docs
- GitHub Check: Build
- GitHub Check: Test
| .version-link { | ||
| font-family: | ||
| ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, | ||
| 'DejaVu Sans Mono', monospace; | ||
| transition: | ||
| color var(--limel-clickable-transition-speed, 0.4s) ease, | ||
| background-color var(--limel-clickable-transition-speed, 0.4s) ease, | ||
| box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, | ||
| transform var(--limel-clickable-transform-speed, 0.4s) | ||
| var(--limel-clickable-transform-timing-function, ease); | ||
| text-decoration: none; | ||
|
|
||
| display: block; | ||
| padding: 0.75rem 1rem; | ||
| border-radius: 0.5rem; | ||
|
|
||
| color: rgb(var(--contrast-1300)); | ||
| font-weight: 500; | ||
| text-align: center; | ||
| background: var(--lime-elevated-surface-background-color); | ||
| box-shadow: var(--button-shadow-normal); | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
stable-latest class is generated in HTML but has no styling
categorizeVersions() can assign className = 'stable-latest', yet the stylesheet only defines .latest and .preview. Missing styles make the “current stable” link visually identical to the rest, defeating the highlight logic.
Suggested minimal addition:
+/* highlight newest stable version */
+.version-link.stable-latest {
+ background: rgb(var(--contrast-300));
+ font-weight: 600;
+}
+.version-link.stable-latest:hover {
+ background: rgb(var(--contrast-400));
+}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .version-link { | |
| font-family: | |
| ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, | |
| 'DejaVu Sans Mono', monospace; | |
| transition: | |
| color var(--limel-clickable-transition-speed, 0.4s) ease, | |
| background-color var(--limel-clickable-transition-speed, 0.4s) ease, | |
| box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, | |
| transform var(--limel-clickable-transform-speed, 0.4s) | |
| var(--limel-clickable-transform-timing-function, ease); | |
| text-decoration: none; | |
| display: block; | |
| padding: 0.75rem 1rem; | |
| border-radius: 0.5rem; | |
| color: rgb(var(--contrast-1300)); | |
| font-weight: 500; | |
| text-align: center; | |
| background: var(--lime-elevated-surface-background-color); | |
| box-shadow: var(--button-shadow-normal); | |
| } | |
| .version-link { | |
| font-family: | |
| ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, | |
| 'DejaVu Sans Mono', monospace; | |
| transition: | |
| color var(--limel-clickable-transition-speed, 0.4s) ease, | |
| background-color var(--limel-clickable-transition-speed, 0.4s) ease, | |
| box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, | |
| transform var(--limel-clickable-transform-speed, 0.4s) | |
| var(--limel-clickable-transform-timing-function, ease); | |
| text-decoration: none; | |
| display: block; | |
| padding: 0.75rem 1rem; | |
| border-radius: 0.5rem; | |
| color: rgb(var(--contrast-1300)); | |
| font-weight: 500; | |
| text-align: center; | |
| background: var(--lime-elevated-surface-background-color); | |
| box-shadow: var(--button-shadow-normal); | |
| } | |
| /* highlight newest stable version */ | |
| .version-link.stable-latest { | |
| background: rgb(var(--contrast-300)); | |
| font-weight: 600; | |
| } | |
| .version-link.stable-latest:hover { | |
| background: rgb(var(--contrast-400)); | |
| } |
🤖 Prompt for AI Agents
In docs-index.css between lines 319 and 340, the class 'stable-latest' is used
in HTML but lacks corresponding CSS styles, causing the "current stable" link to
not be visually distinct. Add a CSS rule for the '.stable-latest' class with
appropriate styling similar to '.latest' and '.preview' to ensure it is visually
highlighted as intended.
There was a problem hiding this comment.
This one is up to you @Kiarokh. I won't add this myself, but we can add it when you're back from vacation, if you want to.
To make Lime Elements more attractive for consumers, added more badges, showing useful metrics about this package health and quality.
adrianschmidt
force-pushed
the
improve-docs
branch
from
e669d8b to
3859f4a
Compare
adrianschmidt
force-pushed
the
improve-docs
branch
from
3859f4a to
a9f3f44
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (3)
docs-index.html (3)
64-70: Broken favicon path is still unresolved
src/favicon.svgwill 404 on GitHub Pages unless asrc/folder is published alongside the HTML, and the PNG still points to an external raw-githubusercontent URL. The earlier feedback remains valid.
220-240: Version-sorting remains brittle
The hand-rolled parser still ignores pre-release tags and multi-digit segments (38.10vs38.9,-dev.1, etc.). A locale-aware numeric collator or a tiny semver helper would be safer and future-proof.
265-283:stable-latesthighlight can miss the real latest stable
Because the loop iterates over the entire sorted array (including previews) and only checksindex === 0, the first element might be a preview build (38.19.2-dev.1,PR-NNN, …). In that case no stable link ever receives thestable-latestclass.Minimal fix: identify the first non-preview version before the loop.
- window.versions.forEach(function (version, index) { + let firstStableAssigned = false; + window.versions.forEach(function (version) { let container = stableContainer; let className = ''; @@ - } else if (index === 0 && !version.includes('-')) { - className = 'stable-latest'; + } else if (!firstStableAssigned) { + className = 'stable-latest'; + firstStableAssigned = true; }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
docs-index.html(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3581
File: src/components/chip-set/chip-set.tsx:626-626
Timestamp: 2025-07-02T12:49:21.522Z
Learning: When contributors add new props to existing components in the lime-elements repository, they should always add documentation examples that demonstrate the new prop's usage and explain how it works. This helps with user adoption, feature discoverability, and maintains comprehensive documentation.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:1-3
Timestamp: 2025-04-25T14:23:56.018Z
Learning: In the lime-elements repository, CSS custom properties prefixed with `--lime-` are considered internal implementation details and should not be documented in JSDoc comments, while other custom properties should be documented as they are part of the public API.
docs-index.html (16)
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3607
File: docs-index.html:0-0
Timestamp: 2025-07-16T13:28:26.790Z
Learning: When suggesting script optimizations like adding `defer` or `async` attributes, always analyze the entire HTML file to check for dependencies between external scripts and inline scripts. Scripts loaded with `defer` execute after DOM parsing but before DOMContentLoaded, which can break synchronous dependencies with inline scripts that expect variables to be immediately available.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-17T09:39:36.254Z
Learning: For lime-elements, example files should import types from the public API using '@limetech/lime-elements' rather than defining duplicate types locally. This includes types like `EditorUiType` which are part of the component's public API.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.scss:1-3
Timestamp: 2025-04-25T14:23:56.018Z
Learning: In the lime-elements repository, CSS custom properties prefixed with `--lime-` are considered internal implementation details and should not be documented in JSDoc comments, while other custom properties should be documented as they are part of the public API.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3588
File: src/components/collapsible-section/collapsible-section.tsx:260-270
Timestamp: 2025-06-24T14:04:52.699Z
Learning: When handling missing content in aria-labels for collapsible/expandable UI components, provide a meaningful fallback rather than omitting the aria-label entirely. Screen reader users benefit from understanding the button's core functionality ("Open section" / "Close section") even when specific content identifiers are missing, as this helps them navigate imperfect interfaces.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-16T14:14:18.253Z
Learning: For lime-elements, example files should be self-contained and avoid importing internal implementation details. Example files should only import public exports from '@limetech/lime-elements' or use relative imports for other files within the examples folder. Duplicating simple type definitions in example files is preferred over importing internal types.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3581
File: src/components/chip-set/chip-set.tsx:626-626
Timestamp: 2025-07-02T12:49:21.522Z
Learning: When contributors add new props to existing components in the lime-elements repository, they should always add documentation examples that demonstrate the new prop's usage and explain how it works. This helps with user adoption, feature discoverability, and maintains comprehensive documentation.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3579
File: src/components/collapsible-section/collapsible-section.tsx:199-203
Timestamp: 2025-06-10T12:19:51.990Z
Learning: In Lime Elements codebase, components consistently use randomly generated IDs (via `createRandomString()`) for HTML elements even within shadow DOM, despite shadow DOM providing ID isolation. This pattern is maintained for consistency, accessibility robustness, future-proofing, and better development experience.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/chip-set/chip-set.tsx:367-385
Timestamp: 2025-04-14T12:22:22.298Z
Learning: In limel-chip-set, the onClick handler should be placed on the content div (<div slot="content">) rather than on the limel-notched-outline component, and should only be applied when type is 'input'.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-16T14:14:18.253Z
Learning: For lime-elements, example files should be self-contained and avoid importing internal implementation details. This includes not importing types from internal files like '../types.ts', especially those marked with @beta. Duplicating simple type definitions in example files is preferred over importing internal types that may change.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/inserter.ts:1-11
Timestamp: 2025-03-04T14:27:29.714Z
Learning: In example components (typically found in `src/components/*/examples/`), imports of lime-elements exports should use `@limetech/lime-elements` instead of relative paths. This is because example components aren't included in type declarations and are used in documentation to show developers how to properly use lime-elements components.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3607
File: docs-index.html:0-0
Timestamp: 2025-07-16T13:28:26.790Z
Learning: Before suggesting any code changes as "safe," thoroughly analyze the entire codebase context, including dependencies, usage patterns, and potential side effects. What appears to be a simple performance optimization might break existing functionality due to execution order or timing dependencies.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/inserter.ts:1-11
Timestamp: 2025-03-04T13:48:44.712Z
Learning: The lime-elements codebase must use relative imports (even with multiple "../") rather than alias imports or re-exports because they export types to `<repo-root>/dist/types`. Using non-relative imports breaks type generation as import paths from generated type files point to full .ts files rather than .d.ts files.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3518
File: src/components/notched-outline/examples/notched-outline-basic.scss:11-22
Timestamp: 2025-04-14T10:01:18.721Z
Learning: Examples in Lime Elements use Shadow DOM (with `shadow: true` in the component decorator) for style encapsulation, making additional class-based selectors unnecessary. This ensures styles are automatically scoped to each component without leaking to the rest of the application.
Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/view.scss:14-17
Timestamp: 2025-03-11T13:31:46.958Z
Learning: Lime Elements generally does not support unreasonably old browsers, so modern CSS properties like `scale` that have good support in current browsers are preferred over older alternatives.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.tsx:30-38
Timestamp: 2025-04-25T13:32:56.396Z
Learning: For StencilJS components in lime-elements, prefer using the `<Host>` element to wrap child elements in the render method instead of returning an array of elements. This follows the standard pattern in the codebase and eliminates the need for key attributes.
Learnt from: adrianschmidt
PR: Lundalogik/lime-elements#3529
File: src/components/lime-ai-avatar/lime-ai-avatar.tsx:30-38
Timestamp: 2025-04-25T13:32:56.396Z
Learning: For StencilJS components in lime-elements, prefer using the `<Host>` element to wrap child elements in the render method instead of returning an array of elements, which eliminates the need for key attributes and follows StencilJS best practices.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Docs / Publish Docs
- GitHub Check: Test
- GitHub Check: Build
🔇 Additional comments (1)
docs-index.html (1)
94-95: Confirmdeferis now actually safe
With the inline script wrapped in aDOMContentLoadedhandler, thedeferattribute should no longer break the page. Still, ifversions.jsfails to load, the UI silently logs an error and shows nothing. Consider adding a lightweight fallback message for users.
Add useful `meta` information, favicons, and change the title.
adrianschmidt
force-pushed
the
improve-docs
branch
2 times, most recently
from
74fa1b3 to
d9e96ee
Compare
… page listing versions Organize the information about versions better, and also make the page more attractive for potential consumers and developers.
adrianschmidt
force-pushed
the
improve-docs
branch
from
d9e96ee to
b495501
Compare
Summary by CodeRabbit
Review:
Browsers tested:
(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)
Windows:
Linux:
macOS:
Mobile: