Figma (themesberg#657)

* init

* forms to badges

* layout work

* fix merge"

* first draft

* moved Toc to utils

* components moved to docs

* forms,pages,typography moved to docs

* extend examples utilites moved to docs

* fix: tests paths update

* fix: hooks.server.js needed update as well

* fix: and finally infamous datepicker

* blocks svg's updated to figma

* fix: menu a 870px and sidebar display

* blocks directory removal

* docs(homepage): improve SEO title and description

* docs(sidebar): add sidebar border styles and use new `component_title` variable

* docs(manifest): Flowbite Svelte instead of Flowbite-Svelte

* docs(SEO): improve meta tag title format

* docs(GH source): use primary color instead of blue

* docs(footer): improve footer layout and add description and new links

* docs(example wrapper): use primary hover colors instead of blue

* docs(layout): add `px-4` padding to centered wrapper

* docs(component pages): improve title tags and remove GH source list

* docs(snapshot): improve page title

* fix: tests corrections

* rouge pages converted to .md

* fix: tests corrections

* fix: clean up of +layout.svelte

* fix: sidebar display/hide

* foldable sidebar

* fix: typo text class

* feat: first draft of landing page

* fix: test corrected

* fix: landing page vpadding

* fix: blocks removed; sidebar top space corrected; menu in mobile not visible; footer 1 col in mobile

* fix: tweaks

* feat: copy on input

* "Featured in" section on the home page.

* fix: navbar tooltip bottom

* fix: sidebar top padding; hero 1030px

* fix: more on padding

* fix: link, more padding

* refactor(index): make input longer so the placeholder can be seen

* refactor(gallery images): use 2x for Retina

* feat(config): add primary 800 color

* feat(index): improve hover styles for component preview cards

* refactor(index): improve layout of homepage

* refactor(index): remove max width of cards

* refactor(index): inverse dark hover styles for comp cards

* docs(navigation): add two more navigation links

* docs(sidebar): primary text hover on parent sidebar item

* docs(footer): update relevant links

* docs(hamburger menu): inverse margin to the right

* chore(license): update LICENSE.md file and mention @shinokada as original author

* docs(about): rename to introduction and improve titles

* test(introduction): update tests for introduction page

* docs(homepage): fix getting started link on button

* docs(introduction): improve SEO description

* docs(prism): improve color syntax

* refactor(chevron icons): proper solid and outline styles from Heroicons

* docs(sidebar arrows): make them solid

* files re-arrangments for later maintenance

* removal of unused files

* page sorting in routes/utils/index

* fetch version

* missing file

* feat: contributors

* fix: footer padding

* link to npm

* fix: padding

* docs(footer): remove unnecessary padding

* footer extension ready

* docs(featured): improve responsive wrapping

* docs(contributors): add url to profiles

* docs(contributors): add hover effect to main CTA

* docs(footer): improve links wrapping on homepage conditionally

* docs(navbar): wrap max width on homepage conditionally to match sections

* docs(dark mode): show dark mode toggle on mobile devices too

* docs(version navbar): add `v` prefix

* docs(typescript): proper description and title for types

* docs(navbar): add components item that points to accordions

* docs(typescript): rename typescript docs page title

* docs(introduction): add more text and documentation

* docs(sidebar): move the sidebar repo disclaimer to the sidebar page

* docs(introduction): add GitHub link to main paragraph

* test(pages): match new page titles

* docs(sidebar): update order for the first category

* docs(quickstart): rename `getting-started` to `quickstart`

* docs(license): slightly improve docs for license page

* docs(introduction): improve SEO title

* docs(compile-speed): rename page title for better SEO positioning

* docs(footer): conditionally set up paddings for homepage

* docs(homepage): use only one `<h1>` per page

* docs(sidebar): hover effect on dark mode

* docs(navbar): improve accessibility hover effect on icon buttons

* test(pages): update new page title matchings

* toc improvment; pages - more markdown

* fix: DocBadge can't use color=undefined

* fix: datepicker made layout error - this needs work

* sidebar category open

* show a tooltip and change the text to copied

* hamburger menu on the right

* fix: z indexing

* navbar breaking point

* fix: prevent nav wrap at 1030px

* fix: it was still wrapping

* docs(thumbnails): update blue colored thumbails to orange

* docs(components): use actual number of components

* docs(components): custom width for thumbnails

* docs(contributors): check if data available from GitHub

* docs(landing): copywriting improvements and wrap hero text

* docs(introduction): update link text

* docs(navbar): improve wrapping and update sidebar hamburger icon

* docs(version badge): add hover effect

* docs(hero section): improve CTA button wrapping

* docs(navbar): reduce height of navbar and add spacing on mobile menu

* docs(utilities): improve SEO titles and descriptions

* fix: menu close on click

* docs(navbar): hide second hamburger icon for docs

* docs(landing): improve hero text wrapping for 3 rows instead of 4

---------

Co-authored-by: Zoltán Szőgyényi <[email protected]>

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Shinichi Okada
+Copyright (c) 2022 Flowbite Svelte (created by Shinichi Okada)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -37,8 +37,8 @@ You can find all the examples in the Examples directory.
 
 ## Installation
 
-- [Getting started](https://flowbite-svelte.com/pages/getting-started)
-- [About](https://flowbite-svelte.com/pages/about)
+- [Getting started](https://flowbite-svelte.com/pages/quickstart)
+- [Introduction](https://flowbite-svelte.com/pages/introduction)
 - [Types](https://flowbite-svelte.com/pages/types)
 - [How to contribute](https://flowbite-svelte.com/pages/how-to-contribute)
 - [License](https://flowbite-svelte.com/pages/license)

mdsvex.config.js

@@ -3,8 +3,7 @@ import examples from 'mdsvexamples';
 
 const config = defineConfig({
   layout: {
-    componentLayout: './src/routes/layouts/component/+page.svelte',
-    pageLayout: './src/routes/layouts/pageLayout/+page.svelte'
+    componentLayout: './src/routes/layouts/component/+page.svelte'
   },
   extensions: ['.svelte.md', '.md', '.svx'],
 

src/app.html

@@ -19,8 +19,8 @@
 	%sveltekit.head%
 </head>
 
-<body data-sveltekit-preload-data class="bg-white dark:bg-gray-900">
-	<div id="svelte" class="max-h-screen overflow-auto relative">%sveltekit.body%</div>
+<body data-sveltekit-preload-data class="bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-400">
+	<div id="svelte" class="max-h-screen overflow-auto relative w-full">%sveltekit.body%</div>
 </body>
 
 </html>

src/hooks.server.js

@@ -1,76 +1,83 @@
+const filePath = (path) => '/' + path.split('/').pop()?.split('.').shift();
+
 /** @type {import('@sveltejs/kit').Handle} */
 export const handle = async ({ event, resolve }) => {
   // vite function to get all md files from components dir
-  const componentFiles = import.meta.glob('/src/routes/components/*.md');
-  const formFiles = import.meta.glob('/src/routes/forms/*.md');
-  const typographyFiles = import.meta.glob('/src/routes/typography/*.md');
-  const utilFiles = import.meta.glob('/src/routes/utilities/*.md');
-  const pageFiles = import.meta.glob('/src/routes/pages/*.md');
-  const extendFiles = import.meta.glob('/src/routes/extend/*.md');
+  const componentFiles = import.meta.glob('/src/routes/docs/components/*.md');
+  const formFiles = import.meta.glob('/src/routes/docs/forms/*.md');
+  const typographyFiles = import.meta.glob('/src/routes/docs/typography/*.md');
+  const utilFiles = import.meta.glob('/src/routes/docs/utilities/*.md');
+  const pageFiles = import.meta.glob('/src/routes/docs/pages/*.md');
+  const extendFiles = import.meta.glob('/src/routes/docs/extend/*.md');
+  const experimentalFiles = import.meta.glob('/src/routes/docs/experimental/*.md');
   // returns an array of files
   const iterableComponentFiles = Object.entries(componentFiles);
   const iterableFormFiles = Object.entries(formFiles);
   const iterableTypographyFiles = Object.entries(typographyFiles);
   const iterableUtilFiles = Object.entries(utilFiles);
   const iterablePageFiles = Object.entries(pageFiles);
   const iterableExtendFiles = Object.entries(extendFiles);
+  const iterableExperimentalFiles = Object.entries(experimentalFiles);
+
   // returns an array of paths, /accordion from /src/routes/components/accordion.md
   const allComponents = await Promise.all(
     iterableComponentFiles.map(async ([path]) => {
-      const filePath = path.slice(22, -3);
-      return filePath;
+      return filePath(path);
     })
   );
   // returns an array of paths, /radio from /src/routes/forms/radio.md
   const allForms = await Promise.all(
     iterableFormFiles.map(async ([path]) => {
-      const filePath = path.slice(17, -3);
-      return filePath;
+      return filePath(path);
     })
   );
   // returns an array of paths, /hr from /src/routes/typography/hr.md
   const allTypographys = await Promise.all(
     iterableTypographyFiles.map(async ([path]) => {
-      const filePath = path.slice(22, -3);
-      return filePath;
+      return filePath(path);
     })
   );
   // returns an array of paths, /closebutton from /src/routes/utilities/closebutton.md
   const allUtils = await Promise.all(
     iterableUtilFiles.map(async ([path]) => {
-      const filePath = path.slice(21, -3);
-      return filePath;
+      return filePath(path);
     })
   );
-  // returns an array of paths, /about from /src/routes/pages/about.md
+  // returns an array of paths, /introduction from /src/routes/pages/introduction.md
   const allPages = await Promise.all(
     iterablePageFiles.map(async ([path]) => {
-      const filePath = path.slice(17, -3);
-      return filePath;
+      return filePath(path);
     })
   );
   // returns an array of paths, /icons from /src/routes/extend/icons.md
   const allExtends = await Promise.all(
     iterableExtendFiles.map(async ([path]) => {
-      const filePath = path.slice(18, -3);
-      return filePath;
+      return filePath(path);
+    })
+  );
+  // returns an array of paths, /icons from /src/routes/extend/icons.md
+  const allExperimental = await Promise.all(
+    iterableExperimentalFiles.map(async ([path]) => {
+      return filePath(path);
     })
   );
 
   // check if pathname is included itn allComponents
   if (allComponents.includes(event.url.pathname)) {
     // redirect
-    return Response.redirect(`${event.url.origin}/components${event.url.pathname}`, 301);
+    return Response.redirect(`${event.url.origin}/docs/components${event.url.pathname}`, 301);
   } else if (allForms.includes(event.url.pathname)) {
-    return Response.redirect(`${event.url.origin}/forms${event.url.pathname}`, 301);
+    return Response.redirect(`${event.url.origin}/docs/forms${event.url.pathname}`, 301);
   } else if (allTypographys.includes(event.url.pathname)) {
-    return Response.redirect(`${event.url.origin}/typography${event.url.pathname}`, 301);
+    return Response.redirect(`${event.url.origin}/docs/typography${event.url.pathname}`, 301);
   } else if (allPages.includes(event.url.pathname)) {
-    return Response.redirect(`${event.url.origin}/pages${event.url.pathname}`, 301);
+    return Response.redirect(`${event.url.origin}/docs/pages${event.url.pathname}`, 301);
   } else if (allExtends.includes(event.url.pathname)) {
-    return Response.redirect(`${event.url.origin}/extend${event.url.pathname}`, 301);
+    return Response.redirect(`${event.url.origin}/docs/extend${event.url.pathname}`, 301);
+  } else if (allExperimental.includes(event.url.pathname)) {
+    return Response.redirect(`${event.url.origin}/docs/experimental${event.url.pathname}`, 301);
   } else if (allUtils.includes(event.url.pathname)) {
-    return Response.redirect(`${event.url.origin}/utilities${event.url.pathname}`, 301);
+    return Response.redirect(`${event.url.origin}/docs/utilities${event.url.pathname}`, 301);
   }
 
   return await resolve(event);

src/lib/badges/Badge.svelte

@@ -3,7 +3,8 @@
   import classNames from 'classnames';
   import CloseButton from '../utils/CloseButton.svelte';
 
-  export let color: 'blue' | 'dark' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink' = 'blue';
+  export let color: 'blue' | 'dark' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink' | 'none' =
+    'blue';
   export let large: boolean = false;
   export let border: boolean = false;
   export let href: string | undefined = undefined;
@@ -27,7 +28,8 @@
     ['!yellow']: 'bg-yellow-300 text-yellow-800',
     ['!indigo']: 'bg-indigo-500 text-indigo-100',
     ['!purple']: 'bg-purple-500 text-purple-100',
-    ['!pink']: 'bg-pink-500 text-pink-100'
+    ['!pink']: 'bg-pink-500 text-pink-100',
+    none: ''
   };
 
   const borderedColors = {
@@ -38,7 +40,8 @@
     yellow: 'bg-yellow-100 text-yellow-800 dark:bg-gray-700 dark:text-yellow-300 border-yellow-300',
     indigo: 'bg-indigo-100 text-indigo-800 dark:bg-gray-700 dark:text-indigo-400 border-indigo-400',
     purple: 'bg-purple-100 text-purple-800 dark:bg-gray-700 dark:text-purple-400 border-purple-400',
-    pink: 'bg-pink-100 text-pink-800 dark:bg-gray-700 dark:text-pink-400 border-pink-400'
+    pink: 'bg-pink-100 text-pink-800 dark:bg-gray-700 dark:text-pink-400 border-pink-400',
+    none: ''
   };
 
   const hoverColors = {
@@ -49,7 +52,8 @@
     yellow: 'hover:bg-yellow-200',
     indigo: 'hover:bg-indigo-200',
     purple: 'hover:bg-purple-200',
-    pink: 'hover:bg-pink-200'
+    pink: 'hover:bg-pink-200',
+    none: ''
   };
 
   const baseClass: string = 'font-medium inline-flex items-center justify-center px-2.5 py-0.5';
@@ -69,7 +73,8 @@
     $$props.class
   );
 
-  const closeBtnBaseClass: string = 'inline-flex items-center !p-0.5 !m-0 !ml-2 text-sm bg-transparent rounded-sm focus:!ring-0';
+  const closeBtnBaseClass: string =
+    'inline-flex items-center !p-0.5 !m-0 !ml-2 text-sm bg-transparent rounded-sm focus:!ring-0';
 
   // uncomment the following lines to completely overwrite <CloseButton>'s color palette
   // in case <CloseButton>'s color palette is changed in the future
@@ -93,14 +98,12 @@
     yellow: 'text-yellow-400 hover:text-yellow-900 dark:hover:!bg-yellow-800 dark:hover:text-yellow-300',
     indigo: 'text-indigo-400 hover:text-indigo-900 dark:hover:!bg-indigo-800 dark:hover:text-indigo-300',
     purple: 'text-purple-400 hover:text-purple-900 dark:hover:!bg-purple-800 dark:hover:text-purple-300',
-    pink: 'text-pink-400 hover:text-pink-900 dark:hover:!bg-pink-800 dark:hover:text-pink-300'
+    pink: 'text-pink-400 hover:text-pink-900 dark:hover:!bg-pink-800 dark:hover:text-pink-300',
+    none: ''
   };
 
   let closeBtnClass: string;
-  $: closeBtnClass = classNames(
-    closeBtnBaseClass,
-    closeBtnColors[color]
-  );
+  $: closeBtnClass = classNames(closeBtnBaseClass, closeBtnColors[color]);
 
   let hidden = false;
   const dispatch = createEventDispatcher();
@@ -111,16 +114,21 @@
       hidden = true;
     }, 300);
     dispatch('dismiss', {
-			message: 'The badge will be dismissed.'
-		});
+      message: 'The badge will be dismissed.'
+    });
   };
 </script>
 
 <svelte:element this={href ? 'a' : 'span'} {href} {...$$restProps} class={badgeClass} class:hidden>
   <slot />
   {#if dismissable}
     <slot name="closeBtn" {handleHide}>
-      <CloseButton {color} on:click={handleHide} size={large ? 'sm' : 'xs'} name="Remove badge" class={closeBtnClass} />
+      <CloseButton
+        {color}
+        on:click={handleHide}
+        size={large ? 'sm' : 'xs'}
+        name="Remove badge"
+        class={closeBtnClass} />
     </slot>
   {/if}
 </svelte:element>

src/lib/banner/Banner.svelte

@@ -5,7 +5,7 @@
   export let position: 'static'|'fixed'|'absolute'|'relative'|'sticky'='sticky';
   export let dismissable: boolean = true;
   export let bannerType: 'default'|'bottom'|'cta'|'signup'|'info'|'custom'='default';
-  export let divDefault: string = 'z-50 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
+  export let divDefault: string = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
   export let insideDiv: string ='flex';
 
   const divClasses = {

src/lib/darkmode/DarkMode.svelte

@@ -5,6 +5,14 @@
   export let btnClass: string =
     'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
 
+  export let size: 'sm' | 'md' | 'lg' = 'md';
+
+  const sizes = {
+    sm: 'w-4 h-4',
+    md: 'w-5 h-5',
+    lg: 'w-6 h-6'
+  };
+
   let toggleTheme: () => void;
 
   onMount(() => {
@@ -28,7 +36,7 @@
   class={classNames(btnClass, $$props.class)}>
   <span class="hidden dark:block">
     <slot name="lightIcon">
-      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <svg class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1
   0 100-2H3a1 1 0 000 2h1z"
@@ -39,7 +47,7 @@
   </span>
   <span class="block dark:hidden">
     <slot name="darkIcon">
-      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <svg class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
         <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
       </svg>
     </slot>

src/lib/forms/Input.svelte

@@ -57,7 +57,7 @@
   const textSizes = { sm: 'sm:text-xs', md: 'text-sm', lg: 'sm:text-base' };
   const leftPadding = { sm: 'pl-9', md: 'pl-10', lg: 'pl-11' };
   const rightPadding = { sm: 'pr-9', md: 'pr-10', lg: 'pr-11' };
-  const inputPadding = { sm: 'p-2', md: 'p-2.5', lg: 'p-4' };
+  const inputPadding = { sm: 'p-2', md: 'p-2.5', lg: 'p-3' };
 
   $: _size = size || clampSize(group?.size) || 'md';
   let inputClass: string;

src/lib/modals/Modal.svelte

@@ -150,7 +150,7 @@
           id="modal"
           class="p-6 space-y-6 flex-1 overflow-y-auto overscroll-contain"
           on:keydown|stopPropagation={handleKeys}
-          on:wheel|stopPropagation={preventWheelDefault}>
+          on:wheel|stopPropagation|passive>
           <slot />
         </div>
         <!-- Modal footer -->

src/lib/navbar/Menu.svelte

@@ -4,8 +4,8 @@
 	export let variation: 'solid' | 'outline' = 'outline';
 	let viewBox: string;
 	let svgpath: string;
-	let svgoutline = `<path d="M3.75 6.75H20.25M3.75 12H20.25M3.75 17.25H20.25" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
-	let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 6.75C3 6.33579 3.33579 6 3.75 6H20.25C20.6642 6 21 6.33579 21 6.75C21 7.16421 20.6642 7.5 20.25 7.5H3.75C3.33579 7.5 3 7.16421 3 6.75ZM3 12C3 11.5858 3.33579 11.25 3.75 11.25H20.25C20.6642 11.25 21 11.5858 21 12C21 12.4142 20.6642 12.75 20.25 12.75H3.75C3.33579 12.75 3 12.4142 3 12ZM3 17.25C3 16.8358 3.33579 16.5 3.75 16.5H20.25C20.6642 16.5 21 16.8358 21 17.25C21 17.6642 20.6642 18 20.25 18H3.75C3.33579 18 3 17.6642 3 17.25Z" fill="${color}"/> `;
+	let svgoutline = `<path stroke="${color}" stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path> `;
+	let svgsolid = `<path fill="${color}" clip-rule="evenodd" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"></path> `;
 	$: switch (variation) {
 		case 'outline':
 			svgpath = svgoutline;

src/lib/navbar/NavSidebarHamburger.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import ToolbarButton from '../toolbar/ToolbarButton.svelte';
+	import classNames from 'classnames';
+	import SidebarMenu from './SidebarMenu.svelte';
+
+	export let btnClass: string = 'ml-3 md:hidden';
+</script>
+
+<ToolbarButton name="Open main menu" on:click {...$$restProps} class={classNames(btnClass, $$props.class)}>
+	<SidebarMenu class="h-6 w-6 shrink-0" variation="solid" />
+</ToolbarButton>

src/lib/navbar/NavUl.svelte

@@ -36,7 +36,7 @@
 </script>
 
 {#if !hidden}
-  <div {...$$restProps} class={_divClass} transition:slide={slideParams}>
+  <div {...$$restProps} class={_divClass} transition:slide={slideParams} on:click>
     <Frame tag="ul" border rounded color="navbarUl" class={_ulClass}>
       <slot />
     </Frame>

src/lib/navbar/Navbar.svelte

@@ -30,7 +30,7 @@
 </script>
 
 <Frame tag="nav" {color} {...$$restProps} class={classNames(navClass, $$props.class)}>
-  <div class={classNames(navDivClass, fluid || 'container')}>
+  <div class={classNames(navDivClass, (fluid && 'w-full') || 'container')}>
     <slot {hidden} {toggle} />
   </div>
 </Frame>

src/lib/navbar/SidebarMenu.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	export let size = '20';
+	export let color = 'currentColor';
+	export let variation: 'solid' | 'outline' = 'outline';
+	let viewBox: string;
+	let svgpath: string;
+	let svgoutline = `<path stroke="${color}" clip-rule="evenodd" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"></path> `;
+	let svgsolid = `<path fill="${color}" clip-rule="evenodd" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"></path> `;
+	$: switch (variation) {
+		case 'outline':
+			svgpath = svgoutline;
+			viewBox = '0 0 20 20';
+			break;
+		case 'solid':
+			svgpath = svgsolid;
+			viewBox = '0 0 20 20';
+			break;
+		default:
+			svgpath = svgoutline;
+			viewBox = '0 0 20 20';
+	}
+	export let ariaLabel = 'bars 3';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click>
+	{@html svgpath}
+</svg>