version-2 part-5 (#1896)

* fix(ThemeSelector): remove the manual onclick handler from the Button, isOpen state variable, bind:isOpen from Dropdown, aria-exapanded attribute

* tests: fix ThemeSelector.test.ts

* tests: radio, label, input-field, input-addon, helper

* feat: CloseButton update, phoneinput unit tests, colors update, etc.

* fix: remove duplicate test:all

* feat: data-scope and data-part

Author: shinokada

CLAUDE.md

@@ -1,24 +1,75 @@
-You can use the Flowbite-Svelte MCP server, where you have access to comprehensive Flowbite-Svelte component documentation. Here's how to use the available tools effectively:
+# Claude MCP Server Documentation
 
-## Available MCP Tools:
+This project uses multiple MCP servers to provide comprehensive documentation access.
 
-### 1. findComponent
+## Available MCP Servers
 
-Use this FIRST to discover components by name or category. Returns component information including the documentation path.
-When asked about Flowbite-Svelte components, ALWAYS use this tool to locate the correct component before fetching documentation.
-Example queries: 'Button', 'CardPlaceholder', 'form checkbox'
+### Svelte MCP Server
 
-### 2. getComponentList
+You have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:
 
-Lists all available Flowbite-Svelte components with their categories.
-Use this to discover what components are available or to help users explore component options.
+#### Available Tools:
 
-### 3. getComponentDoc
+**1. list-sections**
+- Use this FIRST to discover all available documentation sections
+- Returns a structured list with titles, use_cases, and paths
+- When asked about Svelte or SvelteKit topics, ALWAYS use this tool at the start to find relevant sections
 
-Retrieves full documentation content for a specific component. Accepts the component path found using findComponent.
-After calling findComponent, use this tool to fetch the complete documentation including usage examples, props, and best practices.
+**2. get-documentation**
+- Retrieves full documentation content for specific sections
+- Accepts single or multiple sections
+- After calling list-sections, you MUST analyze the returned documentation (especially the use_cases field) and then fetch ALL relevant sections for the user's task
 
-### 4. searchDocs
+**3. svelte-autofixer**
+- Analyzes Svelte code and returns issues and suggestions
+- You MUST use this tool whenever writing Svelte code before sending it to the user
+- Keep calling it until no issues or suggestions are returned
 
-Performs full-text search across all Flowbite-Svelte documentation.
-Use this when you need to find specific information that might span multiple components or when the user asks about features or patterns.
+**4. playground-link**
+- Generates a Svelte Playground link with the provided code
+- After completing the code, ask the user if they want a playground link
+- NEVER call this if code was written to files in their project
+
+### Flowbite-Svelte MCP Server
+
+You have access to comprehensive Flowbite-Svelte component documentation. Here's how to use the available tools effectively:
+
+#### Available Tools:
+
+**1. findComponent**
+- Use this FIRST to discover components by name or category
+- Returns component information including the documentation path
+- When asked about Flowbite-Svelte components, ALWAYS use this tool to locate the correct component before fetching documentation
+- Example queries: 'Button', 'CardPlaceholder', 'form checkbox'
+
+**2. getComponentList**
+- Lists all available Flowbite-Svelte components with their categories
+- Use this to discover what components are available or to help users explore component options
+
+**3. getComponentDoc**
+- Retrieves full documentation content for a specific component
+- Accepts the component path found using findComponent
+- After calling findComponent, use this tool to fetch complete documentation including usage examples, props, and best practices
+
+**4. searchDocs**
+- Performs full-text search across all Flowbite-Svelte documentation
+- Use this when you need to find specific information that might span multiple components or when the user asks about features or patterns
+
+## Workflow Guidelines
+
+### When building Svelte components with Flowbite-Svelte:
+
+1. **Start with Svelte documentation**: Use `list-sections` to understand which Svelte concepts are needed
+2. **Fetch relevant Svelte docs**: Use `get-documentation` to get all necessary Svelte sections
+3. **Find Flowbite-Svelte components**: Use `findComponent` to locate the UI components needed
+4. **Get component details**: Use `getComponentDoc` to fetch usage examples and props
+5. **Write the code**: Combine Svelte patterns with Flowbite-Svelte components
+6. **Validate the code**: Use `svelte-autofixer` to check for issues
+7. **Offer playground**: Ask if the user wants a playground link (only if not writing to files)
+
+### Best Practices:
+
+- Always prioritize Svelte 5 runes and modern patterns
+- Use Flowbite-Svelte components for consistent UI design
+- Validate all code with svelte-autofixer before delivering
+- Keep documentation lookups efficient by fetching multiple sections at once

design-system.md

@@ -0,0 +1,128 @@
+# Flowbite Svelte Design System
+
+## Anatomical Selectors: data-scope and data-part
+To provide a consistent API for styling, testing, and DOM inspection, every component uses a standardized data-attribute pattern.
+
+1. `data-scope`
+Definition: Identifies the component boundary.
+
+Format: Always kebab-case (e.g., breadcrumb-item for BreadcrumbItem, button-group for ButtonGroup).
+
+Usage: Applied to the root element of the component. It acts as a namespace to prevent CSS leakage and helps in end-to-end testing (Playwright/Vitest).
+
+2. `data-part`
+Definition: Identifies a specific sub-element (slot) within the component.
+
+Requirement: The value must strictly match a key defined in the component's theme.ts slots.
+
+Usage: Acts as a stable "Public API" for CSS selectors. Instead of targeting unstable utility classes, consumers can target:
+
+```css
+/* Targeted styling without touching component internals */
+[data-scope="breadcrumb-item"] [data-part="link"]:hover {
+  text-decoration: underline;
+}
+```
+
+## Slot Naming
+
+In Flowbite-Svelte, we use `camelCase` for slot names.
+
+Each slot represents a distinct part of a component and follows standard JavaScript naming conventions to ensure consistency and readability across the codebase.
+
+### Example
+
+```ts
+const card = tv({
+  slots: {
+    base: '...',
+    columnHeader: '...',
+    infoWrapper: '...',
+    monthButton: '...',
+  }
+});
+```
+Using camelCase makes slot names predictable, easy to reference, and consistent with how component APIs are written throughout Flowbite-Svelte.
+
+| Usage context          | Example                   | Naming style | Notes                                                           |
+| ---------------------- | ------------------------- | ------------ | --------------------------------------------------------------- |
+| Slot name              | `leftTop`                 | camelCase    | Used in component APIs and `tailwind-variants` slot definitions |
+| theme access           | `theme.component.leftTop` | camelCase    | Follows standard JavaScript property naming                     |
+| classes/styling access | `classes={{leftTop: ""}}` | camelCase    | Follows standard JavaScript property naming                     |
+| HTML data attribute    | `data-part="left-top"`    | kebab-case   | Follows HTML attribute conventions                              |
+| CSS selector           | `[data-part="left-top"]`  | kebab-case   | Matches HTML and Tailwind conventions                           |
+
+
+## **✅ The 5 most common `data-part` categories**
+
+These show up across almost all well-designed component libraries (Radix, Ark, Shoelace, Adobe Spectrum, etc.)
+
+---
+
+### **1️⃣ Structural parts (layout / grouping)**
+
+| Name        | Meaning                                       |
+| :---------- | :-------------------------------------------- |
+| `base`      | Root element of the component                 |
+| `content`   | Main content area                             |
+| `container` | Layout wrapper (less semantic than `content`) |
+| `wrapper`   | Structural wrapper (use sparingly)            |
+| `body`      | Main content body (dialogs, cards)            |
+
+---
+
+### **2️⃣ Interactive parts**
+
+| Name      | Use case                  |
+| :-------- | :------------------------ |
+| `trigger` | Opens/toggles something   |
+| `button`  | Clickable control         |
+| `item`    | Repeated interactive item |
+| `option`  | Selectable option         |
+| `tab`     | Tab element               |
+
+Example:
+
+`<button data-part="trigger">`
+
+---
+
+### **3️⃣ Textual parts**
+
+| Name          | Use case                  |
+| :------------ | :------------------------ |
+| `label`       | Visible text label        |
+| `title`       | Heading or title          |
+| `description` | Supporting text           |
+| `value`       | Dynamic or selected value |
+
+You already used this correctly:
+
+`<span data-part="label">Home</span>`
+
+---
+
+### **4️⃣ Icon & media parts**
+
+| Name     | Use case        |
+| :------- | :-------------- |
+| `icon`   | Icon glyph      |
+| `avatar` | User image      |
+| `image`  | Generic image   |
+| `badge`  | Small indicator |
+
+Example:
+
+`<Icon data-part="icon" />`
+
+---
+
+### **5️⃣ State / utility parts**
+
+| Name        | Use case           |
+| :---------- | :----------------- |
+| `overlay`   | Backdrop / overlay |
+| `backdrop`  | Modal background   |
+| `indicator` | Status indicator   |
+| `separator` | Divider line       |
+

src/lib/accordion/Accordion.svelte

@@ -37,7 +37,7 @@
   const base = $derived(accordion({ flush, class: clsx(theme, className) }));
 </script>
 
-<div {...restProps} class={base}>
+<div data-scope="accordion" data-part="base" {...restProps} class={base}>
   {@render children()}
 </div>
 

src/lib/accordion/AccordionItem.svelte

@@ -16,7 +16,7 @@
   // Theme is applied in template via clsx with lowest priority.
   const finalClasses = $derived({
     button: classes?.button || ctx?.classes?.button,
-    contentWrapper: classes?.contentWrapper || ctx?.classes?.contentWrapper,
+    contentWrapper: classes?.container || ctx?.classes?.contentWrapper,
     content: classes?.content || ctx?.classes?.content,
     active: classes?.active || ctx?.classes?.active,
     inactive: classes?.inactive || ctx?.classes?.inactive
@@ -50,15 +50,15 @@
     open = !open;
   };
 
-  const { base, button, contentWrapper, content, active, inactive } = $derived(accordionItem({ flush: ctx?.flush, open }));
+  const { base, button, container, content, active, inactive } = $derived(accordionItem({ flush: ctx?.flush, open }));
 
   let buttonClass = $derived(clsx(open && !ctx?.flush && (finalClasses.active || active()), !open && !ctx?.flush && (finalClasses.inactive || inactive())));
 
-  let contentWrapperCls = $derived(clsx(contentWrapper(), open ? "block" : "hidden", finalClasses.contentWrapper));
+  let contentWrapperCls = $derived(clsx(container(), open ? "block" : "hidden", finalClasses.contentWrapper));
 </script>
 
-<h2 class={base({ class: clsx(theme?.base, className) })}>
-  <button type="button" onclick={handleToggle} class={button({ class: clsx(buttonClass, theme?.button, finalClasses.button) })} aria-expanded={open}>
+<h2 data-scope="accordion-item" data-part="base" class={base({ class: clsx(theme?.base, className) })}>
+  <button data-part="button" type="button" onclick={handleToggle} class={button({ class: clsx(buttonClass, theme?.button, finalClasses.button) })} aria-expanded={open}>
     {#if header}
       {@render header()}
       {#if open}
@@ -82,15 +82,15 @@
 
 {#if useTransition}
   {#if open && transitionType !== "none"}
-    <div class={contentWrapperCls} transition:transitionType={effectiveTransitionParams as ParamsType}>
-      <div class={content({ class: clsx(theme?.content, finalClasses.content) })}>
+    <div data-part="content-wrapper" class={contentWrapperCls} transition:transitionType={effectiveTransitionParams as ParamsType}>
+      <div data-part="content" class={content({ class: clsx(theme?.content, finalClasses.content) })}>
         {@render children()}
       </div>
     </div>
   {/if}
 {:else}
-  <div class={contentWrapperCls}>
-    <div class={content({ class: clsx(theme?.content, finalClasses.content) })}>
+  <div data-part="content-wrapper" class={contentWrapperCls}>
+    <div data-part="content" class={content({ class: clsx(theme?.content, finalClasses.content) })}>
       {@render children()}
     </div>
   </div>

src/lib/accordion/theme.ts

@@ -33,7 +33,7 @@ export const accordionItem = tv({
   slots: {
     base: "group",
     button: "flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body group-first:rounded-t-base border border-t-0 border-x-0 border-b-default gap-3",
-    contentWrapper: "",
+    container: "",
     content: "p-4 md:p-5 group-last:border group-last:border-t-default group-last:border-x-0",
     active: "",
     inactive: ""

src/lib/alert/Alert.svelte

@@ -14,7 +14,6 @@
     alertStatus = $bindable(true),
     closeIcon: CloseIcon,
     color = "brand",
-    closeColor,
     rounded = true,
     border,
     class: className,
@@ -23,6 +22,7 @@
     params,
     listContent,
     borderAccent,
+    closeButtonProps,
     ...restProps
   }: AlertProps = $props();
 
@@ -57,10 +57,20 @@
   }
 
   createDismissableContext(close);
+
+  const finalCloseProps = $derived({
+    class: clsx("-my-1.5 ms-auto -me-1.5", closeButtonProps?.class),
+    color: closeButtonProps?.color ?? color,
+    ariaLabel: closeButtonProps?.ariaLabel ?? "Remove alert",
+    size: closeButtonProps?.size,
+    classes: closeButtonProps?.classes,
+    name: closeButtonProps?.name,
+    onclick: closeButtonProps?.onclick
+  });
 </script>
 
 {#if alertStatus}
-  <div role="alert" bind:this={ref} {...restProps} transition:transition={effectiveParams as ParamsType} class={divCls}>
+  <div data-scope="alert" data-part="base" role="alert" bind:this={ref} {...restProps} transition:transition={effectiveParams as ParamsType} class={divCls}>
     {#if icon}
       {@render icon()}
     {/if}
@@ -75,11 +85,11 @@
 
     {#if dismissable}
       {#if CloseIcon}
-        <CloseButton class="-my-1.5 ms-auto -me-1.5" color={closeColor ?? color} ariaLabel="Remove alert">
+        <CloseButton {...finalCloseProps}>
           <CloseIcon />
         </CloseButton>
       {:else}
-        <CloseButton class="-my-1.5 ms-auto -me-1.5" color={closeColor ?? color} ariaLabel="Remove alert" />
+        <CloseButton {...finalCloseProps} />
       {/if}
     {/if}
   </div>