{# @description A browser window frame with an address bar, for showing a page or screenshot. #}
{# @prop url:text | description:"Address shown in the address bar." #}
{# @prop class:text | description:"Extra classes added to the frame." #}
{# @slot <div class="p-4"><div class="flex justify-end gap-2 pb-2"><c-tooltip id="product-share-hint" tip="Share this product"><c-button circle icon="bi bi-share" aria-label="Share" aria-describedby="product-share-hint" /></c-tooltip></div><c-carousel aria-label="Product photos"><c-carousel.item id="product-slide-1" class="w-full"><img class="w-full" src="https://img.daisyui.com/images/stock/daisyui-hat-1.webp" alt="A wide-brimmed straw hat, front view"></c-carousel.item><c-carousel.item id="product-slide-2" class="w-full"><img class="w-full" src="https://img.daisyui.com/images/stock/daisyui-hat-2.webp" alt="The same hat, side view"></c-carousel.item><c-carousel.item id="product-slide-3" class="w-full"><img class="w-full" src="https://img.daisyui.com/images/stock/daisyui-hat-3.webp" alt="The same hat, worn by a model"></c-carousel.item></c-carousel><div class="flex justify-center gap-2 py-2 w-full"><c-button href="#product-slide-1" size="xs" aria-label="Go to slide 1" /><c-button href="#product-slide-2" size="xs" aria-label="Go to slide 2" /><c-button href="#product-slide-3" size="xs" aria-label="Go to slide 3" /></div><c-diff aria-label="Headline, before and after" class="aspect-16/9 mt-4"><c-slot name="item_1"><div class="bg-primary text-primary-content grid place-content-center text-4xl font-black">BEFORE</div></c-slot><c-slot name="item_2"><div class="bg-secondary text-secondary-content grid place-content-center text-4xl font-black">AFTER</div></c-slot></c-diff><c-hover_3d href="/cards/1" class="mt-4 w-64"><c-card class="w-64"><c-slot name="figure"><img src="https://img.daisyui.com/images/stock/creditcard.webp" alt="A blue credit card"></c-slot><c-slot name="title">Rewards card</c-slot></c-card></c-hover_3d><c-button text="Add to cart" class="mt-4"><c-loading size="sm" /></c-button></div> — A product page: a toolbar holding an icon-only share button linked to a tooltip by aria-describedby, a carousel named by aria-label, three full-width slides with ids, daisyUI's indicator row of c-button href size=xs links below it, a text comparison with each item's text wrapped in one element and coloured from the semantic palette, a linked hover 3D card wrapping a card with an image figure and a title, and an Add to cart button holding a loading indicator. #}
<c-vars url="" class />
<div class="mockup-browser border border-base-300 bg-base-100 w-full {{ class }}"
     {{ attrs }}>
  <div class="mockup-browser-toolbar">
    <div class="input">{{ url }}</div>
  </div>
  <div>{{ slot }}</div>
</div>