add responsive button view ( mobile, tablet, desktop ) in code exampl…

…e block (#1053)

* docs: add responsive button view in code example block

* docs: rename meta for hide responive buttons

* docs: disable responsive buttons when not need it or brake the style

src/routes/docs/components/avatar.md

@@ -185,7 +185,7 @@ Use this example if you want to show a dropdown menu when clicking on the avatar
 
 Select size from xs | sm | md | lg | xl.
 
-```svelte example class="flex flex-col gap-4" hideScript
+```svelte example class="flex flex-col gap-4" hideScript hideResponsiveButtons
 <script>
   import { Avatar } from 'flowbite-svelte';
 </script>

src/routes/docs/components/banner.md

@@ -105,7 +105,7 @@ Use this free example to show a text message for announcement with a CTA link.
 
 This example can be used to encourage your website visitors to sign up to your email newsletter by showing an inline form inside the sticky banner on the top side of your page.
 
-```svelte example class="flex flex-col relative"
+```svelte example class="flex flex-col relative" hideResponsiveButtons
 <script>
   import { Banner, Skeleton, ImagePlaceholder } from 'flowbite-svelte';
 </script>
@@ -126,7 +126,7 @@ This example can be used to encourage your website visitors to sign up to your e
 
 This example can be used to share important information with your website visitors by showing a heading and a paragraph inside the sticky banner and two CTA buttons with links.
 
-```svelte example class="flex flex-col relative"
+```svelte example class="flex flex-col relative" hideResponsiveButtons
 <script>
   import { Banner, Skeleton, ImagePlaceholder } from 'flowbite-svelte';
   import { OpenBookSolid, ArrowRightSolid } from 'flowbite-svelte-icons';

src/routes/docs/components/card.md

@@ -113,7 +113,7 @@ You can use the following example of a card element with an image for blog posts
 
 If you want to spice up your cards you can use the following card which has its child elements aligned horizontally.
 
-```svelte example class="flex justify-center flex-wrap gap-2"
+```svelte example class="flex justify-center flex-wrap gap-2" hideResponsiveButtons
 <script>
   import { Card, Button, Toggle } from 'flowbite-svelte';
   let hCard = false;
@@ -347,7 +347,7 @@ Show detailed information to potential customers about your product’s pricing
 
 Use this example to split cards into multiple sections such as for testimonials or reviews.
 
-```svelte example class="flex justify-center flex-wrap gap-2"
+```svelte example class="flex justify-center flex-wrap gap-2" hideResponsiveButtons
 <script>
   import { Card } from 'flowbite-svelte';
 </script>

src/routes/docs/components/carousel.md

@@ -73,7 +73,7 @@ Set the `duration` prop to define the time interval for chaning images. Time is
 
 The default value for `duration` is set to zero that means no autochange of images. In that case you can control which image is displayed by the `index` prop.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Carousel } from 'flowbite-svelte';
   import { images } from './imageData/+server.js';
@@ -90,7 +90,7 @@ Use the internal `Controls` component to listen to click events which will trigg
 
 You can customize the control elements with the `class` property.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Carousel } from 'flowbite-svelte';
   import { images } from './imageData/+server.js';
@@ -107,7 +107,7 @@ You can customize the control elements with the `class` property.
 
 Show the carousel indicators by adding the internal `Indicators` component.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Carousel } from 'flowbite-svelte';
   import { images } from './imageData/+server.js';
@@ -124,7 +124,7 @@ Show the carousel indicators by adding the internal `Indicators` component.
 
 You can control the `Carousel` component externally by the `index` prop. Here is an example how to use the `Thumbnails` component to achieve that.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Carousel, Thumbnails } from 'flowbite-svelte';
   import { images } from './imageData/+server.js';
@@ -145,7 +145,7 @@ You can control the `Carousel` component externally by the `index` prop. Here is
 
 The `Carousel` exposes the `change` event containing info about the currently displayed image. You can use it to build custom caption for the carousel.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Carousel } from 'flowbite-svelte';
   import { images } from './imageData/+server.js';
@@ -170,7 +170,7 @@ The `Carousel` exposes the `change` event containing info about the currently di
 
 You can use `slot="slide"` and internal component `Slide` to control the image display. Here's an example how to wrap images with the anchor element.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Carousel } from 'flowbite-svelte';
   import { images } from './imageData/+server.js';
@@ -190,7 +190,7 @@ You can use `slot="slide"` and internal component `Slide` to control the image d
 
 ### Basic customization
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Carousel } from 'flowbite-svelte';
   import { images } from './imageData/+server.js';
@@ -206,7 +206,7 @@ You can use `slot="slide"` and internal component `Slide` to control the image d
 
 ### Advanced customization
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Carousel, Thumbnails, Button, Indicator } from 'flowbite-svelte';
   import { CaretRightOutline } from 'flowbite-svelte-icons';
@@ -234,7 +234,7 @@ You can use `slot="slide"` and internal component `Slide` to control the image d
 
 ### Carousel transition
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Carousel } from 'flowbite-svelte';
   import { images } from './imageData/+server.js';

src/routes/docs/components/device-mockups.md

@@ -78,7 +78,7 @@ Use this alternative phone mockup example if you want to feature previews for an
 
 This component can be used to show an application preview inside of a responsive tablet mockup.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { DeviceMockup } from 'flowbite-svelte';
 </script>
@@ -93,7 +93,7 @@ This component can be used to show an application preview inside of a responsive
 
 This example can be used to show a screenshot of your application inside a laptop mockup.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { DeviceMockup } from 'flowbite-svelte';
 </script>
@@ -108,7 +108,7 @@ This example can be used to show a screenshot of your application inside a lapto
 
 Use this example to show a preview of your applicaiton inside a desktop device such as an iMac.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { DeviceMockup } from 'flowbite-svelte';
 </script>

src/routes/docs/components/dropdown.md

@@ -365,7 +365,7 @@ Show a list of toggle switch elements inside the dropdown menu to enable a yes o
 
 <p>You can also use the dropdown element inside a navigation bar and add a second level of navigation hierarchy, but make sure to use Navbar components.</p>
 
-```svelte example class="flex justify-center items-start h-96"
+```svelte example class="flex justify-center items-start h-96" hideResponsiveButtons
 <script>
   import { Button, Dropdown, DropdownItem, DropdownDivider, Navbar, NavBrand, NavHamburger, NavUl, NavLi } from 'flowbite-svelte';
   import { ChevronDownSolid } from 'flowbite-svelte-icons';
@@ -603,7 +603,7 @@ Use this example to also show the name or email of the user next to the avatar f
 
 <p>The dropdown menus work with buttons of all sizes including smaller or larger ones.</p>
 
-```svelte example class="flex justify-center items-start gap-4 h-80"
+```svelte example class="flex justify-center items-start gap-4 h-80" hideResponsiveButtons
 <script>
   import { Button, Dropdown, DropdownItem } from 'flowbite-svelte';
   import { ChevronDownSolid } from 'flowbite-svelte-icons';
@@ -627,7 +627,7 @@ Use this example to also show the name or email of the user next to the avatar f
 
 You can also use the `placement={top|right|bottom|left}` options to choose the placement of the dropdown menu. By default the positioning is set to the bottom side of the button.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Button, Dropdown, DropdownItem } from 'flowbite-svelte';
   import { ChevronDownSolid, ChevronUpSolid, ChevronRightSolid, ChevronLeftSolid } from 'flowbite-svelte-icons';
@@ -653,7 +653,7 @@ You can also use the `placement={top|right|bottom|left}` options to choose the p
 
 ## Double placement
 
-```svelte example class="flex justify-center items-center gap-2 h-96"
+```svelte example class="flex justify-center items-center gap-2 h-96" hideResponsiveButtons
 <script>
   import { Button, Dropdown, DropdownItem } from 'flowbite-svelte';
   import { ChevronDownSolid, ChevronUpSolid } from 'flowbite-svelte-icons';

src/routes/docs/components/footer.md

@@ -28,7 +28,7 @@ The footer is one of the most underestimated sections of a website being located
 
 <p>Use this footer component to show a copyright notice and some helpful website links.</p>
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Footer, FooterCopyright, FooterLinkGroup, FooterLink } from 'flowbite-svelte';
 </script>
@@ -48,7 +48,7 @@ The footer is one of the most underestimated sections of a website being located
 
 <p>Use this component to show your brand’s logo, a few website links and the copyright notice on a second row.</p>
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Footer, FooterCopyright, FooterLinkGroup, FooterBrand, FooterLink } from 'flowbite-svelte';
 </script>
@@ -72,7 +72,7 @@ The footer is one of the most underestimated sections of a website being located
 
 <p>This footer component can be used to show your brand’s logo, multiple rows of website links, a copyright notice and social media profile icons including Twitter, Facebook, Instagram, and more.</p>
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Footer, FooterCopyright, FooterLinkGroup, FooterLink, FooterBrand, FooterIcon } from 'flowbite-svelte';
   import { FacebookSolid, GithubSolid, DiscordSolid, TwitterSolid } from 'flowbite-svelte-icons';
@@ -136,7 +136,7 @@ The footer is one of the most underestimated sections of a website being located
 
 <p>If you have a website with many pages you can use this footer component to show a sitemap spanning the entire width of a row followed below by a copyright notice and social media icons.</p>
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Footer, FooterLinkGroup, FooterLink, FooterBrand, FooterIcon, FooterCopyright } from 'flowbite-svelte';
   import { FacebookSolid, GithubSolid, DiscordSolid, TwitterSolid } from 'flowbite-svelte-icons';
@@ -208,7 +208,7 @@ The footer is one of the most underestimated sections of a website being located
 
 Use this example to set create a sticky footer by using a fixed position to the bottom of the document page as the user scrolls up or down the main content area.
 
-```svelte example class="relative"
+```svelte example class="relative" hideResponsiveButtons
 <script>
   import { Footer, FooterLinkGroup, FooterLink, ImagePlaceholder, TextPlaceholder, Skeleton, FooterCopyright } from 'flowbite-svelte';
 </script>

src/routes/docs/components/kbd.md

@@ -29,7 +29,7 @@ The KBD (Keyboard) component can be used to indicate a textual user input from t
 
 Here’s a list of KBD components that you can use inside any other element.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { Kbd } from 'flowbite-svelte';
 </script>
@@ -47,7 +47,7 @@ Here’s a list of KBD components that you can use inside any other element.
 
 Use this example by nesting an inline KBD component inside a paragraph.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { Kbd } from 'flowbite-svelte';
 </script>
@@ -61,7 +61,7 @@ Use this example by nesting an inline KBD component inside a paragraph.
 
 The KBD component can also be used inside table components to denote what type of key can be pressed for certain descriptions.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Kbd, Table, TableHead, TableHeadCell, TableBody, TableBodyCell, TableBodyRow, ArrowKeyUp, ArrowKeyDown, ArrowKeyRight, ArrowKeyLeft } from 'flowbite-svelte';
 </script>
@@ -113,7 +113,7 @@ The KBD component can also be used inside table components to denote what type o
 
 Use this example to show arrow keys inside the KBD styled element.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Kbd, ArrowKeyUp, ArrowKeyDown, ArrowKeyRight, ArrowKeyLeft } from 'flowbite-svelte';
 </script>
@@ -140,7 +140,7 @@ Use this example to show arrow keys inside the KBD styled element.
 
 Use this example if you need to show a key from the latin alphabet
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { Kbd } from 'flowbite-svelte';
 </script>
@@ -177,7 +177,7 @@ Use this example if you need to show a key from the latin alphabet
 
 Use this example to show a key inside a KBD component from the english numeral system.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { Kbd } from 'flowbite-svelte';
 </script>
@@ -198,7 +198,7 @@ Use this example to show a key inside a KBD component from the english numeral s
 
 This example can be used to denote function keys inside the KBD component.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { Kbd } from 'flowbite-svelte';
 </script>

src/routes/docs/components/mega-menu.md

@@ -27,7 +27,7 @@ The mega menu component is a full-width dropdown that can be triggered by clicki
 
 Use this example to show a list of links aligned on three columns inside the mega menu dropdown.
 
-```svelte example class="h-80"
+```svelte example class="h-80" hideResponsiveButtons
 <script>
   import { Navbar, NavBrand, NavHamburger, NavUl, NavLi, MegaMenu } from 'flowbite-svelte';
   import { ChevronDownOutline } from 'flowbite-svelte-icons';
@@ -71,7 +71,7 @@ Use this example to show a list of links aligned on three columns inside the meg
 
 This example of a mega menu dropdown can be used to also show an icon near the text of the link.
 
-```svelte example class="h-80 md:h-80"
+```svelte example class="h-80 md:h-80" hideResponsiveButtons
 <script>
   import { Navbar, NavBrand, NavHamburger, NavUl, NavLi, MegaMenu } from 'flowbite-svelte';
   import { IconOutline, ChevronDownOutline } from 'flowbite-svelte-icons';
@@ -118,7 +118,7 @@ This example of a mega menu dropdown can be used to also show an icon near the t
 
 Use this example to show a mega menu dropdown that spans the entire width of the document page.
 
-```svelte example class="h-96 relative"
+```svelte example class="h-96 relative" hideResponsiveButtons
 <script>
   import { Navbar, NavBrand, NavHamburger, NavUl, NavLi, MegaMenu } from 'flowbite-svelte';
   import { ChevronDownOutline } from 'flowbite-svelte-icons';
@@ -165,7 +165,7 @@ Use this example to show a mega menu dropdown that spans the entire width of the
 
 This example can be used to also show a CTA button or link next to the menu items inside the dropdown.
 
-```svelte example class="h-96 relative"
+```svelte example class="h-96 relative" hideResponsiveButtons
 <script>
   import { Navbar, NavBrand, NavHamburger, NavUl, NavLi, MegaMenu } from 'flowbite-svelte';
   import { ChevronDownOutline, ArrowRightOutline } from 'flowbite-svelte-icons';
@@ -236,7 +236,7 @@ This example can be used to also show a CTA button or link next to the menu item
 
 This example can be used to also show a CTA with a backdround image inside the dropdown next to the other menu items and links.
 
-```svelte example class="h-96 relative"
+```svelte example class="h-96 relative" hideResponsiveButtons
 <script>
   import { Navbar, NavBrand, NavHamburger, NavUl, NavLi, MegaMenu, Button } from 'flowbite-svelte';
   import { ChevronDownOutline } from 'flowbite-svelte-icons';

src/routes/docs/components/modal.md

@@ -199,7 +199,7 @@ Use this web3 modal component to show crypto wallet connection options like Meta
 
 You can use five different modal sizing options starting from extra small to extra large, but keep in mind that the width of these modals will remain the same when browsing on smaller devices.
 
-```svelte example class="flex justify-center"
+```svelte example class="flex justify-center" hideResponsiveButtons
 <script>
   import { Button, Modal } from 'flowbite-svelte';
   let id = 'size-modal';
@@ -267,7 +267,7 @@ You can use five different modal sizing options starting from extra small to ext
 
 ## Placement
 
-```svelte example class="flex justify-center"
+```svelte example class="flex justify-center" hideResponsiveButtons
 <script>
   import { Button, Modal } from 'flowbite-svelte';
   let id;
@@ -305,7 +305,7 @@ You can use five different modal sizing options starting from extra small to ext
 
 ## Colors
 
-```svelte example class="flex justify-center"
+```svelte example class="flex justify-center" hideResponsiveButtons
 <script>
   import { Button, Modal, P } from 'flowbite-svelte';
   let open = false;