wally-ui 1.2.1 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wally-ui",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "About Where’s Wally? Right here — bringing you ready-to-use Angular components with Wally-UI. Stop searching, start building.",
   "bin": {
     "wally": "dist/cli.js"

package/playground/showcase/package-lock.json

@@ -19,6 +19,7 @@
         "@tailwindcss/postcss": "^4.1.13",
         "express": "^5.1.0",
         "postcss": "^8.5.6",
+        "prismjs": "^1.30.0",
         "rxjs": "~7.8.0",
         "tailwindcss": "^4.1.13",
         "tslib": "^2.3.0",
@@ -31,6 +32,7 @@
         "@types/express": "^5.0.1",
         "@types/jasmine": "~5.1.0",
         "@types/node": "^20.17.19",
+        "@types/prismjs": "^1.26.5",
         "jasmine-core": "~5.7.0",
         "karma": "~6.4.0",
         "karma-chrome-launcher": "~3.2.0",
@@ -4252,6 +4254,13 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.5",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz",
+      "integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/qs": {
       "version": "6.14.0",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
@@ -8815,6 +8824,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/proc-log": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-5.0.0.tgz",

package/playground/showcase/package.json

@@ -32,6 +32,7 @@
     "@tailwindcss/postcss": "^4.1.13",
     "express": "^5.1.0",
     "postcss": "^8.5.6",
+    "prismjs": "^1.30.0",
     "rxjs": "~7.8.0",
     "tailwindcss": "^4.1.13",
     "tslib": "^2.3.0",
@@ -44,6 +45,7 @@
     "@types/express": "^5.0.1",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^20.17.19",
+    "@types/prismjs": "^1.26.5",
     "jasmine-core": "~5.7.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

package/playground/showcase/public/_headers

@@ -0,0 +1,7 @@
+/*
+  X-Robots-Tag: index, follow
+  X-Frame-Options: DENY
+  X-Content-Type-Options: nosniff
+
+/robots.txt
+  Cache-Control: public, max-age=3600

package/playground/showcase/public/robots.txt

@@ -0,0 +1,14 @@
+User-agent: *
+Allow: /
+
+User-agent: Googlebot
+Allow: /
+
+User-agent: Bingbot
+Allow: /
+
+User-agent: claudebot
+Allow: /
+
+User-agent: ChatGPT-User
+Allow: /

package/playground/showcase/src/app/app.routes.server.ts

@@ -6,11 +6,23 @@ export const serverRoutes: ServerRoute[] = [
     renderMode: RenderMode.Prerender
   },
   {
-    path: 'components',
+    path: 'documentation',
+    renderMode: RenderMode.Prerender,
+  },
+  {
+    path: 'documentation/components',
     renderMode: RenderMode.Prerender,
   },
   {
-    path: 'components/button',
+    path: 'documentation/components/button',
+    renderMode: RenderMode.Prerender,
+  },
+  {
+    path: 'documentation/components/breadcrumb',
+    renderMode: RenderMode.Prerender,
+  },
+  {
+    path: 'components',
     renderMode: RenderMode.Prerender,
   },
   {

package/playground/showcase/src/app/app.routes.ts

@@ -5,9 +5,13 @@ export const routes: Routes = [
         path: '',
         loadComponent: () => import('./pages/home/home').then(m => m.Home)
     },
+    {
+        path: 'documentation',
+        loadChildren: () => import('./pages/documentation/documentation.routes').then(m => m.documentationRoutes)
+    },
     {
         path: 'components',
-        loadChildren: () => import('./pages/components/components.routes').then(m => m.componentsRoutes)
+        redirectTo: '/documentation/components'
     },
     {
         path: 'mcp',

package/playground/showcase/src/app/components/input/input.html

@@ -0,0 +1,27 @@
+<div class="relative">
+    <!-- 
+        ps-11 pe-9 - add padding when there is an icon
+    -->
+    <input [type]="type()" [value]="value()" [disabled]="disabled" [placeholder]="placeholder()" class="
+        font-semibold
+        block 
+        w-full
+        bg-gray-100
+        rounded-lg
+        text-base md:text-sm
+        focus:outline-none focus:ring-2 focus:ring-gray-300
+        dark:bg-[#191919] dark:text-white dark:placeholder:text-gray-400 dark:focus:ring-gray-400
+        disabled:opacity-85 disabled:pointer-events-none
+        py-4 px-4
+        ">
+
+    <!-- <div
+        class="absolute inset-y-0 start-0 flex items-center pointer-events-none ps-4 peer-disabled:opacity-50 peer-disabled:pointer-events-none">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
+            class="flex-shrink-0 size-4 text-gray-500">
+            <path fill-rule="evenodd"
+                d="M1.5 4.5a3 3 0 0 1 3-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 0 1-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 0 0 6.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 0 1 1.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 0 1-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5Z"
+                clip-rule="evenodd" />
+        </svg>
+    </div> -->
+</div>

package/playground/showcase/src/app/{pages/components/button-docs/button-docs.spec.ts → components/input/input.spec.ts}

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ButtonDocs } from './button-docs';
+import { Input } from './input';
 
-describe('Button', () => {
-  let component: ButtonDocs;
-  let fixture: ComponentFixture<ButtonDocs>;
+describe('Input', () => {
+  let component: Input;
+  let fixture: ComponentFixture<Input>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ButtonDocs]
+      imports: [Input]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(ButtonDocs);
+    fixture = TestBed.createComponent(Input);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

package/playground/showcase/src/app/components/input/input.ts

@@ -0,0 +1,78 @@
+import { Component, effect, forwardRef, HostListener, input, InputSignal, model, signal, untracked, WritableSignal } from '@angular/core';
+
+import {
+  ControlValueAccessor,
+  NG_VALUE_ACCESSOR
+} from '@angular/forms';
+
+@Component({
+  selector: 'wally-input',
+  imports: [],
+  templateUrl: './input.html',
+  styleUrl: './input.css',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: Input,
+      multi: true
+    }
+  ]
+})
+export class Input implements ControlValueAccessor {
+  type: WritableSignal<string> = signal<string>('text');
+  // disabled: WritableSignal<boolean> = signal<boolean>(false);
+  disabled = false;
+  loading: WritableSignal<boolean> = signal<boolean>(false);
+  
+  placeholder: InputSignal<string> = input<string>('');
+
+  value = signal<string>('');
+
+  private touched = signal<boolean>(false);
+
+  private onChange = (value: any) => { };
+  private onTouched = () => { };
+
+  constructor() {
+    effect(() => {
+      const currentValue = this.value();
+      this.onChange(currentValue)
+    });
+  }
+
+  writeValue(obj: any): void {
+    untracked(() => {
+      this.value.set(obj || '');
+    })
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  @HostListener('input', ['$event'])
+  onInputChange(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.value.set(target.value);
+  }
+
+  @HostListener('blur')
+  onInputBlur(): void {
+    if (!this.touched()) {
+      this.touched.set(true);
+      this.onTouched();
+    }
+  }
+
+  onInputFocus(): void {
+
+  }
+}

package/playground/showcase/src/app/core/services/ai-prompt.service.ts

@@ -26,8 +26,8 @@ export class AiPromptService {
     if (isPlatformBrowser(this.platformId)) {
       return window.location.href;
     }
-    // Fallback for SSR - you can customize this
-    return 'https://wally-ui.com/components/button';
+    
+    return 'https://wally-ui.com/documentation/components/button';
   }
 
   generateCustomPromptUrl(aiService: 'claude' | 'chatgpt', customPrompt: string, pageUrl?: string): string {

package/playground/showcase/src/app/core/utils/prism.ts

@@ -0,0 +1,14 @@
+import * as Prism from 'prismjs';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-markup';
+
+export function highlightCode(code: string, language: string = 'typescript'): string {
+  return Prism.highlight(code, Prism.languages[language], language);
+}
+
+export function getFormattedCode(code: string, language: string = 'html'): string {
+  const cleanCode = code.trim();
+  return highlightCode(cleanCode, language);
+}

package/playground/showcase/src/app/pages/documentation/components/breadcrumb-docs/breadcrumb-docs.examples.ts

@@ -0,0 +1,71 @@
+// Breadcrumb documentation code examples
+export const BreadcrumbCodeExamples = {
+  // Installation
+  installation: `npx wally-ui add breadcrumb`,
+
+  // Import examples
+  import: `import { Breadcrumb, BreadcrumbItem } from './components/wally-ui/breadcrumb/breadcrumb';`,
+  componentImport: `@Component({
+  selector: 'app-example',
+  imports: [Breadcrumb],
+  templateUrl: './example.html',
+  styleUrl: './example.css'
+})`,
+
+  // Basic usage
+  basicUsage: `<wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>`,
+
+  // Component setup
+  componentSetup: `export class ExampleComponent {
+  breadcrumbItems: BreadcrumbItem[] = [
+    { label: 'Home', url: '/' },
+    { label: 'Products', url: '/products' },
+    { label: 'Category' }
+  ];
+}`,
+
+  // Basic setup for simple example
+  basicSetup: `breadcrumbItems: BreadcrumbItem[] = [
+  { label: 'Components' }
+];`,
+
+  // Specific examples
+  multiLevelSetup: `breadcrumbItems: BreadcrumbItem[] = [
+  { label: 'Home', url: '/' },
+  { label: 'Documentation', url: '/documentation' },
+  { label: 'Components', url: '/documentation/components' },
+  { label: 'Breadcrumb' }
+];`,
+
+  singleItemSetup: `breadcrumbItems: BreadcrumbItem[] = [
+  { label: 'Components' }
+];`,
+
+  // Interface
+  interface: `interface BreadcrumbItem {
+  label: string;
+  url?: string;
+}`,
+
+  // Advanced examples
+  withIcons: `<wally-breadcrumb [items]="breadcrumbItemsWithIcons"></wally-breadcrumb>`,
+
+  withIconsSetup: `breadcrumbItemsWithIcons: BreadcrumbItem[] = [
+  {
+    label: 'Home',
+    url: '/',
+    icon: '<svg>...</svg>'
+  },
+  {
+    label: 'Settings',
+    url: '/settings',
+    icon: '<svg>...</svg>'
+  },
+  { label: 'Profile' }
+];`,
+
+  // Properties
+  propertyItems: `items: BreadcrumbItem[] = [];`,
+  propertySeparator: `separator?: string = '/';`,
+  propertyMaxItems: `maxItems?: number;`
+};

package/playground/showcase/src/app/pages/{components → documentation/components}/breadcrumb-docs/breadcrumb-docs.html

@@ -47,9 +47,7 @@
     <section class="mb-8">
       <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Installation</h2>
       <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-        <code class="text-sm text-[#0a0a0a] dark:text-white">
-          npx wally-ui add breadcrumb
-        </code>
+        <pre><code [innerHTML]="installationCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
       </div>
     </section>
 
@@ -70,20 +68,11 @@
       <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Import</h2>
       <div class="space-y-4">
         <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-          <code class="text-sm text-[#0a0a0a] dark:text-white">
-            import {{ '{' }} Breadcrumb, BreadcrumbItem {{ '}' }} from './components/wally-ui/breadcrumb/breadcrumb';
-          </code>
+          <pre><code [innerHTML]="importCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
         </div>
 
         <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-          <code class="text-sm text-[#0a0a0a] dark:text-white">
-            &#64;Component({{ '{' }}<br>
-            &nbsp;&nbsp;selector: 'app-example',<br>
-            &nbsp;&nbsp;imports: [Breadcrumb],<br>
-            &nbsp;&nbsp;templateUrl: './example.html',<br>
-            &nbsp;&nbsp;styleUrl: './example.css'<br>
-            {{ '}' }})
-          </code>
+          <pre><code [innerHTML]="componentImportCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
         </div>
       </div>
     </section>
@@ -95,9 +84,10 @@
       <div class="space-y-8">
         <div>
           <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
-            <code class="text-sm text-[#0a0a0a] dark:text-white">
-              {{ '<' }}wally-breadcrumb [items]="breadcrumbItems"{{ '>' }}{{ '<' }}/wally-breadcrumb{{ '>' }}
-            </code>
+            <pre><code [innerHTML]="basicSetupCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <pre><code [innerHTML]="basicUsageCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
           </div>
           <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
             <wally-breadcrumb [items]="simpleBreadcrumbs"></wally-breadcrumb>
@@ -115,13 +105,7 @@
         <div>
           <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Multi-level Navigation</h3>
           <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
-            <code class="text-sm text-[#0a0a0a] dark:text-white">
-              breadcrumbItems: BreadcrumbItem[] = [<br>
-              &nbsp;&nbsp;{{ '{' }} label: 'Home', url: '/' {{ '}' }},<br>
-              &nbsp;&nbsp;{{ '{' }} label: 'Components', url: '/components' {{ '}' }},<br>
-              &nbsp;&nbsp;{{ '{' }} label: 'Button' {{ '}' }}<br>
-              ];
-            </code>
+            <pre><code [innerHTML]="multiLevelSetupCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
           </div>
           <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
             <wally-breadcrumb [items]="exampleBreadcrumbs"></wally-breadcrumb>
@@ -132,11 +116,7 @@
         <div>
           <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Single Item</h3>
           <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
-            <code class="text-sm text-[#0a0a0a] dark:text-white">
-              breadcrumbItems: BreadcrumbItem[] = [<br>
-              &nbsp;&nbsp;{{ '{' }} label: 'Components' {{ '}' }}<br>
-              ];
-            </code>
+            <pre><code [innerHTML]="singleItemSetupCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
           </div>
           <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
             <wally-breadcrumb [items]="simpleBreadcrumbs"></wally-breadcrumb>
@@ -150,14 +130,9 @@
       <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Properties</h2>
 
       <div class="space-y-4">
-        <div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
-          <div class="font-mono text-sm mb-2">
-            <span class="text-blue-600 dark:text-blue-400">items</span><span class="text-[#0a0a0a] dark:text-white">:
-            </span>
-            <span class="text-purple-600 dark:text-purple-400">BreadcrumbItem[]</span> <span
-              class="text-[#0a0a0a] dark:text-white"> = </span>
-            <span class="text-green-600 dark:text-green-400">[]</span>
-            <span class="text-[#0a0a0a] dark:text-white">;</span>
+        <div class="space-y-2">
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+            <pre><code [innerHTML]="propertyItemsCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
           </div>
           <p class="text-sm text-gray-700 dark:text-gray-400">Array of breadcrumb items to display</p>
         </div>
@@ -169,12 +144,7 @@
       <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Interface</h2>
 
       <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-        <code class="text-sm text-[#0a0a0a] dark:text-white">
-          interface BreadcrumbItem {{ '{' }}<br>
-          &nbsp;&nbsp;label: string;<br>
-          &nbsp;&nbsp;url?: string;<br>
-          {{ '}' }}
-        </code>
+        <pre><code [innerHTML]="interfaceCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
       </div>
     </section>
 

package/playground/showcase/src/app/pages/documentation/components/breadcrumb-docs/breadcrumb-docs.ts

@@ -0,0 +1,63 @@
+import { Component } from '@angular/core';
+
+import { Breadcrumb, BreadcrumbItem } from '../../../../components/breadcrumb/breadcrumb';
+
+import { AiPromptService } from '../../../../core/services/ai-prompt.service';
+import { getFormattedCode } from '../../../../core/utils/prism';
+
+import { BreadcrumbCodeExamples } from './breadcrumb-docs.examples';
+
+@Component({
+  selector: 'app-breadcrumb-docs',
+  imports: [
+    Breadcrumb
+  ],
+  templateUrl: './breadcrumb-docs.html',
+  styleUrl: './breadcrumb-docs.css'
+})
+export class BreadcrumbDocs {
+  breadcrumbItems: BreadcrumbItem[] = [
+    { label: 'Home', url: '/' },
+    { label: 'Documentation', url: '/documentation' },
+    { label: 'Components', url: '/documentation/components' },
+    { label: 'Breadcrumb' }
+  ];
+
+  exampleBreadcrumbs: BreadcrumbItem[] = [
+    { label: 'Home', url: '/' },
+    { label: 'Documentation', url: '/documentation' },
+    { label: 'Components', url: '/documentation/components' },
+    { label: 'Breadcrumb' }
+  ];
+
+  simpleBreadcrumbs: BreadcrumbItem[] = [
+    { label: 'Components' }
+  ];
+
+  installationCode = getFormattedCode(BreadcrumbCodeExamples.installation, 'bash');
+  importCode = getFormattedCode(BreadcrumbCodeExamples.import, 'typescript');
+  componentImportCode = getFormattedCode(BreadcrumbCodeExamples.componentImport, 'typescript');
+  basicUsageCode = getFormattedCode(BreadcrumbCodeExamples.basicUsage, 'html');
+  componentSetupCode = getFormattedCode(BreadcrumbCodeExamples.componentSetup, 'typescript');
+  basicSetupCode = getFormattedCode(BreadcrumbCodeExamples.basicSetup, 'typescript');
+  multiLevelSetupCode = getFormattedCode(BreadcrumbCodeExamples.multiLevelSetup, 'typescript');
+  singleItemSetupCode = getFormattedCode(BreadcrumbCodeExamples.singleItemSetup, 'typescript');
+  interfaceCode = getFormattedCode(BreadcrumbCodeExamples.interface, 'typescript');
+  withIconsCode = getFormattedCode(BreadcrumbCodeExamples.withIcons, 'html');
+  withIconsSetupCode = getFormattedCode(BreadcrumbCodeExamples.withIconsSetup, 'typescript');
+  propertyItemsCode = getFormattedCode(BreadcrumbCodeExamples.propertyItems, 'typescript');
+  propertySeparatorCode = getFormattedCode(BreadcrumbCodeExamples.propertySeparator, 'typescript');
+  propertyMaxItemsCode = getFormattedCode(BreadcrumbCodeExamples.propertyMaxItems, 'typescript');
+
+  constructor(
+    private aiPromptService: AiPromptService
+  ) { }
+
+  get claudeUrl(): string {
+    return this.aiPromptService.generateClaudeUrl();
+  }
+
+  get chatGptUrl(): string {
+    return this.aiPromptService.generateChatGptUrl();
+  }
+}

package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.examples.ts

@@ -0,0 +1,55 @@
+// Button documentation code examples
+export const ButtonCodeExamples = {
+  // Installation
+  installation: `npx wally-ui add button`,
+
+  // Import examples
+  import: `import { Button } from './components/wally-ui/button/button';`,
+  componentImport: `@Component({
+  selector: 'app-example',
+  imports: [Button],
+  templateUrl: './example.html',
+  styleUrl: './example.css'
+})`,
+
+  // Basic usage
+  basicUsage: `<wally-button>Wally Button</wally-button>`,
+
+  // States
+  disabled: `<wally-button [disabled]="true">Disabled</wally-button>`,
+  loading: `<wally-button [loading]="true">Loading</wally-button>`,
+  notification: `<wally-button [showNotification]="true">Messages</wally-button>`,
+
+  // Types
+  submit: `<wally-button type="submit">Submit Form</wally-button>`,
+
+  // Events
+  clickTemplate: `<wally-button (click)="handleClick()">Click Me</wally-button>`,
+  clickMethod: `handleClick(): void {
+  this.clickMessage.set('Button clicked!');
+}`,
+
+  // Icons
+  iconWithText: `<wally-button>
+  Save
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+       stroke-width="1.5" stroke="currentColor" class="size-5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+  </svg>
+</wally-button>`,
+
+  iconOnly: `<wally-button>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+       stroke-width="1.5" stroke="currentColor" class="size-5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" />
+  </svg>
+</wally-button>`,
+
+  // Properties
+  propertyType: `type: string = 'button';`,
+  propertyDisabled: `disabled: boolean = false;`,
+  propertyLoading: `loading: boolean = false;`,
+  propertyShowNotification: `showNotification: boolean = false;`,
+};