Merge branch 'develop'

fractal/components/02-display/avatar/01-avatar--size.edge

@@ -1,6 +1,6 @@
 <div>
-  @!jrmc.avatar({ url: 'https://placeimg.com/192/192/people', class: 'w-32 rounded' })
-  @!jrmc.avatar({ url: 'https://placeimg.com/192/192/people', class: 'w-20 rounded' })
-  @!jrmc.avatar({ url: 'https://placeimg.com/192/192/people', class: 'w-16 rounded' })
-  @!jrmc.avatar({ url: 'https://placeimg.com/192/192/people', class: 'w-8 rounded' })
+  @!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-32 rounded' })
+  @!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-20 rounded' })
+  @!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-16 rounded' })
+  @!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-8 rounded' })
 </div>

fractal/components/02-display/avatar/02-avatar--rounded.edge

@@ -1,2 +1,2 @@
-@!jrmc.avatar({ url: 'https://placeimg.com/192/192/people', class: 'w-24 rounded-xl' })
-@!jrmc.avatar({ url: 'https://placeimg.com/192/192/people', class: 'w-24 rounded-full' })
+@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-24 rounded-xl' })
+@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-24 rounded-full' })

fractal/components/02-display/avatar/03-avatar--mask.edge

@@ -1,4 +1,4 @@
-@!jrmc.avatar({ url: 'https://placeimg.com/192/192/people', class: 'w-24 mask mask-squircle' })
-@!jrmc.avatar({ url: 'https://placeimg.com/192/192/people', class: 'w-24 mask mask-hexagon' })
-@!jrmc.avatar({ url: 'https://placeimg.com/192/192/people', class: 'w-24 mask mask-triangle' })
+@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-24 mask mask-squircle' })
+@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-24 mask mask-hexagon' })
+@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-24 mask mask-triangle' })
 

fractal/components/02-display/avatar/04-avatar--group.edge

@@ -1,5 +1,5 @@
 @jrmc.avatar.group()
-  @!jrmc.avatar({ url: 'https://placeimg.com/192/192/people', class: 'w-12' })
-  @!jrmc.avatar({ url: 'https://placeimg.com/192/192/people', class: 'w-12' })
-  @!jrmc.avatar({ url: 'https://placeimg.com/192/192/people', class: 'w-12' })
+  @!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-12' })
+  @!jrmc.avatar({ url: 'https://picsum.photos/id/65/192/192', class: 'w-12' })
+  @!jrmc.avatar({ url: 'https://picsum.photos/id/338/192/192', class: 'w-12' })
 @end

fractal/components/02-display/avatar/05-avatar--group2.edge

@@ -1,5 +1,5 @@
 @jrmc.avatar.group({ class: '-space-x-12' })
-  @!jrmc.avatar({ url: 'https://placeimg.com/192/192/people' })
-  @!jrmc.avatar({ url: 'https://placeimg.com/192/192/people' })
+  @!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192' })
+  @!jrmc.avatar({ url: 'https://picsum.photos/id/65/192/192' })
   @!jrmc.avatar({ placeholder: '+99' })
 @end

fractal/components/02-display/avatar/06-avatar--ring.edge

@@ -1 +1 @@
-@!jrmc.avatar({ url: 'https://placeimg.com/192/192/people', class: 'w-24 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2' })
+@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-24 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2' })

fractal/components/02-display/avatar/07-avatar--status.edge

@@ -1,2 +1,2 @@
-@!jrmc.avatar({ url: 'https://placeimg.com/192/192/people', status: 'online', class: 'w-24 rounded-full' })
-@!jrmc.avatar({ url: 'https://placeimg.com/192/192/people', status: 'offline', class: 'w-24 rounded-full' })
+@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', status: 'online', class: 'w-24 rounded-full' })
+@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', status: 'offline', class: 'w-24 rounded-full' })

fractal/components/02-display/avatar/avatar.edge

@@ -1,7 +1,7 @@
 <div>
-  @!jrmc.avatar({ url: 'https://placeimg.com/192/192/people' })
+  @!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192' })
 
   @jrmc.avatar()
-    <img src="https://placeimg.com/192/192/people" alt="Text alt" />
+    <img src="https://picsum.photos/id/64/192/192" alt="Text alt" />
   @end
 </div>

fractal/components/02-display/card/01-card.edge

@@ -1,6 +1,6 @@
 @jrmc.card()
   @slot('top')
-    <figure><img src="https://placeimg.com/400/225/arch" alt="Shoes" /></figure>
+    <figure><img src="https://picsum.photos/400/225" alt="Shoes" /></figure>
   @end
   @jrmc.card.body()
     @!jrmc.card.title({ text: 'Shoes!' })

fractal/components/02-display/card/02-card--compact.edge

@@ -1,6 +1,6 @@
 @jrmc.card({ class: 'card-compact w-96 bg-base-100 shadow-xl' })
   @slot('top')
-    <figure><img src="https://placeimg.com/400/225/arch" alt="Shoes" /></figure>
+    <figure><img src="https://picsum.photos/400/225" alt="Shoes" /></figure>
   @end
   @jrmc.card.body()
     @!jrmc.card.title({ text: 'Shoes!' })

fractal/components/02-display/card/03-card--badge.edge

@@ -1,6 +1,6 @@
 @jrmc.card()
   @slot('top')
-    <figure><img src="https://placeimg.com/400/225/arch" alt="Shoes" /></figure>
+    <figure><img src="https://picsum.photos/400/225" alt="Shoes" /></figure>
   @end
   @jrmc.card.body()
     @jrmc.card.title()

fractal/components/02-display/card/04-card--bottom-image.edge

@@ -8,6 +8,6 @@
     @end
   @end
   @slot('bottom')
-    <figure><img src="https://placeimg.com/400/225/arch" alt="Shoes" /></figure>
+    <figure><img src="https://picsum.photos/400/225" alt="Shoes" /></figure>
   @end
 @end

fractal/components/02-display/card/05-card--center-content.edge

@@ -1,6 +1,6 @@
 @jrmc.card()
   @slot('top')
-    <figure class="px-10 pt-10"><img src="https://placeimg.com/400/225/arch" alt="Shoes" /></figure>
+    <figure class="px-10 pt-10"><img src="https://picsum.photos/400/225" alt="Shoes" /></figure>
   @end
   @jrmc.card.body({ class: 'items-center text-center' })
     @!jrmc.card.title({ text: 'Shoes!' })

fractal/components/02-display/card/06-card--image-overlay.edge

@@ -1,6 +1,6 @@
 @jrmc.card({ class: 'w-96 bg-base-100 shadow-xl image-full'})
   @slot('top')
-    <figure><img src="https://placeimg.com/400/225/arch" alt="Shoes" /></figure>
+    <figure><img src="https://picsum.photos/400/225" alt="Shoes" /></figure>
   @end
   @jrmc.card.body()
     @!jrmc.card.title({ text: 'Shoes!' })

fractal/components/02-display/card/10-card--with-image-on-side.edge

@@ -1,6 +1,6 @@
 @jrmc.card({ class: 'card-side bg-base-100 shadow-xl' })
   @slot('top')
-    <figure><img src="https://placeimg.com/200/280/arch" alt="Movie"></figure>
+    <figure><img src="https://picsum.photos/200/280" alt="Movie"></figure>
   @end
   @jrmc.card.body()
     @!jrmc.card.title({ text: 'New movie is released!' })

fractal/components/02-display/card/11-card--with-image-on-side-vertical-on-small-screen-and-horizontal-on-large-screen.edge.edge

@@ -1,6 +1,6 @@
 @jrmc.card({ class: 'lg:card-side bg-base-100 shadow-xl' })
   @slot('top')
-    <figure><img src="https://placeimg.com/400/400/arch" alt="Movie"></figure>
+    <figure><img src="https://picsum.photos/400/400" alt="Movie"></figure>
   @end
   @jrmc.card.body()
     @!jrmc.card.title({ text: 'New movie is released!' })

fractal/components/02-display/carousel/01-carousel.edge

@@ -1,7 +1,7 @@
 @!jrmc.carousel({ items: [
-  { url: 'https://placeimg.com/400/300/arch', alt: 'text alt' },
-  { url: 'https://placeimg.com/400/300/arch' },
-  { url: 'https://placeimg.com/400/300/arch' },
-  { url: 'https://placeimg.com/400/300/arch' },
-  { url: 'https://placeimg.com/400/300/arch' },
+  { url: 'https://picsum.photos/id/400/400/300', alt: 'text alt' },
+  { url: 'https://picsum.photos/id/401/400/300' },
+  { url: 'https://picsum.photos/id/402/400/300' },
+  { url: 'https://picsum.photos/id/403/400/300' },
+  { url: 'https://picsum.photos/id/404/400/300' },
 ] })

fractal/components/02-display/carousel/02-carousel--snap-to-center.edge

@@ -1,7 +1,7 @@
 @!jrmc.carousel({ items: [
-  { url: 'https://placeimg.com/400/300/arch' },
-  { url: 'https://placeimg.com/400/300/arch' },
-  { url: 'https://placeimg.com/400/300/arch' },
-  { url: 'https://placeimg.com/400/300/arch' },
-  { url: 'https://placeimg.com/400/300/arch' },
+  { url: 'https://picsum.photos/id/400/400/300' },
+  { url: 'https://picsum.photos/id/401/400/300' },
+  { url: 'https://picsum.photos/id/402/400/300' },
+  { url: 'https://picsum.photos/id/403/400/300' },
+  { url: 'https://picsum.photos/id/404/400/300' },
 ], class: 'carousel-center rounded-box' })

fractal/components/02-display/carousel/03-carousel--snap-to-end.edge

@@ -1,7 +1,7 @@
 @jrmc.carousel({ class: 'carousel-end rounded-box' })
-  @!jrmc.carousel.item({ url: 'https://placeimg.com/256/400/arch'})
-  @!jrmc.carousel.item({ url: 'https://placeimg.com/256/400/arch' })
-  @!jrmc.carousel.item({ url: 'https://placeimg.com/256/400/arch' })
-  @!jrmc.carousel.item({ url: 'https://placeimg.com/256/400/arch' })
-  @!jrmc.carousel.item({ url: 'https://placeimg.com/256/400/arch' })
+  @!jrmc.carousel.item({ url: 'https://picsum.photos/id/400/256/400'})
+  @!jrmc.carousel.item({ url: 'https://picsum.photos/id/401/256/400' })
+  @!jrmc.carousel.item({ url: 'https://picsum.photos/id/402/256/400' })
+  @!jrmc.carousel.item({ url: 'https://picsum.photos/id/403/256/400' })
+  @!jrmc.carousel.item({ url: 'https://picsum.photos/id/404/256/400' })
 @end

fractal/components/02-display/carousel/04-carousel--with-full-width-items.edge

@@ -1,11 +1,11 @@
 @jrmc.carousel({ class: 'w-64 rounded-box' })
   @jrmc.carousel.item({ class: 'w-full' })
-    <img src="https://placeimg.com/256/400/arch" class="w-full" alt="" />
+    <img src="https://picsum.photos/id/400/256/400" class="w-full" alt="" />
   @end
   @jrmc.carousel.item({ class: 'w-full' })
-    <img src="https://placeimg.com/256/400/arch" class="w-full" alt="" />
+    <img src="https://picsum.photos/id/401/256/400" class="w-full" alt="" />
   @end
   @jrmc.carousel.item({ class: 'w-full' })
-    <img src="https://placeimg.com/256/400/arch" class="w-full" alt="" />
+    <img src="https://picsum.photos/id/402/256/400" class="w-full" alt="" />
   @end
 @end

fractal/components/02-display/carousel/05-carousel--vertical.edge

@@ -1,7 +1,7 @@
 @!jrmc.carousel({ items: [
-  { url: 'https://placeimg.com/400/300/arch', class: 'h-full' },
-  { url: 'https://placeimg.com/400/300/arch', class: 'h-full' },
-  { url: 'https://placeimg.com/400/300/arch', class: 'h-full' },
-  { url: 'https://placeimg.com/400/300/arch', class: 'h-full' },
-  { url: 'https://placeimg.com/400/300/arch', class: 'h-full' },
+  { url: 'https://picsum.photos/id/301/400/300', class: 'h-full' },
+  { url: 'https://picsum.photos/id/302/400/300', class: 'h-full' },
+  { url: 'https://picsum.photos/id/308/400/300', class: 'h-full' },
+  { url: 'https://picsum.photos/id/304/400/300', class: 'h-full' },
+  { url: 'https://picsum.photos/id/305/400/300', class: 'h-full' },
 ], class: 'h-96 carousel-vertical rounded-box' })

fractal/components/02-display/carousel/06-carousel--with-half-width-items.edge

@@ -1,17 +1,17 @@
 @jrmc.carousel({ class: 'rounded-box w-96' })
   @jrmc.carousel.item({ class: 'w-1/2' })
-    <img src="https://placeimg.com/256/400/arch" class="w-full" alt="" />
+    <img src="https://picsum.photos/id/400/256/400" class="w-full" alt="" />
   @end
   @jrmc.carousel.item({ class: 'w-1/2' })
-    <img src="https://placeimg.com/256/400/arch" class="w-full" alt="" />
+    <img src="https://picsum.photos/id/401/256/400" class="w-full" alt="" />
   @end
   @jrmc.carousel.item({ class: 'w-1/2' })
-    <img src="https://placeimg.com/256/400/arch" class="w-full" alt="" />
+    <img src="https://picsum.photos/id/402/256/400" class="w-full" alt="" />
   @end
   @jrmc.carousel.item({ class: 'w-1/2' })
-    <img src="https://placeimg.com/256/400/arch" class="w-full" alt="" />
+    <img src="https://picsum.photos/id/403/256/400" class="w-full" alt="" />
   @end
   @jrmc.carousel.item({ class: 'w-1/2' })
-    <img src="https://placeimg.com/256/400/arch" class="w-full" alt="" />
+    <img src="https://picsum.photos/id/404/256/400" class="w-full" alt="" />
   @end
 @end

fractal/components/02-display/carousel/07-carousel--full-bleed.edge

@@ -1,14 +1,14 @@
 @jrmc.carousel({ class: 'carousel-center max-w-md p-4 space-x-4 bg-neutral rounded-box' })
   @jrmc.carousel.item()
-    <img src="https://placeimg.com/250/180/arch" class="rounded-box" alt="" />
+    <img src="https://picsum.photos/id/400/250/180" class="rounded-box" alt="" />
   @end
   @jrmc.carousel.item()
-    <img src="https://placeimg.com/250/180/arch" class="rounded-box" alt="" />
+    <img src="https://picsum.photos/id/401/250/180" class="rounded-box" alt="" />
   @end
   @jrmc.carousel.item()
-    <img src="https://placeimg.com/250/180/arch" class="rounded-box" alt="" />
+    <img src="https://picsum.photos/id/402/250/180" class="rounded-box" alt="" />
   @end
   @jrmc.carousel.item()
-    <img src="https://placeimg.com/250/180/arch" class="rounded-box" alt="" />
+    <img src="https://picsum.photos/id/403/250/180" class="rounded-box" alt="" />
   @end
 @end

fractal/components/02-display/carousel/08-carousel--with-indicator-button.edge

@@ -1,16 +1,16 @@
 <div>
   @jrmc.carousel({ class: 'w-full' })
     @jrmc.carousel.item({ id: 'item1', class: 'w-full' })
-      <img src="https://placeimg.com/800/200/arch" class="w-full" alt="" />
+      <img src="https://picsum.photos/id/400/800/200" class="w-full" alt="" />
     @end
     @jrmc.carousel.item({ id: 'item2', class: 'w-full' })
-      <img src="https://placeimg.com/800/200/arch" class="w-full" alt="" />
+      <img src="https://picsum.photos/id/401/800/200" class="w-full" alt="" />
     @end
     @jrmc.carousel.item({ id: 'item3', class: 'w-full' })
-      <img src="https://placeimg.com/800/200/arch" class="w-full" alt="" />
+      <img src="https://picsum.photos/id/402/800/200" class="w-full" alt="" />
     @end
     @jrmc.carousel.item({ id: 'item4', class: 'w-full' })
-      <img src="https://placeimg.com/800/200/arch" class="w-full" alt="" />
+      <img src="https://picsum.photos/id/403/800/200" class="w-full" alt="" />
     @end
   @end
 

fractal/components/02-display/carousel/09-carousel--with-next=prev-buttons.edge

@@ -1,27 +1,27 @@
 @jrmc.carousel({ class: 'w-full' })
   @jrmc.carousel.item({ id: 'slide1', class: 'relative w-full' })
-    <img src="https://placeimg.com/800/200/arch" class="w-full" />
+    <img src="https://picsum.photos/id/400/800/200" class="w-full" />
     <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
       @!jrmc.button.link({ text: '❮', class: 'btn-circle', href: '#slide4' })
       @!jrmc.button.link({ text: '❯', class: 'btn-circle', href: '#slide2' })
     </div>
   @end
   @jrmc.carousel.item({ id: 'slide2', class: 'relative w-full' })
-    <img src="https://placeimg.com/800/200/arch" class="w-full" />
+    <img src="https://picsum.photos/id/401/800/200" class="w-full" />
     <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
       @!jrmc.button.link({ text: '❮', class: 'btn-circle', href: '#slide1' })
       @!jrmc.button.link({ text: '❯', class: 'btn-circle', href: '#slide3' })
     </div>
   @end
   @jrmc.carousel.item({ id: 'slide3', class: 'relative w-full' })
-    <img src="https://placeimg.com/800/200/arch" class="w-full" />
+    <img src="https://picsum.photos/id/402/800/200" class="w-full" />
     <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
       @!jrmc.button.link({ text: '❮', class: 'btn-circle', href: '#slide2' })
       @!jrmc.button.link({ text: '❯', class: 'btn-circle', href: '#slide4' })
     </div>
   @end
   @jrmc.carousel.item({ id: 'slide4', class: 'relative w-full' })
-    <img src="https://placeimg.com/800/200/arch" class="w-full" />
+    <img src="https://picsum.photos/id/403/800/200" class="w-full" />
     <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
       @!jrmc.button.link({ text: '❮', class: 'btn-circle', href: '#slide3' })
       @!jrmc.button.link({ text: '❯', class: 'btn-circle', href: '#slide1' })

fractal/components/02-display/chat/02-chat--avatar.edge

@@ -1,6 +1,6 @@
 @jrmc.chat()
   @slot('avatar')
-    <img src="https://placeimg.com/192/192/people" />
+    <img src="https://picsum.photos/192/192" />
   @end
   It was said that you would, destroy the Sith, not join them.
 @end

fractal/components/02-display/chat/05-chat--position.edge

@@ -1,6 +1,6 @@
 @jrmc.chat({ position: 'end' })
   @slot('avatar')
-    <img src="https://placeimg.com/192/192/people" />
+    <img src="https://picsum.photos/192/192" />
   @end
   @slot('header')
     Obi-Wan Kenobi

fractal/components/02-display/chat/07-chat--sample.edge

@@ -1,7 +1,7 @@
 <div>
   @jrmc.chat()
     @slot('avatar')
-      <img src="https://placeimg.com/192/192/people" />
+      <img src="https://picsum.photos/192/192" />
     @end
     @slot('header')
       Obi-Wan Kenobi
@@ -15,7 +15,7 @@
 
   @jrmc.chat({ position: 'end', class: 'chat-bubble-accent' })
     @slot('avatar')
-      <img src="https://placeimg.com/192/192/people" />
+      <img src="https://picsum.photos/192/192" />
     @end
     @slot('header')
       Anakin

fractal/components/02-display/toast/10-toast--expiration.edge

@@ -1,11 +1,11 @@
 <div>
-  @toast({
+  @jrmc.toast({
     'class': 'toast-top toast-end',
     'x-data': '{ open: true }',
     'x-show': 'open',
     'x-transition.duration.500ms': '',
     'x-init': 'setTimeout(() => open = false, 5000);setTimeout(() => $el.remove(), 6000)',
   })
-    @!alert.info({ text: 'New message arrived.', icon: 'false' })
+    @!jrmc.alert.info({ text: 'New message arrived.', icon: 'false' })
   @end
 </div>

fractal/components/02-display/tooltip/01-tooltip.edge

@@ -1,3 +1,3 @@
 @jrmc.tooltip({ text: 'hello' })
-  <img src="https://placeimg.com/192/192/people" />
+  <img src="https://picsum.photos/192/192" />
 @end

fractal/components/02-display/tooltip/02-tooltip--open.edge

@@ -1,3 +1,3 @@
 @jrmc.tooltip({ text: 'hello', class: 'tooltip-open' })
-  <img src="https://placeimg.com/192/192/people" />
+  <img src="https://picsum.photos/192/192" />
 @end

fractal/components/02-display/tooltip/03-tooltip--position.edge

@@ -1,9 +1,9 @@
 @jrmc.tooltip({ text: 'hello', class: 'tooltip-open tooltip-left tooltip-primary' })
-  <img src="https://placeimg.com/64/64/people" />
+  <img src="https://picsum.photos/64/64" />
 @end
 @jrmc.tooltip({ text: 'hello', class: 'tooltip-open tooltip-bottom tooltip-secondary' })
-  <img src="https://placeimg.com/64/64/people" />
+  <img src="https://picsum.photos/64/64" />
 @end
 @jrmc.tooltip({ text: 'hello', class: 'tooltip-open tooltip-right tooltip-accent' })
-  <img src="https://placeimg.com/64/64/people" />
+  <img src="https://picsum.photos/64/64" />
 @end

fractal/components/03-form/01-input/01-input-base.edge

@@ -1,15 +1,19 @@
 <div class="w-full max-w-xs">
-  @!jrmc.form.input({ placeholder: 'Default', class: 'w-full' })
-  <br /><br />
-  @!jrmc.form.input({ type: 'number', placeholder: '0', class: 'w-full' })
-  <br /><br />
-  @!jrmc.form.input({ type: 'email', placeholder: '[email protected]', class: 'w-full' })
-  <br /><br />
-  @!jrmc.form.input({ type: 'date', class: 'w-full' })
-  <br /><br />
-  @!jrmc.form.input({ type: 'datetime-local', class: 'w-full' })
-  <br /><br />
-  @!jrmc.form.input({ type: 'color', class: 'w-full' })
-  <br /><br />
-  @!jrmc.form.input({ type: 'hidden', value: 'true', class: 'w-full' })
+  @jrmc.card({ class: 'bg-neutral'})
+    @jrmc.card.body()
+      @!jrmc.form.input({ placeholder: 'Default', class: 'w-full' })
+      <br /><br />
+      @!jrmc.form.input({ type: 'number', placeholder: '0', class: 'w-full' })
+      <br /><br />
+      @!jrmc.form.input({ type: 'email', placeholder: '[email protected]', class: 'w-full' })
+      <br /><br />
+      @!jrmc.form.input({ type: 'date', class: 'w-full' })
+      <br /><br />
+      @!jrmc.form.input({ type: 'datetime-local', class: 'w-full' })
+      <br /><br />
+      @!jrmc.form.input({ type: 'color', class: 'w-full' })
+      <br /><br />
+      @!jrmc.form.input({ type: 'hidden', value: 'true', class: 'w-full' })
+    @end
+  @end
 </div>