1.1.0

apps/docs/docs/components/accordion/_always-open.component.html

@@ -2,7 +2,7 @@
   <flowbite-accordion-panel [isOpen]="true">
     <flowbite-accordion-title>What is Flowbite ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           Flowbite is an open-source library of interactive components built on top of Tailwind CSS
           including buttons, dropdowns, modals, navbars, and more.
@@ -16,13 +16,13 @@
           </a>
           and start developing websites even faster with components on top of Tailwind CSS.
         </p>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
     <flowbite-accordion-title>Is there a Figma file available ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           Flowbite is first conceptualized and designed using the Figma software so everything you
           see in the library has a design equivalent in our Figma file.
@@ -32,15 +32,15 @@
           <a href="https://flowbite.com/figma/">Figma design system</a>
           based on the utility classes from Tailwind CSS and components from Flowbite.
         </p>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
     <flowbite-accordion-title>
       What are the differences between Flowbite and Tailwind UI ?
     </flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           The main difference is that the core components from Flowbite are open source under the
           MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
@@ -70,7 +70,7 @@
             </a>
           </li>
         </ul>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
 </flowbite-accordion>

apps/docs/docs/components/accordion/_color-option.component.html

@@ -2,7 +2,7 @@
   <flowbite-accordion-panel [isOpen]="true">
     <flowbite-accordion-title>What is Flowbite ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           Flowbite is an open-source library of interactive components built on top of Tailwind CSS
           including buttons, dropdowns, modals, navbars, and more.
@@ -16,13 +16,13 @@
           </a>
           and start developing websites even faster with components on top of Tailwind CSS.
         </p>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
     <flowbite-accordion-title>Is there a Figma file available ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           Flowbite is first conceptualized and designed using the Figma software so everything you
           see in the library has a design equivalent in our Figma file.
@@ -32,15 +32,15 @@
           <a href="https://flowbite.com/figma/">Figma design system</a>
           based on the utility classes from Tailwind CSS and components from Flowbite.
         </p>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
     <flowbite-accordion-title>
       What are the differences between Flowbite and Tailwind UI ?
     </flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           The main difference is that the core components from Flowbite are open source under the
           MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
@@ -70,7 +70,7 @@
             </a>
           </li>
         </ul>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
 </flowbite-accordion>

apps/docs/docs/components/accordion/_default.component.html

@@ -2,7 +2,7 @@
   <flowbite-accordion-panel [isOpen]="true">
     <flowbite-accordion-title>What is Flowbite ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           Flowbite is an open-source library of interactive components built on top of Tailwind CSS
           including buttons, dropdowns, modals, navbars, and more.
@@ -16,13 +16,13 @@
           </a>
           and start developing websites even faster with components on top of Tailwind CSS.
         </p>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
     <flowbite-accordion-title>Is there a Figma file available ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           Flowbite is first conceptualized and designed using the Figma software so everything you
           see in the library has a design equivalent in our Figma file.
@@ -32,15 +32,15 @@
           <a href="https://flowbite.com/figma/">Figma design system</a>
           based on the utility classes from Tailwind CSS and components from Flowbite.
         </p>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
     <flowbite-accordion-title>
       What are the differences between Flowbite and Tailwind UI ?
     </flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           The main difference is that the core components from Flowbite are open source under the
           MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
@@ -70,7 +70,7 @@
             </a>
           </li>
         </ul>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
 </flowbite-accordion>

apps/docs/docs/components/accordion/_flush.component.html

@@ -2,7 +2,7 @@
   <flowbite-accordion-panel [isOpen]="true">
     <flowbite-accordion-title>What is Flowbite ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           Flowbite is an open-source library of interactive components built on top of Tailwind CSS
           including buttons, dropdowns, modals, navbars, and more.
@@ -16,13 +16,13 @@
           </a>
           and start developing websites even faster with components on top of Tailwind CSS.
         </p>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
     <flowbite-accordion-title>Is there a Figma file available ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           Flowbite is first conceptualized and designed using the Figma software so everything you
           see in the library has a design equivalent in our Figma file.
@@ -32,15 +32,15 @@
           <a href="https://flowbite.com/figma/">Figma design system</a>
           based on the utility classes from Tailwind CSS and components from Flowbite.
         </p>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
     <flowbite-accordion-title>
       What are the differences between Flowbite and Tailwind UI ?
     </flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           The main difference is that the core components from Flowbite are open source under the
           MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
@@ -70,7 +70,7 @@
             </a>
           </li>
         </ul>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
 </flowbite-accordion>

apps/docs/docs/components/dropdown/_header.component.html

@@ -1,8 +1,9 @@
 <flowbite-dropdown>
   <flowbite-dropdown-header>
-    <span className="block text-sm">Bonnie Green</span>
-    <span className="block truncate text-sm font-medium">bonnie&#64;flowbite.com</span>
+    <span class="block text-sm">Bonnie Green</span>
+    <span class="block truncate text-sm font-medium">bonnie&#64;flowbite.com</span>
   </flowbite-dropdown-header>
+  <flowbite-dropdown-divider />
   <flowbite-dropdown-item>Item 1</flowbite-dropdown-item>
   <flowbite-dropdown-item>Item 2</flowbite-dropdown-item>
   <flowbite-dropdown-item>Item 3</flowbite-dropdown-item>

apps/docs/docs/components/dropdown/_header.component.ts

@@ -1,5 +1,6 @@
 import {
   DropdownComponent,
+  DropdownDividerComponent,
   DropdownHeaderComponent,
   DropdownItemComponent,
 } from 'flowbite-angular/dropdown';
@@ -9,7 +10,12 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'flowbite-demo-dropdown-header',
   standalone: true,
-  imports: [DropdownComponent, DropdownItemComponent, DropdownHeaderComponent],
+  imports: [
+    DropdownComponent,
+    DropdownItemComponent,
+    DropdownHeaderComponent,
+    DropdownDividerComponent,
+  ],
   templateUrl: '_header.component.html',
   host: {
     class: 'flex flex wrap flex-row gap-3',

apps/docs/docs/customize/dark-mode/index.md

@@ -0,0 +1,35 @@
+---
+keyword: DarkModePage
+---
+
+## Enable dark mode
+
+All you need to do is add `FlowbiteThemeDirective` as a `hostDirectives` in you `app.component.ts`.
+
+```angular-ts
+...
+import { FlowbiteThemeDirective } from 'flowbite-angular/theme';
+...
+
+@Component({
+  ...
+  hostDirectives: [FlowbiteThemeDirective],
+})
+export class AppComponent {
+  ...
+}
+```
+
+If your TailwindCSS configuration is based on the one provided by flowbite-angular, then everything
+will be set up. Otherwise, you have to update your TailwindCSS configuration like this :
+
+```javascript
+module.exports = {
+  darkMode: 'class',
+};
+```
+
+## Get or set theme manually
+
+In order to access or to update the application theme manually, you simply have to inject
+`FlowbiteThemeDirective` into your component and call one of the provided functions.

apps/docs/docs/customize/dark-mode/ng-doc.page.ts

@@ -0,0 +1,17 @@
+import CustomizeCategory from '../ng-doc.category';
+
+import type { NgDocPage } from '@ng-doc/core';
+
+/**
+ * Add dark theme to your application.
+ *
+ * @status:info NEW
+ */
+const darkMode: NgDocPage = {
+  title: 'Dark mode',
+  mdFile: './index.md',
+  category: CustomizeCategory,
+  order: 6,
+};
+
+export default darkMode;

apps/docs/docs/customize/inherit-component/ng-doc.page.ts

@@ -11,7 +11,7 @@ const OverrideBaseStyle: NgDocPage = {
   title: 'Inherit component',
   mdFile: './index.md',
   category: CustomizeCategory,
-  order: 4,
+  order: 5,
 };
 
 export default OverrideBaseStyle;

apps/docs/docs/customize/override-component-default-value/index.md

@@ -0,0 +1,34 @@
+---
+keyword: OverrideComponentBaseValue
+---
+
+Each components provide a set of input to customize their behavior.
+
+They are named following this pattern :
+
+<span class="text-xs md:text-base">
+
+FLOWBITE\_<span class="text-primary-500">COMPONENT_NAME</span>\_<span class="text-primary-500">INPUT_NAME</span>\_DEFAULT_VALUE
+
+</span>
+
+In order to modify the default value of an input, you have to add, after `initFlowbite` function, a
+new `Provider` with its value :
+
+```angular-ts
+import { FLOWBITE_ALERT_HAS_BORDER_DEFAULT_VALUE } from 'flowbite-angular/alert';
+import { initFlowbite } from 'flowbite-angular/core';
+import { ApplicationConfig } from '@angular/core';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    ...,
+    initFlowbite(),
+    {
+      provide: FLOWBITE_ALERT_HAS_BORDER_DEFAULT_VALUE,
+      useValue: true,
+    },
+  ],
+};
+
+```

apps/docs/docs/customize/override-component-default-value/ng-doc.page.ts

@@ -0,0 +1,17 @@
+import CustomizeCategory from '../ng-doc.category';
+
+import type { NgDocPage } from '@ng-doc/core';
+
+/**
+ * Customize flowbite-angular's component input default value.
+ *
+ * @status:info NEW
+ */
+const OverrideComponentDefaultValue: NgDocPage = {
+  title: 'Override component default value',
+  mdFile: './index.md',
+  category: CustomizeCategory,
+  order: 3,
+};
+
+export default OverrideComponentDefaultValue;

apps/docs/docs/customize/use-custom-style/ng-doc.page.ts

@@ -11,7 +11,7 @@ const UseCustomStyle: NgDocPage = {
   title: 'Use custom style',
   mdFile: './index.md',
   category: CustomizeCategory,
-  order: 3,
+  order: 4,
 };
 
 export default UseCustomStyle;

apps/docs/docs/ng-doc.api.ts

@@ -34,6 +34,7 @@ const api: NgDocApi = {
         'libs/flowbite-angular/navbar/index.ts',
         'libs/flowbite-angular/scroll-top/index.ts',
         'libs/flowbite-angular/sidebar/index.ts',
+        'libs/flowbite-angular/theme/index.ts',
       ],
     },
     {