comand-component-library 4.0.2 → 4.0.4

package/src/ComponentLibrary.vue

@@ -6,7 +6,7 @@
             <a id="anchor-back-to-top"></a>
             <CmdSidebar
                 :cmdHeadline="{headlineText: 'Site Settings', headlineLevel: 3, textAlign: 'center'}"
-                :openSidebar="openSidebar"
+                :openSidebar="openLeftSidebar"
                 @toggle-sidebar="setOpenStatusLeftSidebar"
             >
                 <template #open>
@@ -29,7 +29,7 @@
                                     <label for="select-template">
                                         <span>Select template</span>
                                         <select id="select-template" v-model="selectedTemplate">
-                                            <option value="blank">Blank</option>
+                                            <option value="blank">Blank/Unstyled</option>
                                             <option value="business">Business</option>
                                             <option value="casual">Casual</option>
                                             <option value="dating">Dating</option>
@@ -47,8 +47,9 @@
                             >
                                 <template v-slot:body>
                                     <ul>
-                                        <li><a href="#section-address-data"
-                                               @click="updateSettingsSidebar('CmdAddressData')">Address Data</a></li>
+                                        <li :class="'active' ? activeEntry === 'CmdAddressData' : null"><a
+                                            href="#section-address-data"
+                                            @click="updateSettingsSidebar('CmdAddressData')">Address Data</a></li>
                                         <li><a href="#section-advanced-form-elements">Advanced Form Elements</a></li>
                                         <li><a href="#section-bank-account-data"
                                                @click="updateSettingsSidebar('CmdBankAccountData')">Bank Account
@@ -129,6 +130,7 @@
                             </CmdBox>
                         </template>
                     </CmdBoxWrapper>
+
                     <dl class="comand-versions">
                         <dt>Frontend-Framework Version:</dt>
                         <dd>{{ packageJson.dependencies['comand-frontend-framework'].replace("^", "") }}</dd>
@@ -174,7 +176,7 @@
                 <!-- begin address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-address-data">
-                        Address Data
+                        <span>Address Data</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdAddressData')"></a>
                     </h2>
@@ -192,7 +194,7 @@
                 <!-- begin advanced form elements --------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-advanced-form-elements">Advanced Form Elements</h2>
-                    <h3>Form elements status:</h3>
+                    <h3><span>Form elements status:</span></h3>
                     <div class="flex-container">
                         <ul class="list-status">
                             <li>
@@ -242,59 +244,52 @@
                     <CmdForm :use-fieldset="false" id="advanced-form-elements" novalidate="novalidate">
                         <fieldset class="grid-container-create-columns">
                             <legend>Legend</legend>
-                            <h2>Form Element-Component</h2>
+                            <h2 class="headline-demopage">
+                                <span>Form Element-Component</span>
+                                <a href="#" class="icon-cog" title="Open Component Settings"
+                                   @click.prevent="openSettingsSidebar('CmdFormElement')"></a>
+                            </h2>
+                            <CmdFormElement
+                                ref="CmdFormElement"
+                                v-bind="cmdFormElementSettingsData"
+                                :status="validationStatus"
+                                :disabled="disabledStatus"
+                            />
                             <div class="flex-container">
                                 <CmdFormElement
-                                    labelText="Input (type text):"
+                                    labelText="Input for datalist:"
                                     element="input"
                                     type="text"
                                     :status="validationStatus"
                                     :disabled="disabledStatus"
-                                    placeholder="Type in text"
+                                    placeholder="Type in option"
+                                    :datalist="datalist"
                                     tooltipText="This is a tooltip"
-                                    v-bind="{useCustomTooltip: false}"
                                 />
+                            </div>
+                            <div class="flex-container">
                                 <CmdFormElement
-                                    labelText="Input for selectbox:"
-                                    element="select"
-                                    required="required"
+                                    labelText="Input (type search (without search-button)):"
+                                    element="input"
+                                    type="search"
                                     :status="validationStatus"
                                     :disabled="disabledStatus"
-                                    v-model="selectedOption"
-                                    :selectOptions="selectOptionsData"
+                                    :showSearchButton="false"
+                                    placeholder="Search"
+                                    tooltipText="This is a tooltip"
+                                    v-bind="{useCustomTooltip: false}"
                                 />
                                 <CmdFormElement
-                                    labelText="Input for datalist:"
+                                    labelText="Input (type search (with search-button)):"
                                     element="input"
-                                    type="text"
+                                    type="search"
                                     :status="validationStatus"
                                     :disabled="disabledStatus"
-                                    placeholder="Type in option"
-                                    :datalist="datalist"
+                                    placeholder="Search"
                                     tooltipText="This is a tooltip"
+                                    v-bind="{useCustomTooltip: false}"
                                 />
                             </div>
-                            <CmdFormElement
-                                labelText="Input (type search (without search-button)):"
-                                element="input"
-                                type="search"
-                                :status="validationStatus"
-                                :disabled="disabledStatus"
-                                :showSearchButton="false"
-                                placeholder="Search"
-                                tooltipText="This is a tooltip"
-                                v-bind="{useCustomTooltip: false}"
-                            />
-                            <CmdFormElement
-                                labelText="Input (type search (with search-button)):"
-                                element="input"
-                                type="search"
-                                :status="validationStatus"
-                                :disabled="disabledStatus"
-                                placeholder="Search"
-                                tooltipText="This is a tooltip"
-                                v-bind="{useCustomTooltip: false}"
-                            />
                             <h2>Inputfields in Columns</h2>
                             <div class="flex-container">
                                 <CmdFormElement
@@ -444,27 +439,21 @@
                                 :disabled="disabledStatus"
                             />
                             <hr/>
-                            <h2>Fake Selects</h2>
+                            <!-- begin FakeSelect -->
+                            <h3 class="headline-demopage">
+                                <span>Fake Selects</span>
+                                <a href="#" class="icon-cog" title="Open Component Settings"
+                                   @click.prevent="openSettingsSidebar('CmdFakeSelect')"></a>
+                            </h3>
                             <div class="flex-container">
                                 <!-- type === default: normal selectbox (with optional icons) -->
                                 <CmdFakeSelect
-                                    labelText="Default selectbox:"
-                                    :status="validationStatus"
-                                    :disabled="disabledStatus"
+                                    ref="CmdFakeSelect"
+                                    v-bind="cmdFakeSelectSettingsData"
                                     :selectData="fakeSelectOptionsData"
                                     v-model="fakeSelectDefault"
-                                    :required="true"
-                                    defaultOptionName="Select an option:"
-                                    title="Title for FakeSelect"
-                                />
-                                <CmdFakeSelect
-                                    labelText="Default selectbox with icons:"
-                                    :status="validationStatus"
-                                    :disabled="disabledStatus"
-                                    :selectData="fakeSelectOptionsWithIconsData"
-                                    v-model="fakeSelectDefaultWithIcons"
-                                    defaultOptionName="Select an option:"
-                                />
+                                >
+                                </CmdFakeSelect>
                                 <!-- type === checkboxOptions: selectbox with checkboxes for each option -->
                                 <CmdFakeSelect
                                     labelText="Selectbox with checkboxes:"
@@ -489,24 +478,6 @@
                                     type="checkboxOptions"
                                     :useCustomTooltip="true"
                                 />
-                                <CmdFakeSelect
-                                    labelText="Selectbox with slot-content:"
-                                    :status="validationStatus"
-                                    :disabled="disabledStatus"
-                                    type="content"
-                                    defaultOptionName="HTML-Content:">
-                                    <ul class="custom-fake-select-content">
-                                        <li>
-                                            <div>
-                                                <h3>Headline</h3>
-                                                <p>Some content inside a paragraph</p>
-                                            </div>
-                                            <img
-                                                src="media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg"
-                                                alt="image"/>
-                                        </li>
-                                    </ul>
-                                </CmdFakeSelect>
                                 <CmdFakeSelect
                                     labelText="Selectbox with country flags:"
                                     :status="validationStatus"
@@ -526,7 +497,7 @@
                                     type="color"
                                 />
                             </div>
-
+                            <!-- emd FakeSelect -->
                             <hr/>
 
                             <!-- begin progress bar -->
@@ -678,8 +649,9 @@
                                 checkboxes with values: {{ checkboxValues }}
                             </p>
 
-                            <h3 id="section-toggle-darkmode">
-                                Toggle Dark-Mode
+                            <!-- begin cmd-toggle-darkmode -->
+                            <h3 class="headline-demopage" id="section-toggle-darkmode">
+                                <span>Toggle Dark-Mode</span>
                                 <a href="#" class="icon-cog" title="Open Component Settings"
                                    @click.prevent="openSettingsSidebar('CmdToggleDarkMode')"></a>
                             </h3>
@@ -687,6 +659,7 @@
                                 ref="CmdToggleDarkMode"
                                 v-bind="cmdToggleDarkModeSettingsData"
                             />
+                            <!-- end cmd-toggle-darkmode -->
 
                             <h2>Checkboxes and Radiobuttons</h2>
                             <h3>Checkboxes [native]</h3>
@@ -828,7 +801,7 @@
                             <!-- end checkboxes and radiobuttons -->
 
                             <!-- begin input-groups -->
-                            <h3 id="section-input-group">
+                            <h3 class="headline-demopage" id="section-input-group">
                                 Input-Group
                                 <a href="#" class="icon-cog" title="Open Component Settings"
                                    @click.prevent="openSettingsSidebar('CmdInputGroup')"></a>
@@ -964,7 +937,7 @@
                 <!-- begin bank account data ----------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-bank-account-data">
-                        Bank Account Data
+                        <span>Bank Account Data</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdBankAccountData')"></a>
                     </h2>
@@ -978,10 +951,10 @@
                 <!-- end bank account data ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
                 <!-- begin boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
-                <CmdWidthLimitationWrapper>
-                    <h2 class="headline-demopage" id="section-boxes">Boxes</h2>
-                    <h3>
-                        Default Box
+                <CmdWidthLimitationWrapper anchorId="section-boxes">
+                    <h2 class="headline-demopage">Boxes</h2>
+                    <h3 class="headline-demopage">
+                        <span>Default Box</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdBox')"></a>
                     </h3>
@@ -989,8 +962,30 @@
                         ref="CmdBox"
                         v-bind="cmdBoxSettingsData"
                         textBody="Content"
+                        :useSlots="['body', 'footer']"
                         :cmd-headline="{headlineText: 'Headline for box', headlineLevel: 4}"
-                    />
+                    >
+                        <template v-slot:header>
+                            <h4>
+                                Texts given by slots
+                            </h4>
+                        </template>
+                        <template v-slot:body>
+                            <p>
+                                This content with paragraphs inside is placed inside the box-body.
+                            </p>
+                            <p>
+                                <strong>Header, Content/Body and Footer of this box are given by slots.</strong>
+                            </p>
+                            <p>Additionally 'allowContentToScroll' is active, which enables (as far as a max-height is
+                                defined) the content of this box to scroll</p>
+                        </template>
+                        <template v-slot:footer>
+                            <p>
+                                Footer content
+                            </p>
+                        </template>
+                    </CmdBox>
                     <CmdBoxWrapper
                         :useFlexbox="true"
                         :cmdHeadline="{headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3}"
@@ -1004,7 +999,6 @@
                         />
                     </CmdBoxWrapper>
                     <CmdBoxWrapper
-                        :useFlexbox="true"
                         :use-gap="true"
                         :cmdHeadline="{headlineText: 'Different examples of content-boxes (in BoxWrapper)', headlineLevel: 3}"
                     >
@@ -1032,7 +1026,8 @@
                                 <p>
                                     <strong>Header, Content/Body and Footer of this box are given by slots.</strong>
                                 </p>
-                                <p>Additionally 'allowContentToScroll' is active, which enables (as far as a max-height is defined) the content of this box to scroll</p>
+                                <p>Additionally 'allowContentToScroll' is active, which enables (as far as a max-height
+                                    is defined) the content of this box to scroll</p>
                             </template>
                             <template v-slot:footer>
                                 <p>
@@ -1040,6 +1035,37 @@
                                 </p>
                             </template>
                         </CmdBox>
+                        <CmdBox :useSlots="['header', 'body']" :use-default-padding="false" :collapsible="true">
+                            <template v-slot:header>
+                                <h4>
+                                    Box with inputs
+                                </h4>
+                            </template>
+                            <template v-slot:body>
+                                <CmdForm :showLegend="false" textLegend="Login Form">
+                                    <CmdFormElement
+                                        element="input"
+                                        type="text"
+                                        :required="true"
+                                        labelText="Username:"
+                                        placeholder="Username"
+                                    />
+                                    <CmdFormElement
+                                        element="input"
+                                        type="password"
+                                        :required="true"
+                                        labelText="Password:"
+                                        placeholder="Password"
+                                    />
+                                </CmdForm>
+                            </template>
+                            <!-- will not be displayed, because useSlots-property does not contain 'footer' in array -->
+                            <template v-slot:footer>
+                                <p>
+                                    footer content
+                                </p>
+                            </template>
+                        </CmdBox>
                         <CmdBox :useSlots="['header', 'body']" :use-default-padding="false">
                             <template v-slot:header>
                                 <h4>
@@ -1072,7 +1098,7 @@
                                 </h4>
                             </template>
                             <template v-slot:body>
-                                <img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
+                                <img src="/media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
                             </template>
                         </CmdBox>
                         <CmdBox :useSlots="['header', 'body', 'footer']" :use-default-padding="false">
@@ -1082,7 +1108,7 @@
                                 </h4>
                             </template>
                             <template v-slot:body>
-                                <img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
+                                <img src="/media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
                                 <div class="default-padding">
                                     <h4>Headline</h4>
                                     <p>This is some text information i.e a short-text for a news teaser.</p>
@@ -1141,7 +1167,7 @@
                 <!-- begin breadcrumbs ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper inner-component="div">
                     <h2 class="headline-demopage" id="section-breadcrumbs">
-                        Breadcrumbs
+                        <span>Breadcrumbs</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdBreadcrumbs')"></a>
                     </h2>
@@ -1213,31 +1239,31 @@
                         with text</a>
                     <h3>FancyBox with large image given by url</h3>
                     <a href="#"
-                       @click.prevent="showFancyBox('url', 'media/images/demo-images/large/landscape-01.jpg', 'FancyBox with large image given by url')"
+                       @click.prevent="showFancyBox('url', '/media/images/demo-images/large/landscape-01.jpg', 'FancyBox with large image given by url')"
                        title="Open FancyBox with large image given by url"
                        style="display: inline-flex;"
                     >
-                        <img src="media/images/demo-images/small/landscape-01.jpg" alt="Alternative text"/>
+                        <img src="/media/images/demo-images/small/landscape-01.jpg" alt="Alternative text"/>
                     </a>
                     <h3>FancyBox with large image given by property</h3>
                     <a href="#"
-                       @click.prevent="showFancyBox('image', {large:'media/images/demo-images/large/landscape-02.jpg'}, 'FancyBox with large image given by property')"
+                       @click.prevent="showFancyBox('image', {large:'/media/images/demo-images/large/landscape-02.jpg'}, 'FancyBox with large image given by property')"
                        title="Open FancyBox with large image given by property"
                        style="display: inline-flex;"
                     >
-                        <img src="media/images/demo-images/small/landscape-02.jpg" alt="Alternative text"/>
+                        <img src="/media/images/demo-images/small/landscape-02.jpg" alt="Alternative text"/>
                     </a>
                     <h3>FancyBox with image as object give by property</h3>
                     <a href="#"
                        @click.prevent="showFancyBox('image', {
-                        small: 'media/images/demo-images/medium/landscape-03.jpg',
-                        medium: 'media/images/demo-images/medium/landscape-03.jpg',
-                        large: 'media/images/demo-images/large/landscape-03.jpg'
+                        small: '/media/images/demo-images/medium/landscape-03.jpg',
+                        medium: '/media/images/demo-images/medium/landscape-03.jpg',
+                        large: '/media/images/demo-images/large/landscape-03.jpg'
                    }, 'FancyBox with large image given by property')"
                        title="Open FancyBox with large image given by property"
                        style="display: inline-flex;"
                     >
-                        <img src="media/images/demo-images/small/landscape-03.jpg" alt="Alternative text"/>
+                        <img src="/media/images/demo-images/small/landscape-03.jpg" alt="Alternative text"/>
                     </a>
 
                 </CmdWidthLimitationWrapper>
@@ -1253,7 +1279,7 @@
                 <!-- begin headlines ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-headlines">
-                        Headlines
+                        <span>Headlines</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdHeadline')"></a>
                     </h2>
@@ -1300,14 +1326,21 @@
                 <!-- begin images ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-image">
-                        Image
+                        <span>Image</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdImage')"></a>
                     </h2>
                     <div class="flex-container">
-                        <CmdImage ref="CmdImage" :image="imageData[0].image" :figcaption="imageData[0].figcaption"
-                                  v-bind="cmdImageSettingsData"/>
-                        <CmdImage :image="imageData[1].image" :figcaption="imageData[1].figcaption"/>
+                        <CmdImage
+                            ref="CmdImage"
+                            :image="imageData[0].image"
+                            :figcaption="imageData[0].figcaption"
+                            v-bind="cmdImageSettingsData"
+                        />
+                        <CmdImage
+                            :image="imageData[1].image"
+                            :figcaption="imageData[1].figcaption"
+                        />
                     </div>
                 </CmdWidthLimitationWrapper>
                 <!-- end images ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -1315,7 +1348,7 @@
                 <!-- begin image-gallery------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-image-gallery">
-                        Image-Gallery
+                        <span>Image-Gallery</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdImageGallery')"></a>
                     </h2>
@@ -1342,7 +1375,7 @@
                 <!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-list-of-links">
-                        List Of Links
+                        <span>List Of Links</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdListOfLinks')"></a>
                     </h2>
@@ -1357,7 +1390,7 @@
                 <!-- begin login-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-login-form">
-                        Login Form
+                        <span>Login Form</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdLoginForm')"></a>
                     </h2>
@@ -1371,7 +1404,7 @@
                 <!-- begin main-navigation ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-main-navigation">
-                        Main Navigation
+                        <span>Main Navigation</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdMainNavigation')"></a>
                     </h2>
@@ -1386,7 +1419,7 @@
                 <!-- begin multistep-form-progress-bar ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-multistep-form-progress-bar">
-                        Multistepform-Progressbar
+                        <span>Multistepform-Progressbar</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdMultistepFormProgressBar')"></a>
                     </h2>
@@ -1406,7 +1439,7 @@
                 <!-- begin newsletter-subscription ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-newsletter-subscription">
-                        Newsletter Subscription
+                        <span>Newsletter Subscription</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdNewsletterSubscription')"></a>
                     </h2>
@@ -1424,7 +1457,7 @@
                 <!-- begin opening-hours ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-opening-hours">
-                        Opening Hours
+                        <span>Opening Hours</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdOpeningHours')"></a>
                     </h2>
@@ -1440,7 +1473,7 @@
                 <!-- begin pagination ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-pagination">
-                        Pagination
+                        <span>Pagination</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdPagination')"></a>
                     </h2>
@@ -1467,14 +1500,13 @@
                 <!-- begin site-header ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-site-header">
-                        Site Header
+                        <span>Site Header</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdSiteHeader')"></a>
                     </h2>
                     <CmdSiteHeader
                         ref="CmdSiteHeader"
                         v-bind="cmdSiteHeaderSettingsData"
-                        :cmdMainNavigation="navigationData"
                         :cmdCompanyLogo="companyLogoData"
                     >
                         <template v-slot:topheader>
@@ -1491,7 +1523,7 @@
                 <!-- begin site-search ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-site-search">
-                        Site Search
+                        <span>Site Search</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdSiteSearch')"></a>
                     </h2>
@@ -1511,7 +1543,7 @@
                 <!-- begin slideshow ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-slideshow">
-                        Slideshow
+                        <span>Slideshow</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdSlideshow')"></a>
                     </h2>
@@ -1526,7 +1558,7 @@
                 <!-- begin social-networks ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-social-networks">
-                        Social Networks
+                        <span>Social Networks</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdSocialNetworks')"></a>
                     </h2>
@@ -1551,7 +1583,7 @@
                 <!-- begin system-message ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-system-message">
-                        System Message
+                        <span>System Message</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdSystemMessage')"></a>
                     </h2>
@@ -1571,7 +1603,7 @@
                 <!-- begin tables ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-tables">
-                        Tables
+                        <span>Tables</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdTable')"></a>
                     </h2>
@@ -1582,16 +1614,21 @@
                         :table-data="tableDataLarge"
                     />
                     <h3>Table as wide as possible</h3>
-                    <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
-                              :table-data="tableDataLarge"/>
+                    <CmdTable
+                        :collapsible="true"
+                        :fullWidthOnDefault="false"
+                        :userCanToggleWidth="true"
+                        :table-data="tableDataLarge"
+                    />
                 </CmdWidthLimitationWrapper>
                 <!-- end tables ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
                 <!-- begin tabs ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-tabs">
-                        Tabs
-                        <a href="#" class="icon-cog" title="Open Component Settings" @click.prevent="openSettingsSidebar('CmdTabs')"></a>
+                        <span>Tabs</span>
+                        <a href="#" class="icon-cog" title="Open Component Settings"
+                           @click.prevent="openSettingsSidebar('CmdTabs')"></a>
                     </h2>
                     <CmdTabs
                         ref="CmdTabs"
@@ -1619,7 +1656,7 @@
                 <!-- begin text-image-block ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-text-image-block">
-                        Text-Image-Block
+                        <span>Text-Image-Block</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdTextImageBlock')"></a>
                     </h2>
@@ -1627,7 +1664,7 @@
                         <CmdTextImageBlock
                             ref="CmdTextImageBlock"
                             v-bind="cmdTextImageBlockSettingsData"
-                            :cmdHeadline="{headlineText: 'Text-Image-Block with image', headlineLevel: 3}"
+                            :cmdHeadline="{headlineText: 'Text-Image-Block (with image and plain text)', headlineLevel: 3}"
                             :cmdImage='{
                                 "image": {
                                     "src": "/media/images/demo-images/large/landscape-01.jpg",
@@ -1641,11 +1678,24 @@
                                     "show": true
                                 }
                             }'
-                            htmlContent="Text given as text only"
+                            htmlContent="This text is given as plain text and show below an optional image."
                         />
                         <CmdTextImageBlock
-                            :cmdHeadline="{headlineText: 'Headline', headlineLevel: 3}"
-                            htmlContent="<p>Text given as html-content</p>"
+                            :cmdHeadline="{headlineText: 'Text-Image-Block (with image and html-text)', headlineLevel: 3}"
+                            htmlContent="<p>This text is given as html-text and show below an optional image.</p>"
+                            :cmdImage='{
+                                "image": {
+                                    "src": "/media/images/demo-images/large/landscape-02.jpg",
+                                    "alt": "alternative text",
+                                    "tooltip": "tooltip"
+                                },
+                                "figcaption": {
+                                    "text": "figcaption",
+                                    "position": "bottom",
+                                    "textAlign": "center",
+                                    "show": true
+                                }
+                            }'
                         />
                     </div>
                 </CmdWidthLimitationWrapper>
@@ -1654,7 +1704,7 @@
                 <!-- begin thumbnail-scroller ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-thumbnail-scroller">
-                        Thumbnail-Scroller
+                        <span>Thumbnail-Scroller</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdThumbnailScroller')"></a>
                     </h2>
@@ -1671,7 +1721,7 @@
                 <!-- begin tooltip ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-tooltip">
-                        Tooltip
+                        <span>Tooltip</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdTooltip')"></a>
                     </h2>
@@ -1687,10 +1737,17 @@
                     >
                         Tooltip on hover
                     </CmdTooltip>
-                    <CmdTooltip :delay-to-show-tooltip="2000" related-id="show-with-delay">
+                    <CmdTooltip
+                        :delay-to-show-tooltip="2000"
+                        related-id="show-with-delay"
+                    >
                         Tooltip on hover with delay
                     </CmdTooltip>
-                    <CmdTooltip related-id="show-on-click" :toggle-visibility-by-click="true">
+                    <CmdTooltip
+                        related-id="show-on-click"
+                        :toggle-visibility-by-click="true"
+                        :allowEscapeKey="true"
+                    >
                         Tooltip on click
                     </CmdTooltip>
                 </CmdWidthLimitationWrapper>
@@ -1699,7 +1756,7 @@
                 <!-- begin upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
                 <CmdWidthLimitationWrapper>
                     <h2 class="headline-demopage" id="section-upload-form">
-                        Upload-Form
+                        <span>Upload-Form</span>
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdUploadForm')"></a>
                     </h2>
@@ -1711,6 +1768,13 @@
                 <!-- end upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
             </main>
 
+            <CmdSiteFooter>
+                <!-- begin parent-component -->
+                Footer
+                <!-- end parent-component -->
+            </CmdSiteFooter>
+            <!-- end cmd-site-footer -->
+
             <!-- begin copyright-information ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <CmdCopyrightInformation/>
             <!-- end copyright-information ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -1742,6 +1806,8 @@
                 <!-- end cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
             </CmdFancyBox>
             <!-- end fancy-box ------------------------------------------------------------------------------------------------------------------------------------------------------->
+
+            <!-- begin component-settings-sidebar ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <CmdSidebar
                 v-if="showSettingsSidebar"
                 id="component-settings"
@@ -1759,13 +1825,13 @@
                     />
                 </template>
             </CmdSidebar>
+            <!-- end component-settings-sidebar ------------------------------------------------------------------------------------------------------------------------------------------------------->
         </div><!-- end #page-wrapper -->
-    </div>
+    </div><!-- end #template-id-wrapper -->
 </template>
 
 <script>
 // import used example data
-import accordionData from '@/assets/data/accordion.json'
 import addressData from '@/assets/data/address-data.json'
 import bankAccountData from '@/assets/data/bank-account-data.json'
 import boxUserData from '@/assets/data/box-user.json'
@@ -1777,7 +1843,6 @@ import fakeSelectColorsData from '@/assets/data/fake-select-colors.json'
 import fakeSelectCountriesData from '@/assets/data/fake-select-countries.json'
 import fakeSelectFilterOptionsData from '@/assets/data/fake-select-filter-options.json'
 import fakeSelectOptionsData from '@/assets/data/fake-select-options.json'
-import fakeSelectOptionsWithIconsData from '@/assets/data/fake-select-options-with-icons.json'
 import formElementsData from '@/assets/data/form-elements.json'
 import imageData from '@/assets/data/image.json'
 import imageGalleryData from '@/assets/data/image-gallery.json'
@@ -1804,422 +1869,16 @@ import {openFancyBox} from "@/components/CmdFancyBox.vue"
 
 // import external functions
 import * as functions from "@/mixins/FieldValidation.js"
+import componentSettingsDataAndControls from "@/componentSettingsDataAndControls.vue"
 
 import {localizedTime} from "./components/CmdOpeningHours.vue"
 
 export default {
     name: "App",
+    mixins: [componentSettingsDataAndControls],
     data() {
         return {
-            cmdAddressDataSettingsData: {
-                useSlot: false,
-                showLabelIcons: true,
-                showLabelTexts: false,
-                showIconsOnly: false,
-                showLabels: true
-            },
-            cmdBankAccountDataSettingsData: {
-                allowCopyByClick: false,
-                additionalInformation: ""
-            },
-            cmdBreadcrumbsSettingsData: {
-                breadcrumbLabel: "You are here",
-                breadcrumbSeparator: ">"
-            },
-            cmdBoxSettingsData: {
-                openCollapsedBox: false,
-                rowView: false,
-                boxType: "content",
-                collapsible: false,
-                cutoffTextLines: 0,
-                useDefaultPadding: true,
-                repeatHeadlineInBoxBody: false,
-                fadeLastLine: true,
-                useTransition: false,
-                boxBodyClass: "",
-                profileType: "business",
-                textBody: "",
-                stretchHorizontally: true,
-                stretchVertically: true
-            },
-            cmdBoxSettingsControls: {
-                "boxType": [
-                    {
-                        text: "Content (default)",
-                        value: "content"
-                    },
-                    {
-                        text: "Product",
-                        value: "product"
-                    },
-                    {
-                        text: "User",
-                        value: "user"
-                    }
-                ]
-            },
-            cmdHeadlineSettingsData: {
-                preHeadlineText: "Pre-headline text",
-                headlineText: "Headline text",
-                headlineLevel: 1,
-                textAlign: "left"
-            },
-            cmdHeadlineSettingsControls: {
-                "textAlign": [
-                    {
-                        text: "Left (default)",
-                        value: "left"
-                    },
-                    {
-                        text: "Center",
-                        value: "center"
-                    },
-                    {
-                        text: "Right",
-                        value: "right"
-                    }
-                ]
-            },
-            cmdInputGroupSettingsData: {
-                required: false,
-                inputTypes: "radio",
-                status: "",
-                replaceInputType: false,
-                toggleSwitch: false,
-                useSlot: false,
-                multipleSwitch: false,
-                showLabel: true,
-                labelText: "Group label for input-group:",
-                labelInline: false,
-                stretchHorizontally: false,
-                disabled: false
-            },
-            cmdInputGroupSettingsControls: {
-                "inputTypes": [
-                    {
-                        text: "Checkbox (default)",
-                        value: "checkbox"
-                    },
-                    {
-                        text: "Radio",
-                        value: "radio"
-                    }
-                ]
-            },
-            cmdImageSettingsData: {},
-            cmdImageGallerySettingsData: {
-                useFancyboxForLargeImages: true,
-                figcaptionPosition: "bottom"
-            },
-            cmdImageGallerySettingsControls: {
-                figcaptionPosition: [
-                    {
-                        text: "Top",
-                        value: "top"
-                    },
-                    {
-                        text: "Bottom (default)",
-                        value: "bottom"
-                    }
-                ]
-            },
-            cmdListOfLinksSettingsData: {
-                useGap: true,
-                styleAsBox: false,
-                largeIcons: false,
-                sectionAnchors: false,
-                orientation: "vertical",
-                align: "left"
-            },
-            cmdListOfLinksSettingsControls: {
-                align: [
-                    {
-                        text: "Left (default)",
-                        value: "left"
-                    },
-                    {
-                        text: "Center",
-                        value: "center"
-                    },
-                    {
-                        text: "Right",
-                        value: "right"
-                    },
-
-                ],
-                orientation: [
-                    {
-                        text: "Vertical (default)",
-                        value: "vertical"
-                    },
-                    {
-                        text: "Horizontal",
-                        value: "horizontal"
-                    }
-                ]
-            },
-            cmdLoginFormSettingsData: {
-                textLegendLoginForm: "Login form",
-                showLegend: true,
-                textLegendForgotLoginForm: "Forgot login form"
-            },
-            cmdMainNavigationSettingsData: {
-                offcanvasPosition: "right",
-                stretchMainItems: false,
-                persistOnMobile: false,
-                subentriesIconClass: "icon-single-arrow-down",
-                subSubentriesIconClass: "icon-single-arrow-right"
-            },
-            cmdMultistepFormProgressBarSettingsData: {
-                showStepNumber: false,
-                separatorIconClass: "icon-single-arrow-right"
-            },
-            cmdMultistepFormProgressBarSettingsControls: {
-                separatorIconClass: [
-                    {
-                        text: "icon-single-arrow-right (default)",
-                        value: "icon-single-arrow-right"
-                    },
-                    {
-                        text: "icon-double-arrow-right",
-                        value: "icon-double-arrow-right"
-                    }
-                ]
-            },
-            cmdNewsletterSubscriptionSettingsData: {
-                buttonType: "submit",
-                showLegend: true,
-                textLegend: "Stay up-to-date"
-            },
-            cmdNewsletterSubscriptionSettingsControls: {
-                buttonType: [
-                    {
-                        text: "Button (default)",
-                        value: "button"
-                    },
-                    {
-                        text: "Submit",
-                        value: "submit"
-                    }
-                ]
-            },
-            cmdOpeningHoursSettingsData: {
-                closed: true,
-                separator: "-",
-                textOpen: "Open right now!",
-                textClosed: "Closed right now!",
-                textHolidays: "",
-                textMiscInfo: "",
-                abbreviationTextAm: "am",
-                abbreviationTextPm: "pm",
-                componentHandlesClosedStatus: false,
-                cmdHeadline: {
-                    headlineText: "Opening Hours",
-                    headlineLevel: 3
-                }
-            },
-            cmdPaginationSettingsData: {
-                pages: 3,
-                itemsPerPage: 1,
-                showPageNumbers: true,
-                linkType: "button"
-            },
-            cmdPaginationSettingsControls: {
-                linkType: [
-                    {
-                        text: "Href (default)",
-                        value: "href"
-                    },
-                    {
-                        text: "Button",
-                        value: "button"
-                    }
-                ]
-            },
-            cmdSiteHeaderSettingsData: {
-                sticky: false,
-                navigationInline: false,
-                useGrid: true
-            },
-            cmdSiteSearchSettingsData: {
-                useFilters: true,
-                textLegend: "Search",
-                showLegend: true
-            },
-            cmdSlideshowSettingsData: {
-                useSlot: false,
-                autoplay: false,
-                autoplayInterval: 5000,
-                showQuickLinkIcons: true,
-                showCounter: true
-            },
-            cmdSocialNetworksSettingsData: {
-                align: "left",
-                useGap: true,
-                stretchButtons: false,
-                userMustAcceptDataPrivacy: true,
-                tooltipAcceptDataPrivacy: "You must accept data privacy conditions!",
-                buttonTextAlign: "left"
-            },
-            cmdSocialNetworksSettingsControls: {
-                align: [
-                    {
-                        text: "Left (default)",
-                        value: "left"
-                    },
-                    {
-                        text: "Center",
-                        value: "center"
-                    },
-                    {
-                        text: "Right",
-                        value: "right"
-                    }
-                ]
-            },
-            cmdSystemMessageSettingsData: {
-                validationStatus: "error",
-                fullWidth: true,
-                systemMessage: "This is an error message!",
-                messageHeadlineLevel: 4
-            },
-            cmdSystemMessageSettingsControls: {
-                validationStatus: [
-                    {
-                        text: "Error",
-                        value: "error"
-                    },
-                    {
-                        text: "Warning",
-                        value: "warning"
-                    },
-                    {
-                        text: "Success",
-                        value: "success"
-                    },
-                    {
-                        text: "Info",
-                        value: "info"
-                    }
-                ]
-            },
-            cmdTableSettingsData: {
-                collapsible: false,
-                fullWidthOnDefault: false,
-                userCanToggleWidth: true,
-                showSlideButtons: true
-            },
-            cmdTabsSettingsData: {
-                stretchTabs: false,
-                useSlot: false,
-                activeTab: 0
-            },
-            cmdTextImageBlockSettingsData: {
-                htmlContent: "Text given as html-content",
-                paragraphTextAlign: "left",
-                headlinePosition: "aboveImage"
-            },
-            cmdTextImageBlockSettingsControls: {
-                paragraphTextAlign: [
-                    {
-                        text: "Left (default)",
-                        value: "left"
-                    },
-                    {
-                        text: "Center",
-                        value: "center"
-                    },
-                    {
-                        text: "Right",
-                        value: "right"
-                    }
-                ],
-                headlinePosition: [
-                    {
-                        text: "Above Image (default)",
-                        value: "aboveImage"
-                    },
-                    {
-                        text: "Below Image",
-                        value: "belowImage"
-                    }
-                ]
-            },
-            cmdThumbnailScrollerSettingsData: {
-                orientation: "horizontal",
-                fullWidth: false,
-                largeIcons: false,
-                contentType: "image",
-                executeOnClick: "fancyBox",
-                allowOpenFancyBox: true,
-                activeItemIndex: 0,
-                useGalleryScroller: false
-            },
-            cmdThumbnailScrollerSettingsControls: {
-                orientation: [
-                    {
-                        text: "Horizontal (default)",
-                        value: "horizontal"
-                    },
-                    {
-                        text: "Vertical",
-                        value: "vertical"
-                    }
-                ],
-                contentType: [
-                    {
-                        text: "Image (default)",
-                        value: "image"
-                    },
-                    {
-                        text: "Text",
-                        value: "text"
-                    }
-                ],
-                executeOnClick: [
-                    {
-                        text: "Fancybox (default)",
-                        value: "fancybox"
-                    },
-                    {
-                        text: "URL",
-                        value: "url"
-                    },
-                    {
-                        text: "Emit",
-                        value: "emit"
-                    }
-                ]
-            },
-            cmdToggleDarkModeSettingsData: {
-                styledAsButton: false,
-                showLabel: true,
-                useStyledLayout: false,
-                labelTextDarkMode: "Dark-mode enabled",
-                labelTextLightMode: "Light-mode enabled"
-            },
-            cmdTooltipSettingsData: {
-                tooltipText: "This is a tooltip!",
-                delayToShowTooltip: 0,
-                status: "",
-                toggleVisibilityByClick: false
-            },
-            cmdUploadFormSettingsData: {
-                showTotalUpload: true,
-                componentHandlesUpload: true,
-                commentRequired: true,
-                commentStatusMessage: "",
-                enableDragAndDrop: false,
-                enableComment: true,
-                presetComment: "",
-                maxTotalUploadSize: 5242880,
-                maxFileUploadSize: 10485760,
-                allowMultipleFileUploads: false,
-                advancedMode: true,
-                showLegend: true,
-                textLegend: "Advanced upload form",
-                allowedFileExtensions: ["jpg", "eps"]
-            },
+            activeEntry: "CmdAddressData",
             componentControls: {},
             selectedTemplate: "blank",
             acceptedCookies: ["google-maps"],
@@ -2310,8 +1969,7 @@ export default {
             radiobuttonValue: "radiobuttonValue1",
             replacedRadiobuttonValue: "radiobuttonValue1",
             fancyBoxCookieDisclaimer: false,
-            fakeSelectDefault: 3,
-            fakeSelectDefaultWithIcons: 1,
+            fakeSelectDefault: "",
             fakeSelectCheckbox: [1],
             fakeSelectFilters: [],
             datalist: {
@@ -2331,10 +1989,9 @@ export default {
             ],
             openLeftSidebar: true,
             openRightSidebar: false,
-            openBoxes: [0],
+            openBoxes: [1],
 
             // assign data from json files to data-properties
-            accordionData,
             addressData,
             bankAccountData,
             boxProductData,
@@ -2346,7 +2003,6 @@ export default {
             fakeSelectCountriesData,
             fakeSelectFilterOptionsData,
             fakeSelectOptionsData,
-            fakeSelectOptionsWithIconsData,
             formElementsData,
             listOfLinksData,
             imageData,
@@ -2380,7 +2036,12 @@ export default {
         }
     },
     methods: {
+        setActiveEntry(ComponentName) {
+            this.activeEntry = ComponentName
+        },
         updateSettingsSidebar(ComponentName) {
+            this.setActiveEntry(ComponentName)
+
             if (this.openRightSidebar) {
                 this.openSettingsSidebar(ComponentName)
             }
@@ -2429,7 +2090,7 @@ export default {
             return (h, m) => (localizedTime(language))(h, m).toLowerCase()
         },
         idForReplacedInputsInInputGroup(prefix) {
-            return inputGroupRadiobuttonsData.map(item => ({...item, id: prefix + item.id}))
+            return inputGroupRadiobuttonsData.map(item => ({...item, id: prefix + item.id, name: prefix + item.name}))
         },
         closeCookieDisclaimer(event) {
             this.fancyBoxCookieDisclaimer = false
@@ -2548,82 +2209,86 @@ export default {
 </script>
 
 <style>
-.list-status {
-    .active {
-        color: var(--text-color);
-        text-decoration: none;
-        background: none;
+.demopage {
+    .list-status {
+        .active {
+            color: var(--default-text-color);
+            text-decoration: none;
+            background: none;
+        }
     }
-}
 
-main .cmd-width-limitation-wrapper:not(:last-child) {
-    border-bottom: var(--default-border);
-    border-style: dashed;
+    main .cmd-width-limitation-wrapper:not(:last-child) {
+        border-bottom: var(--default-border);
+        border-style: dashed;
 
-    section {
-        padding-top: calc(var(--default-padding) * 6);
-        padding-bottom: calc(var(--default-padding) * 6);
+        section {
+            padding-top: calc(var(--default-padding) * 6);
+            padding-bottom: calc(var(--default-padding) * 6);
+        }
     }
-}
 
-.headline-demopage {
-    [class*="icon-"] {
-        font-size: 2rem;
+    .headline-demopage {
+        [class*="icon-"] {
+            font-size: 2rem;
+            color: var(--pure-white);
+            margin: 0;
+        }
     }
-}
 
-.cmd-sidebar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 2000;
-    max-width: 30rem;
-    height: 100vh;
-    margin: 0;
-    padding: 0;
-    gap: 0;
-    border: 0;
-    border-right-width: 0;
-    border-right-style: none;
-    border-right-color: currentcolor;
-    border-right: var(--default-border);
-
-    .box {
-        border-right: 0;
-
-        &:not(:last-child) {
-            border-bottom: 0;
+    .cmd-sidebar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 2000;
+        max-width: 30rem;
+        height: 100vh;
+        margin: 0;
+        padding: 0;
+        gap: 0;
+        border: 0;
+        border-right-width: 0;
+        border-right-style: none;
+        border-right-color: currentcolor;
+        border-right: var(--default-border);
+
+        .box {
+            border-right: 0;
+
+            &:not(:last-child) {
+                border-bottom: 0;
+            }
         }
-    }
 
-    .open-slot-wrapper {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        height: 100%;
+        .open-slot-wrapper {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            height: 100%;
 
-        .comand-versions {
-            padding: var(--default-padding);
-            margin: 0;
+            .comand-versions {
+                padding: var(--default-padding);
+                margin: 0;
+            }
         }
-    }
 
-    .closed-sidebar {
-        display: flex;
-        flex-direction: column;
-        gap: var(--default-gap);
-        padding: var(--default-padding);
-    }
+        .closed-sidebar {
+            display: flex;
+            flex-direction: column;
+            gap: var(--default-gap);
+            padding: var(--default-padding);
+        }
 
-    &:last-child {
-        left: auto;
-        right: 0;
+        &:last-child {
+            left: auto;
+            right: 0;
+        }
     }
-}
 
-#component-settings {
-    .open-slot-wrapper {
-        display: block;
+    #component-settings {
+        .open-slot-wrapper {
+            display: block;
+        }
     }
 }
 </style>