Dismissable #1700

jjagielka · 2025-07-29T15:47:56Z

📑 Description

This is another approach to the CloseButton.
It uses the setContext/getContext. It requires to adding one line to all dissmisable components.

createDismissableContext(()=> badgeStatus = false);

If you want to handle the CloseButton yourself (customize, relocate, add features), you set dismissable={false} and add CloseButton manually.

<Badge dismissable>Dismissable</Badge>
<-- or -->
<Badge class="flex items-center">
      No dismiss
      <CloseButton />
/Badge>

This PR modifies only Badge for starting the discussion.

Status

Not Completed
Completed

✅ Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required
I have checked the page with https://validator.unl.edu/
All the tests have passed
My pull request is based on the latest commit (not the npm version).

ℹ Additional Information

Summary by CodeRabbit

New Features
- Badges, alerts, banners, modals, toasts, drawers, and form inputs now support a standardized dismiss (close/clear) behavior using event-driven dismissal.
Improvements
- Close buttons across components no longer have direct click handlers but rely on a shared dismissable context, enabling consistent dismissal behavior and external event handling.
- Dismissal logic supports event cancellation and bubbling, improving flexibility and predictability of user interactions.
- Form components’ clear buttons adopt the dismissable context for clearing inputs.
- Documentation examples updated to use new styling prop conventions and remove deprecated inline close handlers.
Chores
- Introduced a shared dismissable context mechanism to unify dismissal behavior across multiple UI components.

vercel · 2025-07-29T15:48:00Z

@jjagielka is attempting to deploy a commit to the Themesberg Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2025-07-29T15:48:02Z

Walkthrough

A dismissable context mechanism has been introduced for Svelte components, enabling standardized dismissal behavior. The Badge, Alert, Banner, Modal, Toast, and various form components now use this context for their close or clear functionality, while the CloseButton component consumes the context to trigger dismissal actions. A new utility module implements the context provider and consumer logic. Additionally, multiple drawer example components and documentation were updated to remove explicit inline click handlers from CloseButton components.

Changes

Cohort / File(s)	Change Summary
Badge Dismiss Context Integration `src/lib/badge/Badge.svelte`	Imports and invokes `createDismissableContext` with the badge's close function, establishing a dismissable context. Removes explicit `onclick` prop from the internal `CloseButton`. Badge rendering and props remain unchanged.
Alert Dismiss Context Integration `src/lib/alert/Alert.svelte`	Replaces `onclick` prop with `onclose`. Adds a `ref` to bind alert root div and a `close` function that dispatches a cancelable "close" event. Uses `createDismissableContext` to provide dismissal context. Removes explicit `onclick` from `CloseButton`. Minor CSS class adjustment on close button.
Banner Dismiss Context Integration `src/lib/banner/Banner.svelte`	Adds `onclose` prop and a `ref` bound to the root div. Introduces a `close` function dispatching a cancelable "close" event and sets `open` to false if not prevented. Uses `createDismissableContext` for dismissal. Removes direct `onclick` from `CloseButton`.
Modal Dismiss Context Integration `src/lib/modal/Modal.svelte`	Adds `ref` bound to `<dialog>`. Replaces previous `close_handler` with a function dispatching a synthetic "cancel" event on the dialog element unless a form is present. Uses `createDismissableContext` with this handler. Removes `onclick` from `CloseButton`.
Toast Dismiss Context Integration `src/lib/toast/Toast.svelte`	Replaces direct close handler with a `_close` function dispatching a cancelable "close" event and setting `toastStatus` to false if not prevented. Binds root div to `ref`, passes `onclose` prop, and uses `createDismissableContext`. Removes explicit `onclick` from `CloseButton`.
Drawer Dismiss Context Integration `src/lib/drawer/Drawer.svelte`	Removes `closeDrawer` prop, adds `onclose` prop and internal `close` function dispatching cancelable "close" event on backdrop div. Binds backdrop div to `ref`. Updates click handlers and trapFocus escape handler to use new `close` function. Uses `createDismissableContext`.
Form Components Dismiss Context Integration `src/lib/forms/*.{svelte}`	Multiple form components (`Fileupload.svelte`, `FloatingLabelInput.svelte`, `Input.svelte`, `Search.svelte`, `MultiSelect.svelte`, `Select.svelte`, `Textarea.svelte`) import and invoke `createDismissableContext` with their `clearAll` function. Removes explicit `onclick` handlers from `CloseButton`.
CloseButton Context Consumption `src/lib/utils/CloseButton.svelte`	Imports and uses `useDismiss` context hook. Refactors click handler: original handler is wrapped, and the dismiss method from context is called if the event isn't prevented. No changes to exports or public API.
Dismissable Context Utility `src/lib/utils/dismissable.svelte.ts`	New module providing a dismissable context for Svelte. Exports the `DismissableContext` type, `createDismissableContext` context provider, and `useDismiss` context consumer. Logs a warning if context is missing.
Drawer Examples CloseButton Handler Removal `src/routes/api-check/components/drawer/examples/*.svelte` `src/routes/examples/drawer/classesCheck.svelte` `static/llm/components/drawer.md` `src/routes/docs/components/drawer.md` `static/llm/forms/timepicker.md` `src/routes/docs/forms/timepicker.md`	Removed all explicit inline `onclick` handlers from `CloseButton` components in drawer example files and documentation. Previously, these handlers set drawer visibility state variables; now they are removed, leaving buttons without direct click dismissal logic.
Documentation Styling Prop Updates `src/routes/docs/forms/checkbox.md` `src/routes/docs/forms/input-field.md` `src/routes/docs/forms/radio.md` `src/routes/docs/forms/search-input.md` `src/routes/docs/forms/toggle.md` `src/routes/docs/components/toast.md`	Updated component usage examples to replace deprecated or single-string styling props (`divClass`, `labelClass`, `inputClass`, `spanClass`, `contentClass`) with new `classes` object props specifying keys like `div`, `label`, `input`, `span`, or `content`. No logic changes, only usage syntax updates.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant CloseButton
    participant DismissableContext
    participant Component

    User->>CloseButton: Clicks close button
    CloseButton->>DismissableContext: Calls dismiss(event)
    DismissableContext->>Component: Invokes close(event)
    Component->>Component: Dispatches "close" event
    alt Event not prevented
        Component->>Component: Updates internal state (hide/dismiss)
    else Event prevented
        Component->>Component: No state change
    end

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~40 minutes

Possibly related PRs

Update badge.md: fix wrong documentation #1419: Updates documentation to rename the event from dismiss to close, related to the event naming and usage in the Badge component.
feat: Add prop 'clearable' to input #1438: Implements a clearable input feature with direct event handling, related in functionality but differing in approach from the dismissable context usage in this PR.

Poem

A badge, alert, and banner too,
With modals and toasts that bid adieu.
A context shared,
Dismissal declared,
Close buttons now know what to do!
🐇🔔✨

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

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.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai generate unit tests to generate unit tests for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

shinokada · 2025-07-30T11:01:06Z

This seems easier to apply and also cleaner, scalable, flexible.

shinokada · 2025-07-30T11:03:50Z

useDismiss() returns undefined and logs a warning — which is okay in dev, but we may need to consider throwing in production?
What do you think?

coderabbitai

Actionable comments posted: 0

🔭 Outside diff range comments (1)

src/lib/alert/Alert.svelte (1)
79-79: Remove outdated prop documentation

The onclick prop has been replaced with onclose but the documentation still references it.
-@prop onclick = ()

🧹 Nitpick comments (4)

src/lib/toast/Toast.svelte (1)
32-36: Consider using a more generic event type

The _close function parameter is typed as MouseEvent, but the dismissable context might be triggered by keyboard events or other interactions. Consider using Event for broader compatibility.
-function _close(event: MouseEvent) {
+function _close(event: Event) {
   if (ref?.dispatchEvent(new Event("close", { bubbles: true, cancelable: true }))) {
     toastStatus = false;
   }
}
src/lib/banner/Banner.svelte (1)
21-25: Consider using a more generic event type

Same as in Toast.svelte, the close function parameter should use Event instead of MouseEvent for broader compatibility.
-function close(event: MouseEvent) {
+function close(event: Event) {
   if (ref?.dispatchEvent(new Event("close", { bubbles: true, cancelable: true }))) {
     open = false;
   }
}
src/lib/alert/Alert.svelte (1)
27-31: Consider using a more generic event type

Consistent with other components, use Event instead of MouseEvent for the close function parameter.
-function close(event: MouseEvent) {
+function close(event: Event) {
   if (ref?.dispatchEvent(new Event("close", { bubbles: true, cancelable: true }))) {
     alertStatus = false;
   }
}
src/lib/modal/Modal.svelte (1)
90-97: Consider using a more generic event type

For consistency with other components and broader compatibility, use Event instead of MouseEvent.
-function close_handler(ev: MouseEvent) {
+function close_handler(ev: Event) {
   if (form) {
     // dialog/form mechanism will close the dialog
     return;
   }

   ref?.dispatchEvent(new Event("cancel", { bubbles: true, cancelable: true }));
}

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 006c359 and c95989c.

📒 Files selected for processing (6)

src/lib/alert/Alert.svelte (3 hunks)
src/lib/badge/Badge.svelte (3 hunks)
src/lib/banner/Banner.svelte (2 hunks)
src/lib/modal/Modal.svelte (4 hunks)
src/lib/toast/Toast.svelte (3 hunks)
src/lib/utils/CloseButton.svelte (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

src/lib/utils/CloseButton.svelte
src/lib/badge/Badge.svelte

🧰 Additional context used

🧠 Learnings (5)

📓 Common learnings

Learnt from: mrh1997
PR: themesberg/flowbite-svelte#1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In `src/lib/utils/Popper.svelte`, inconsistencies in event handling (e.g., using both `mouseenter`/`mouseleave` and `pointerenter`/`pointerleave`) may be intentional to minimize modifications and reduce the risk of new problems.

src/lib/toast/Toast.svelte (1)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

src/lib/alert/Alert.svelte (2)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

Learnt from: LahTeuto
PR: #1484
File: src/lib/navbar/NavLi.svelte:34-34
Timestamp: 2024-11-12T10:36:34.807Z
Learning: When enhancing ARIA roles in Svelte components, avoid setting role="presentation" on elements that should retain the link role, as it can diminish ARIA role coverage and negatively affect accessibility.

src/lib/banner/Banner.svelte (1)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

src/lib/modal/Modal.svelte (1)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

🔇 Additional comments (1)

src/lib/modal/Modal.svelte (1)

90-99: Good handling of form/dialog interaction

The check for form prop before dispatching the cancel event is correct, as it prevents interference with the native dialog/form closing mechanism.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/lib/drawer/Drawer.svelte (1)
60-60: Update inline documentation.

The comment block still references the old closeDrawer prop which has been replaced with onclose.
-@prop closeDrawer = ()
+@prop onclose
src/lib/toast/Toast.svelte (1)
34-38: Consider more flexible parameter typing.

The event dispatching logic is well-designed with proper cancelable event handling. However, the event: MouseEvent parameter might be too restrictive since this function could be called from various contexts through the dismissable context.

Consider using a more flexible parameter type:
-function _close(event: MouseEvent) {
+function _close(event?: Event) {

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c95989c and b2c9cd4.

📒 Files selected for processing (36)

src/lib/drawer/Drawer.svelte (2 hunks)
src/lib/forms/fileupload/Fileupload.svelte (2 hunks)
src/lib/forms/floating-label/FloatingLabelInput.svelte (3 hunks)
src/lib/forms/input-field/Input.svelte (3 hunks)
src/lib/forms/search/Search.svelte (3 hunks)
src/lib/forms/select/MultiSelect.svelte (3 hunks)
src/lib/forms/select/Select.svelte (3 hunks)
src/lib/forms/textarea/Textarea.svelte (3 hunks)
src/lib/toast/Toast.svelte (3 hunks)
src/lib/utils/dismissable.svelte.ts (1 hunks)
src/routes/api-check/components/drawer/examples/Bottom.svelte (1 hunks)
src/routes/api-check/components/drawer/examples/Contact.svelte (1 hunks)
src/routes/api-check/components/drawer/examples/Default.svelte (1 hunks)
src/routes/api-check/components/drawer/examples/Disabled.svelte (1 hunks)
src/routes/api-check/components/drawer/examples/DisablingOutside.svelte (1 hunks)
src/routes/api-check/components/drawer/examples/Enabled.svelte (1 hunks)
src/routes/api-check/components/drawer/examples/Form.svelte (1 hunks)
src/routes/api-check/components/drawer/examples/Left.svelte (1 hunks)
src/routes/api-check/components/drawer/examples/Navigation.svelte (1 hunks)
src/routes/api-check/components/drawer/examples/OnlyOutside.svelte (1 hunks)
src/routes/api-check/components/drawer/examples/Position.svelte (1 hunks)
src/routes/api-check/components/drawer/examples/Right.svelte (1 hunks)
src/routes/api-check/components/drawer/examples/Scrolling.svelte (1 hunks)
src/routes/api-check/components/drawer/examples/Top.svelte (1 hunks)
src/routes/api-check/forms/timepicker.svelte (1 hunks)
src/routes/docs/components/drawer.md (14 hunks)
src/routes/docs/components/toast.md (2 hunks)
src/routes/docs/forms/checkbox.md (6 hunks)
src/routes/docs/forms/input-field.md (1 hunks)
src/routes/docs/forms/radio.md (4 hunks)
src/routes/docs/forms/search-input.md (3 hunks)
src/routes/docs/forms/timepicker.md (1 hunks)
src/routes/docs/forms/toggle.md (1 hunks)
src/routes/examples/drawer/classesCheck.svelte (1 hunks)
static/llm/components/drawer.md (14 hunks)
static/llm/forms/timepicker.md (1 hunks)

✅ Files skipped from review due to trivial changes (5)

src/routes/docs/components/drawer.md
static/llm/components/drawer.md
src/routes/docs/forms/checkbox.md
src/routes/docs/forms/search-input.md
src/lib/utils/dismissable.svelte.ts

🧰 Additional context used

🧠 Learnings (28)

📓 Common learnings

Learnt from: mrh1997
PR: themesberg/flowbite-svelte#1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In `src/lib/utils/Popper.svelte`, inconsistencies in event handling (e.g., using both `mouseenter`/`mouseleave` and `pointerenter`/`pointerleave`) may be intentional to minimize modifications and reduce the risk of new problems.

Learnt from: Chizaruu
PR: themesberg/flowbite-svelte#1465
File: src/lib/forms/Timepicker.svelte:105-116
Timestamp: 2024-10-18T09:38:03.879Z
Learning: In `Timepicker.svelte`, the `Dropdown` opens as intended and is used exclusively with the 'dropdown' and 'timerange-dropdown' Timepicker types.

Learnt from: LahTeuto
PR: themesberg/flowbite-svelte#1484
File: src/lib/navbar/NavLi.svelte:34-34
Timestamp: 2024-11-12T10:36:34.807Z
Learning: When enhancing ARIA roles in Svelte components, avoid setting `role="presentation"` on elements that should retain the `link` role, as it can diminish ARIA role coverage and negatively affect accessibility.

src/routes/examples/drawer/classesCheck.svelte (1)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

src/routes/api-check/components/drawer/examples/Scrolling.svelte (1)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

src/routes/api-check/components/drawer/examples/Right.svelte (1)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

src/routes/api-check/components/drawer/examples/Navigation.svelte (2)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

Learnt from: LahTeuto
PR: #1484
File: src/lib/navbar/NavLi.svelte:34-34
Timestamp: 2024-11-12T10:36:34.807Z
Learning: When enhancing ARIA roles in Svelte components, avoid setting role="presentation" on elements that should retain the link role, as it can diminish ARIA role coverage and negatively affect accessibility.

src/routes/api-check/components/drawer/examples/Enabled.svelte (2)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

Learnt from: LahTeuto
PR: #1484
File: src/lib/navbar/NavLi.svelte:34-34
Timestamp: 2024-11-12T10:36:34.807Z
Learning: When enhancing ARIA roles in Svelte components, avoid setting role="presentation" on elements that should retain the link role, as it can diminish ARIA role coverage and negatively affect accessibility.

src/routes/api-check/components/drawer/examples/Top.svelte (1)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

src/routes/api-check/components/drawer/examples/Default.svelte (2)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

Learnt from: LahTeuto
PR: #1484
File: src/lib/navbar/NavLi.svelte:34-34
Timestamp: 2024-11-12T10:36:34.807Z
Learning: When enhancing ARIA roles in Svelte components, avoid setting role="presentation" on elements that should retain the link role, as it can diminish ARIA role coverage and negatively affect accessibility.

src/routes/api-check/components/drawer/examples/Left.svelte (1)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

src/routes/api-check/components/drawer/examples/Position.svelte (1)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

src/lib/forms/select/Select.svelte (2)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

Learnt from: Chizaruu
PR: #1465
File: src/lib/forms/Timepicker.svelte:105-116
Timestamp: 2024-10-18T09:38:03.879Z
Learning: In Timepicker.svelte, the Dropdown opens as intended and is used exclusively with the 'dropdown' and 'timerange-dropdown' Timepicker types.

src/routes/api-check/components/drawer/examples/DisablingOutside.svelte (1)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

src/routes/docs/forms/timepicker.md (3)

Learnt from: Chizaruu
PR: #1465
File: src/lib/forms/Timepicker.svelte:105-116
Timestamp: 2024-10-18T09:38:03.879Z
Learning: In Timepicker.svelte, the Dropdown opens as intended and is used exclusively with the 'dropdown' and 'timerange-dropdown' Timepicker types.

Learnt from: Chizaruu
PR: #1464
File: src/routes/component-data/Datepicker.json:0-0
Timestamp: 2024-10-15T22:41:47.429Z
Learning: The component should be named 'Datepicker' (with lowercase 'p') throughout the codebase to maintain consistency.

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

src/routes/api-check/components/drawer/examples/Bottom.svelte (1)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

src/routes/api-check/components/drawer/examples/Contact.svelte (1)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

src/lib/forms/floating-label/FloatingLabelInput.svelte (7)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

Learnt from: superstes
PR: themesberg/flowbite-svelte#0
File: :0-0
Timestamp: 2025-03-20T11:11:53.953Z
Learning: In the Flowbite Svelte library's MultiInput component, the 'inputInvalid' property should be exported and passed to the Wrapper component to properly style the component's ring with red color when validation fails, similar to how the Input component handles validation states.

Learnt from: superstes
PR: themesberg/flowbite-svelte#0
File: :0-0
Timestamp: 2025-03-20T12:47:33.307Z
Learning: In the Flowbite Svelte library's composite form components like MultiInput, when implementing focus styles, ensure both the container (with focus-within) and the inner input element (with direct focus) have dynamic styling based on the validation state. The input element needs its own focus styles that change to red when inputInvalid=true.

Learnt from: superstes
PR: themesberg/flowbite-svelte#0
File: :0-0
Timestamp: 2025-03-20T11:11:53.952Z
Learning: In the Flowbite Svelte library, when implementing components with validation states, the 'inputInvalid' property should be explicitly defined and passed to the Wrapper component. When inputInvalid=true, the color should be set to "red" to ensure the ring/border styling is applied correctly.

Learnt from: superstes
PR: themesberg/flowbite-svelte#0
File: :0-0
Timestamp: 2025-03-20T11:52:09.106Z
Learning: In the Flowbite Svelte library's form components like MultiInput, when handling focus states for validation, avoid hardcoding focus-within classes like 'focus-within:border-primary-500'. Instead, create a dynamic mapping object (e.g., focusWithinClasses) that changes the focus ring color based on the current color state, especially when inputInvalid=true.

Learnt from: superstes
PR: themesberg/flowbite-svelte#0
File: :0-0
Timestamp: 2025-03-20T12:47:33.307Z
Learning: In the Flowbite Svelte library's composite form components like MultiInput, when implementing focus styles with focus-within, create a dedicated focusWithinClasses object with appropriate colors for each state (base, primary, green, red). Using just 'focus-within:ring-1' without color specification won't correctly apply color-specific styling when the input receives focus directly.

Learnt from: superstes
PR: themesberg/flowbite-svelte#0
File: :0-0
Timestamp: 2025-03-20T11:52:09.106Z
Learning: In the Flowbite Svelte library's form components, both the regular focus styling (controlled by ringClasses) and focus-within styling need to be dynamically adjusted based on validation state. For proper validation styling, create separate objects for focus-within classes (like focusWithinClasses) that use the same color as ringClasses when inputInvalid=true.

static/llm/forms/timepicker.md (3)

Learnt from: Chizaruu
PR: #1465
File: src/lib/forms/Timepicker.svelte:105-116
Timestamp: 2024-10-18T09:38:03.879Z
Learning: In Timepicker.svelte, the Dropdown opens as intended and is used exclusively with the 'dropdown' and 'timerange-dropdown' Timepicker types.

Learnt from: Chizaruu
PR: #1464
File: src/routes/component-data/Datepicker.json:0-0
Timestamp: 2024-10-15T22:41:47.429Z
Learning: The component should be named 'Datepicker' (with lowercase 'p') throughout the codebase to maintain consistency.

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

src/lib/forms/select/MultiSelect.svelte (2)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

Learnt from: Chizaruu
PR: #1465
File: src/lib/forms/Timepicker.svelte:105-116
Timestamp: 2024-10-18T09:38:03.879Z
Learning: In Timepicker.svelte, the Dropdown opens as intended and is used exclusively with the 'dropdown' and 'timerange-dropdown' Timepicker types.

src/lib/forms/search/Search.svelte (1)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

src/routes/docs/forms/radio.md (5)

Learnt from: superstes
PR: themesberg/flowbite-svelte#0
File: :0-0
Timestamp: 2025-03-20T12:47:33.307Z
Learning: In the Flowbite Svelte library's composite form components like MultiInput, when implementing focus styles with focus-within, create a dedicated focusWithinClasses object with appropriate colors for each state (base, primary, green, red). Using just 'focus-within:ring-1' without color specification won't correctly apply color-specific styling when the input receives focus directly.

Learnt from: superstes
PR: themesberg/flowbite-svelte#0
File: :0-0
Timestamp: 2025-03-20T11:52:09.106Z
Learning: In the Flowbite Svelte library's form components, both the regular focus styling (controlled by ringClasses) and focus-within styling need to be dynamically adjusted based on validation state. For proper validation styling, create separate objects for focus-within classes (like focusWithinClasses) that use the same color as ringClasses when inputInvalid=true.

Learnt from: superstes
PR: themesberg/flowbite-svelte#0
File: :0-0
Timestamp: 2025-03-20T11:11:53.952Z
Learning: In the Flowbite Svelte library, when implementing components with validation states, the 'inputInvalid' property should be explicitly defined and passed to the Wrapper component. When inputInvalid=true, the color should be set to "red" to ensure the ring/border styling is applied correctly.

Learnt from: superstes
PR: themesberg/flowbite-svelte#0
File: :0-0
Timestamp: 2025-03-20T11:52:09.106Z
Learning: In the Flowbite Svelte library's form components like MultiInput, when handling focus states for validation, avoid hardcoding focus-within classes like 'focus-within:border-primary-500'. Instead, create a dynamic mapping object (e.g., focusWithinClasses) that changes the focus ring color based on the current color state, especially when inputInvalid=true.

Learnt from: LahTeuto
PR: #1484
File: src/lib/navbar/NavLi.svelte:34-34
Timestamp: 2024-11-12T10:36:34.807Z
Learning: When enhancing ARIA roles in Svelte components, avoid setting role="presentation" on elements that should retain the link role, as it can diminish ARIA role coverage and negatively affect accessibility.

src/routes/api-check/components/drawer/examples/Form.svelte (1)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

src/routes/api-check/components/drawer/examples/Disabled.svelte (2)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

Learnt from: LahTeuto
PR: #1484
File: src/lib/navbar/NavLi.svelte:34-34
Timestamp: 2024-11-12T10:36:34.807Z
Learning: When enhancing ARIA roles in Svelte components, avoid setting role="presentation" on elements that should retain the link role, as it can diminish ARIA role coverage and negatively affect accessibility.

src/routes/api-check/components/drawer/examples/OnlyOutside.svelte (2)

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

Learnt from: LahTeuto
PR: #1484
File: src/lib/navbar/NavLi.svelte:34-34
Timestamp: 2024-11-12T10:36:34.807Z
Learning: When enhancing ARIA roles in Svelte components, avoid setting role="presentation" on elements that should retain the link role, as it can diminish ARIA role coverage and negatively affect accessibility.

src/routes/api-check/forms/timepicker.svelte (2)

Learnt from: Chizaruu
PR: #1465
File: src/lib/forms/Timepicker.svelte:105-116
Timestamp: 2024-10-18T09:38:03.879Z
Learning: In Timepicker.svelte, the Dropdown opens as intended and is used exclusively with the 'dropdown' and 'timerange-dropdown' Timepicker types.

Learnt from: mrh1997
PR: #1442
File: src/lib/utils/Popper.svelte:144-145
Timestamp: 2024-11-22T08:37:27.996Z
Learning: In src/lib/utils/Popper.svelte, inconsistencies in event handling (e.g., using both mouseenter/mouseleave and pointerenter/pointerleave) may be intentional to minimize modifications and reduce the risk of new problems.

src/lib/forms/input-field/Input.svelte (8)