🚧 chore: fixed two commit messages

.prettierrc

@@ -2,5 +2,6 @@
   "singleQuote": true,
   "printWidth": 120,
   "arrowParens": "avoid",
+  "htmlWhitespaceSensitivity": "ignore",
   "plugins": ["prettier-plugin-tailwindcss"]
 }

apps/web/prerender-routes.txt

@@ -2,14 +2,19 @@
 /docs
 /docs/components
 /blocks
+/colors
 /docs/introduction
+/docs/components
+/docs/roadmap
+/docs/changelog
 /docs/installation
 /docs/components-json
 /docs/theming
 /docs/dark-mode
 /docs/cli
+/docs/blocks
+/docs/pre-processors
 /docs/figma
-/docs/changelog
 /docs/about
 /docs/components/accordion
 /docs/components/alert
@@ -18,8 +23,10 @@
 /docs/components/badge
 /docs/components/breadcrumb
 /docs/components/button
+/docs/components/button-group
 /docs/components/calendar
 /docs/components/card
+/docs/components/carousel
 /docs/components/checkbox
 /docs/components/combobox
 /docs/components/command
@@ -47,9 +54,9 @@
 /docs/components/menu
 /docs/components/resizable
 /docs/components/sheet
-/docs/components/layout
 /docs/components/radio
 /docs/components/segmented
 /docs/components/loader
 /docs/components/dropdown
-/docs/components/popover
+/docs/components/popover
+/docs/components/kbd

apps/web/project.json

@@ -34,7 +34,8 @@
         "prerender": {
           "discoverRoutes": false,
           "routesFile": "apps/web/prerender-routes.txt"
-        }
+        },
+        "allowedCommonJsDependencies": ["xmlbuilder", "parse-numeric-range", "extend"]
       },
       "configurations": {
         "production": {

apps/web/public/components/accordion/demo/basic.md

@@ -6,22 +6,23 @@ import { ZardAccordionComponent } from '../accordion.component';
 
 @Component({
   selector: 'z-demo-accordion-basic',
-  standalone: true,
   imports: [ZardAccordionComponent, ZardAccordionItemComponent],
+  standalone: true,
   template: `
     <z-accordion zDefaultValue="item-2">
       <z-accordion-item zValue="item-1" zTitle="A Study in Scarlet">
-        The first case of Sherlock Holmes and Dr. Watson. They investigate a murder in London, which leads to a backstory involving Mormons in the U.S. Introduces Holmes’s
-        deductive method.
+        The first case of Sherlock Holmes and Dr. Watson. They investigate a murder in London, which leads to a
+        backstory involving Mormons in the U.S. Introduces Holmes’s deductive method.
       </z-accordion-item>
 
       <z-accordion-item zValue="item-2" zTitle="The Sign of Four" zDescription="Sir Arthur Conan Doyle">
-        The first case of Sherlock Holmes and Dr. Watson. They investigate a murder in London, which leads to a backstory involving Mormons in the U.S. Introduces Holmes’s
-        deductive method.</z-accordion-item
+        The first case of Sherlock Holmes and Dr. Watson. They investigate a murder in London, which leads to a
+        backstory involving Mormons in the U.S. Introduces Holmes’s deductive method.</z-accordion-item
       >
 
       <z-accordion-item zValue="item-3" zTitle="The Hound of the Baskervilles">
-        Holmes and Watson investigate the legend of a demonic hound haunting the Baskerville family. Set in the eerie Dartmoor moorlands, the story involves betrayal and greed.
+        Holmes and Watson investigate the legend of a demonic hound haunting the Baskerville family. Set in the eerie
+        Dartmoor moorlands, the story involves betrayal and greed.
       </z-accordion-item>
     </z-accordion>
   `,

apps/web/public/components/accordion/demo/multiple.md

@@ -6,22 +6,23 @@ import { ZardAccordionComponent } from '../accordion.component';
 
 @Component({
   selector: 'z-demo-accordion-multiple',
-  standalone: true,
   imports: [ZardAccordionComponent, ZardAccordionItemComponent],
+  standalone: true,
   template: `
     <z-accordion zType="multiple">
       <z-accordion-item zValue="item-1" zTitle="A Study in Scarlet">
-        The first case of Sherlock Holmes and Dr. Watson. They investigate a murder in London, which leads to a backstory involving Mormons in the U.S. Introduces Holmes’s
-        deductive method.
+        The first case of Sherlock Holmes and Dr. Watson. They investigate a murder in London, which leads to a
+        backstory involving Mormons in the U.S. Introduces Holmes’s deductive method.
       </z-accordion-item>
 
       <z-accordion-item zValue="item-2" zTitle="The Sign of Four" zDescription="Sir Arthur Conan Doyle">
-        The first case of Sherlock Holmes and Dr. Watson. They investigate a murder in London, which leads to a backstory involving Mormons in the U.S. Introduces Holmes’s
-        deductive method.</z-accordion-item
+        The first case of Sherlock Holmes and Dr. Watson. They investigate a murder in London, which leads to a
+        backstory involving Mormons in the U.S. Introduces Holmes’s deductive method.</z-accordion-item
       >
 
       <z-accordion-item zValue="item-3" zTitle="The Hound of the Baskervilles">
-        Holmes and Watson investigate the legend of a demonic hound haunting the Baskerville family. Set in the eerie Dartmoor moorlands, the story involves betrayal and greed.
+        Holmes and Watson investigate the legend of a demonic hound haunting the Baskerville family. Set in the eerie
+        Dartmoor moorlands, the story involves betrayal and greed.
       </z-accordion-item>
     </z-accordion>
   `,

apps/web/public/components/alert-dialog/demo/default.md

@@ -1,13 +1,13 @@
 ```angular-ts showLineNumbers copyButton
-import { ZardButtonComponent } from '../../button/button.component';
 import { Component, inject } from '@angular/core';
 
+import { ZardButtonComponent } from '../../button/button.component';
 import { ZardAlertDialogService } from '../alert-dialog.service';
 
 @Component({
   selector: 'zard-demo-alert-dialog-default',
-  standalone: true,
   imports: [ZardButtonComponent],
+  standalone: true,
   template: ` <button z-button zType="outline" (click)="showDialog()">Show Dialog</button> `,
 })
 export class ZardDemoAlertDialogDefaultComponent {
@@ -16,7 +16,8 @@ export class ZardDemoAlertDialogDefaultComponent {
   showDialog() {
     this.alertDialogService.confirm({
       zTitle: 'Are you absolutely sure?',
-      zDescription: 'This action cannot be undone. This will permanently delete your account and remove your data from our servers.',
+      zDescription:
+        'This action cannot be undone. This will permanently delete your account and remove your data from our servers.',
       zOkText: 'Continue',
       zCancelText: 'Cancel',
     });

apps/web/public/components/alert/demo/basic.md

@@ -6,12 +6,15 @@ import { ZardAlertComponent } from '../alert.component';
 
 @Component({
   selector: 'z-demo-alert-basic',
-  standalone: true,
   imports: [ZardAlertComponent, ZardIconComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
   template: `
     <div class="grid w-full max-w-xl items-start gap-4">
-      <z-alert zIcon="circle-check" zTitle="Success! Your changes have been saved" zDescription="This is an alert with icon, title and description." />
+      <z-alert
+        zIcon="circle-check"
+        zTitle="Success! Your changes have been saved"
+        zDescription="This is an alert with icon, title and description."
+      />
 
       <z-alert [zIcon]="customIcon" zTitle="This Alert has a title and an icon. No description." />
 
@@ -31,6 +34,7 @@ import { ZardAlertComponent } from '../alert.component';
       </ng-template>
     </div>
   `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ZardDemoAlertBasicComponent {}
 

apps/web/public/components/avatar/demo/basic.md

@@ -6,8 +6,8 @@ import { ZardAvatarComponent } from '../avatar.component';
 
 @Component({
   selector: 'z-demo-avatar-basic',
-  standalone: true,
   imports: [ZardAvatarComponent, ZardAvatarGroupComponent],
+  standalone: true,
   template: `
     <z-avatar zSrc="/images/avatar/imgs/avatar_image.jpg" zFallback="ZA" [zSize]="32" />
     <z-avatar zSrc="error-image.png" zFallback="ZA" zSize="sm" />

apps/web/public/components/avatar/demo/status.md

@@ -5,8 +5,8 @@ import { ZardAvatarComponent } from '../avatar.component';
 
 @Component({
   selector: 'z-demo-avatar-status',
-  standalone: true,
   imports: [ZardAvatarComponent],
+  standalone: true,
   template: `
     <z-avatar zSrc="/images/avatar/imgs/avatar_image.jpg" zAlt="Image" />
     <z-avatar zStatus="online" zSrc="/images/avatar/imgs/avatar_image.jpg" zAlt="Image" />

apps/web/public/components/badge/demo/default.md

@@ -6,8 +6,8 @@ import { ZardBadgeComponent } from '../badge.component';
 
 @Component({
   selector: 'z-demo-badge-default',
-  standalone: true,
   imports: [ZardBadgeComponent, ZardIconComponent],
+  standalone: true,
   template: `
     <div class="flex flex-col items-center gap-2">
       <div class="flex w-full flex-wrap gap-2">
@@ -18,7 +18,7 @@ import { ZardBadgeComponent } from '../badge.component';
       </div>
       <div class="flex w-full flex-wrap gap-2">
         <z-badge zType="secondary" class="bg-blue-500 text-white dark:bg-blue-600">
-          <z-icon zType="badge-check"></z-icon>
+          <z-icon zType="badge-check" />
           Verified
         </z-badge>
         <z-badge zShape="pill" class="h-5 min-w-5 px-1 font-mono tabular-nums">8</z-badge>

apps/web/public/components/breadcrumb/demo/default.md

@@ -6,8 +6,8 @@ import { ZardBreadcrumbModule } from '../breadcrumb.module';
 
 @Component({
   selector: 'z-demo-breadcrumb-default',
-  standalone: true,
   imports: [ZardBreadcrumbModule, ZardIconComponent],
+  standalone: true,
   template: `
     <z-breadcrumb zWrap="wrap" zAlign="start">
       <z-breadcrumb-item [routerLink]="['/']">

apps/web/public/components/breadcrumb/demo/ellipsis.md

@@ -6,8 +6,8 @@ import { ZardBreadcrumbModule } from '../breadcrumb.module';
 
 @Component({
   selector: 'z-demo-breadcrumb-ellipsis',
-  standalone: true,
   imports: [ZardBreadcrumbModule, ZardMenuModule],
+  standalone: true,
   template: `
     <z-breadcrumb>
       <z-breadcrumb-item [routerLink]="['/']">Home</z-breadcrumb-item>

apps/web/public/components/breadcrumb/demo/separator.md

@@ -6,8 +6,8 @@ import { ZardBreadcrumbModule } from '../breadcrumb.module';
 
 @Component({
   selector: 'z-demo-breadcrumb-separator',
-  standalone: true,
   imports: [ZardBreadcrumbModule, ZardIconComponent],
+  standalone: true,
   template: `
     <z-breadcrumb [zSeparator]="customSeparator">
       <z-breadcrumb-item>Home</z-breadcrumb-item>
@@ -16,7 +16,7 @@ import { ZardBreadcrumbModule } from '../breadcrumb.module';
     </z-breadcrumb>
 
     <ng-template #customSeparator>
-      <z-icon zType="arrow-right"></z-icon>
+      <z-icon zType="arrow-right" />
     </ng-template>
   `,
 })

apps/web/public/components/button-group/demo/default.md

@@ -33,7 +33,7 @@ import { ZardButtonGroupComponent } from '../button-group.component';
               <button z-menu-item><i z-icon zType="check"></i> Mark as Read</button>
               <button z-menu-item><i z-icon zType="archive"></i> Archive</button>
 
-              <z-divider zSpacing="sm"></z-divider>
+              <z-divider zSpacing="sm" />
 
               <button z-menu-item><i z-icon zType="clock"></i> Snooze</button>
               <button z-menu-item><i z-icon zType="calendar-plus"></i> Add to Calendar</button>
@@ -51,7 +51,7 @@ import { ZardButtonGroupComponent } from '../button-group.component';
                 </ng-template>
               </button>
 
-              <z-divider zSpacing="sm"></z-divider>
+              <z-divider zSpacing="sm" />
 
               <button z-menu-item class="text-red-500"><i z-icon zType="trash"></i> Trash</button>
             </div>

apps/web/public/components/button-group/demo/select.md

@@ -27,6 +27,7 @@ export class ZardDemoButtonGroupSelectComponent {
     { symbol: '£', code: 'GBP' },
     { symbol: '¥', code: 'JPY' },
   ];
+
   protected readonly currency = signal(this.CURRENCIES[1].code);
 }
 

apps/web/public/components/button-group/demo/size.md

@@ -8,9 +8,6 @@ import { ZardButtonGroupComponent } from '../button-group.component';
 @Component({
   selector: 'z-demo-button-group-size',
   imports: [ZardButtonGroupComponent, ZardButtonComponent, ZardIconComponent],
-  host: {
-    class: 'flex flex-col items-start gap-4',
-  },
   template: `
     <z-button-group>
       <button z-button zType="outline" zSize="sm">Small</button>
@@ -30,6 +27,9 @@ import { ZardButtonGroupComponent } from '../button-group.component';
       <button z-button zType="outline" zSize="lg"><i z-icon zType="plus"></i></button>
     </z-button-group>
   `,
+  host: {
+    class: 'flex flex-col items-start gap-4',
+  },
 })
 export class ZardDemoButtonGroupSizeComponent {}
 

apps/web/public/components/button/demo/default.md

@@ -6,8 +6,8 @@ import { ZardButtonComponent } from '../button.component';
 
 @Component({
   selector: 'z-demo-button-default',
-  standalone: true,
   imports: [ZardButtonComponent, ZardIconComponent],
+  standalone: true,
   template: `
     <button z-button zType="outline">Button</button>
     <button z-button zType="outline"><i z-icon zType="arrow-up"></i></button>

apps/web/public/components/button/demo/full.md

@@ -5,8 +5,8 @@ import { ZardButtonComponent } from '../button.component';
 
 @Component({
   selector: 'z-demo-button-full',
-  standalone: true,
   imports: [ZardButtonComponent],
+  standalone: true,
   template: ` <button z-button zFull>Default</button> `,
 })
 export class ZardDemoButtonFullComponent {}

apps/web/public/components/button/demo/link.md

@@ -5,8 +5,8 @@ import { ZardButtonComponent } from '../button.component';
 
 @Component({
   selector: 'z-demo-button-link',
-  standalone: true,
   imports: [ZardButtonComponent],
+  standalone: true,
   template: ` <button z-button zType="link">Link</button> `,
 })
 export class ZardDemoButtonLinkComponent {}

apps/web/public/components/button/demo/loading.md

@@ -5,8 +5,8 @@ import { ZardButtonComponent } from '../button.component';
 
 @Component({
   selector: 'z-demo-button-loading',
-  standalone: true,
   imports: [ZardButtonComponent],
+  standalone: true,
   template: ` <button z-button zLoading>Default</button> `,
 })
 export class ZardDemoButtonLoadingComponent {}

apps/web/public/components/button/demo/shape.md

@@ -5,8 +5,8 @@ import { ZardButtonComponent } from '../button.component';
 
 @Component({
   selector: 'z-demo-button-shape',
-  standalone: true,
   imports: [ZardButtonComponent],
+  standalone: true,
   template: `
     <button z-button>Default</button>
     <button z-button zShape="circle">Circle</button>

apps/web/public/components/button/demo/size.md

@@ -6,23 +6,23 @@ import { ZardButtonComponent } from '../button.component';
 
 @Component({
   selector: 'z-demo-button-size',
-  standalone: true,
   imports: [ZardButtonComponent, ZardIconComponent],
+  standalone: true,
   template: `
     <div class="flex flex-col items-center">
       <div class="mb-4 flex gap-2">
         <button z-button zSize="sm">Small</button>
-        <button z-button zSize="sm"><z-icon zType="arrow-up"></z-icon></button>
+        <button z-button zSize="sm"><z-icon zType="arrow-up" /></button>
       </div>
 
       <div class="mb-4 flex gap-2">
         <button z-button>Default</button>
-        <button z-button><z-icon zType="arrow-up"></z-icon></button>
+        <button z-button><z-icon zType="arrow-up" /></button>
       </div>
 
       <div class="mb-4 flex gap-2">
         <button z-button zSize="lg">Large</button>
-        <button z-button zSize="lg"><z-icon zType="arrow-up"></z-icon></button>
+        <button z-button zSize="lg"><z-icon zType="arrow-up" /></button>
       </div>
     </div>
   `,

apps/web/public/components/button/demo/type.md

@@ -5,8 +5,8 @@ import { ZardButtonComponent } from '../button.component';
 
 @Component({
   selector: 'z-demo-button-type',
-  standalone: true,
   imports: [ZardButtonComponent],
+  standalone: true,
   template: `
     <button z-button zSize="sm">Default</button>
     <button z-button zSize="sm" zType="outline">Outline</button>