comand-component-library 3.3.74 → 3.3.76

package/src/assets/data/image.json

@@ -14,11 +14,7 @@
   },
   {
     "image": {
-      "src": {
-        "small": "media/images/demo-images/small/landscape-01.jpg",
-        "medium": "media/images/demo-images/medium/landscape-01.jpg",
-        "large": "media/images/demo-images/large/landscape-01.jpg"
-      },
+      "src": "media/images/demo-images/large/landscape-02.jpg",
       "alt": "Alternative text",
       "tooltip": "Tooltip"
     },

package/src/assets/styles/global-styles.scss

@@ -41,282 +41,293 @@
 
 // assign scss-variables for breakpoints (from variables.scss) to css-variables, to get access to their value in JavaScript by getComputedStyle(document.documentElement).getPropertyValue
 html {
-  --medium-max-width: #{$medium-max-width};
-  --small-max-width: #{$small-max-width};
+    --medium-max-width: #{$medium-max-width};
+    --small-max-width: #{$small-max-width};
 }
+
 /* ---------------------------------------------- BEGIN COMPONENTS AND GLOBAL STYLES -------------------------------------------------- */
 /* begin styles for main structure --------------------------------------------------------------------------------------------------------------------------------------------------- */
 body {
-  overflow: hidden;
+    overflow: hidden;
 }
 
 #page-wrapper {
-  scroll-padding-top: 10.5rem;
-  display: flex;
-  flex-direction: column;
-  scroll-snap-type: y mandatory;
-  overflow-y: scroll;
-  height: 100vh;
-  scroll-behavior: smooth;
-
-  .cmd-site-footer {
-    margin-top: auto;
-  }
+    scroll-padding-top: 10.5rem;
+    display: flex;
+    flex-direction: column;
+    scroll-snap-type: y mandatory;
+    overflow-y: scroll;
+    width: 100vw;
+    height: 100vh;
+    scroll-behavior: smooth;
+
+    .cmd-site-footer {
+        margin-top: auto;
+    }
 }
 
 #component-library {
-  /*scroll-padding-top: unset !important;*/
-  scroll-snap-type: unset !important;
+    /*scroll-padding-top: unset !important;*/
+    scroll-snap-type: unset !important;
 }
 
 body, .cmd-site-header, .cmd-site-footer, .cmd-copyright-information {
-  transition: background linear .5s;
+    transition: background linear .5s;
 }
+
 /* end styles for main structure --------------------------------------------------------------------------------------------------------------------------------------------------- */
 
 /* begin .avoid-scrolling --------------------------------------------------------------------------------------------------------------------------------------------------- */
 body.avoid-scrolling {
-  overflow: hidden;
-  height: 100%;
+    overflow: hidden;
+    height: 100%;
 }
+
 /* end .avoid-scrolling --------------------------------------------------------------------------------------------------------------------------------------------------- */
 
 /* begin flags --------------------------------------------------------------------------------------------------------------------------------------------------- */
 .flag {
-  width: 3rem;
-  background-size: 100% 100%;
-  display: block;
+    width: 3rem;
+    background-size: 100% 100%;
+    display: block;
 }
+
 /* end flags --------------------------------------------------------------------------------------------------------------------------------------------------- */
 
 /* begin input-wrapper for .select --------------------------------------------------------------------------------------------------------------------------------------------------- */
 .select {
-  height: var(--input-height); /* forces different browsers to render same height */
+    height: var(--input-height); /* forces different browsers to render same height */
 }
 
 .input-wrapper {
-  .select {
-    &:first-of-type {
-      > ul {
-        > li {
-          &:first-child {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-          }
+    .select {
+        &:first-of-type {
+            > ul {
+                > li {
+                    &:first-child {
+                        border-top-right-radius: 0;
+                        border-bottom-right-radius: 0;
+                    }
+                }
+            }
         }
-     }
-   }
-
-    &:last-of-type {
-      > ul {
-        > li {
-          &:first-child {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-          }
+
+        &:last-of-type {
+            > ul {
+                > li {
+                    &:first-child {
+                        border-top-left-radius: 0;
+                        border-bottom-left-radius: 0;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
+
 /* end input-wrapper for .select --------------------------------------------------------------------------------------------------------------------------------------------------- */
 
 /* begin product-listing --------------------------------------------------------------------------------------------------------------------------------------------------- */
 #product-listing-wrapper {
-  > a {
-    border: var(--default-border);
-    text-decoration: none;
-    display: flex;
-    flex-direction: column;
-    grid-column: span var(--grid-small-span);
-    order: 1;
-
-    &:hover, &:active, &:focus {
-      border-color: var(--primary-color);
-      background: var(--default-background-color);
+    > a {
+        border: var(--default-border);
+        text-decoration: none;
+        display: flex;
+        flex-direction: column;
+        grid-column: span var(--grid-small-span);
+        order: 1;
+
+        &:hover, &:active, &:focus {
+            border-color: var(--primary-color);
+            background: var(--default-background-color);
+        }
     }
-  }
 
-  img {
-    order: 1;
-  }
+    img {
+        order: 1;
+    }
 
-  &.products-squares  {
-    > a {
-      grid-column: span calc(var(--grid-columns) / 2);
+    &.products-squares {
+        > a {
+            grid-column: span calc(var(--grid-columns) / 2);
+        }
     }
-  }
 
-  &.products-lines {
-    > a {
-      grid-column: span var(--grid-columns);
-      flex-direction: unset;
+    &.products-lines {
+        > a {
+            grid-column: span var(--grid-columns);
+            flex-direction: unset;
+
+            img {
+                margin-left: 0;
+            }
+        }
+
+        & .product-information {
+            display: flex;
+            flex-direction: column;
+            padding: calc(var(--default-padding) * 2);
+            margin-right: auto;
+        }
 
-      img {
-        margin-left: 0;
-      }
+        .description {
+            display: block;
+        }
     }
 
-    & .product-information {
-      display: flex;
-      flex-direction: column;
-      padding: calc(var(--default-padding) * 2);
-      margin-right: auto;
+    &.product-information {
+        order: 2;
     }
 
     .description {
-      display: block;
+        display: none;
+    }
+
+    h3, div {
+        padding: var(--default-padding);
+        margin: 0;
     }
-  }
-
-  &.product-information {
-    order: 2;
-  }
-
-  .description {
-    display: none;
-  }
-
-  h3, div {
-    padding: var(--default-padding);
-    margin: 0;
-  }
-
-  h3, p {
-    text-align: center;
-  }
-
-  .price {
-    order: 3;
-    margin-top: auto;
-  }
-
-  p {
-    &:last-child {
-      &, & > span {
-        margin-bottom: 0;
-        font-size: 2rem;
-      }
+
+    h3, p {
+        text-align: center;
     }
 
-    > span {
-      &:first-child {
-        text-decoration: line-through;
-        font-style: italic;
-        margin-right: var(--default-margin);
-        opacity: var(--reduced-opacity);
-        font-size: 1.5rem;
-      }
+    .price {
+        order: 3;
+        margin-top: auto;
+    }
+
+    p {
+        &:last-child {
+            &, & > span {
+                margin-bottom: 0;
+                font-size: 2rem;
+            }
+        }
+
+        > span {
+            &:first-child {
+                text-decoration: line-through;
+                font-style: italic;
+                margin-right: var(--default-margin);
+                opacity: var(--reduced-opacity);
+                font-size: 1.5rem;
+            }
+        }
     }
-  }
 }
+
 /* end product-listing --------------------------------------------------------------------------------------------------------------------------------------------------- */
 
 /* begin tooltip for cmd-form-element and cmd-fake-select ---------------------------------------------------------------------------------------------------------------- */
 .cmd-form-element, .cmd-fake-select, .cmd-input-group {
-  .cmd-tooltip {
-    position: absolute;
-    right: 0;
-    transform: translateY(calc(-100% - calc(var(--default-margin) / 2)));
-    left: auto !important; /* overwrite calculated inline-styles from javascript for cmd-tooltip-component */
-    top: 0 !important; /* overwrite calculated inline-styles from javascript for cmd-tooltip-component */
-  }
-
-  &.has-state, & + .cmd-tooltip {
-    .label-text {
-      > span, > a, sup {
-        color: var(--status-color);
-      }
+    .cmd-tooltip {
+        position: absolute;
+        right: 0;
+        transform: translateY(calc(-100% - calc(var(--default-margin) / 2)));
+        left: auto !important; /* overwrite calculated inline-styles from javascript for cmd-tooltip-component */
+        top: 0 !important; /* overwrite calculated inline-styles from javascript for cmd-tooltip-component */
     }
 
-    &.error {
-      --status-color: var(--error-color);
-    }
+    &.has-state, & + .cmd-tooltip {
+        .label-text {
+            > span, > a, sup {
+                color: var(--status-color);
+            }
+        }
 
-    &.warning {
-      --status-color: var(--warning-color);
-    }
+        &.error {
+            --status-color: var(--error-color);
+        }
 
-    &.success {
-      --status-color: var(--success-color);
-    }
+        &.warning {
+            --status-color: var(--warning-color);
+        }
+
+        &.success {
+            --status-color: var(--success-color);
+        }
 
-    &.info {
-      --status-color: var(--info-color);
+        &.info {
+            --status-color: var(--info-color);
+        }
     }
-  }
 
-  & + .cmd-tooltip {
-    border-color: var(--status-color);
-  }
+    & + .cmd-tooltip {
+        border-color: var(--status-color);
+    }
 }
+
 /* end tooltip for cmd-form-element and cmd-fake-select ------------------------------------------------------------------------------------------------------------------ */
 /* ---------------------------------------------- END COMPONENTS AND GLOBAL STYLES -------------------------------------------------- */
 
 /* ---------------------------------------------- BEGIN MEDIA QUERIES AND BROWSER SPECIFIC STYLES -------------------------------------------------- */
 /* begin styles for medium screens --------------------------------------------------------------------------------------------------------------------------------------------------- */
 @media only screen and (max-width: $medium-max-width) {
-  html {
-    --grid-small-span: 3; /* default column span smaller part */
-    --grid-large-span: 3; /* default column span larger part */
-  }
+    html {
+        --grid-small-span: 3; /* default column span smaller part */
+        --grid-large-span: 3; /* default column span larger part */
+    }
 }
+
 /* end styles for medium screens --------------------------------------------------------------------------------------------------------------------------------------------------- */
 
 /* begin styles for small screens --------------------------------------------------------------------------------------------------------------------------------------------------- */
 @media only screen and (max-width: $small-max-width) {
-  body, html {
-    height: auto;
-  }
-
-  html {
-    --grid-small-span: 4; /* default column span smaller part */
-    --grid-large-span: 4; /* default column span larger part */
-  }
-
-  .section-wrapper {
-    padding: calc(var(--default-padding) * 2) 0;
-  }
-
-  a[href^="tel"] {
-    text-decoration: underline;
-  }
+    body, html {
+        height: auto;
+    }
+
+    html {
+        --grid-small-span: 4; /* default column span smaller part */
+        --grid-large-span: 4; /* default column span larger part */
+    }
+
+    .section-wrapper {
+        padding: calc(var(--default-padding) * 2) 0;
+    }
+
+    a[href^="tel"] {
+        text-decoration: underline;
+    }
 }
+
 /* end styles for small screens --------------------------------------------------------------------------------------------------------------------------------------------------- */
 /* ---------------------------------------------- END MEDIA QUERIES AND BROWSER SPECIFIC STYLES -------------------------------------------------- */
 
 /* ---------------------------------------------- BEGIN COLORS-SCHEMES (LIGHT-/DARK-MODE) -------------------------------------------------- */
 html {
-  &.light-mode {
-    /* assign default colors for custom light-mode set by class */
-    --color-scheme-text-color: var(--light-mode-text-color);
-    --color-scheme-text-color-buttons: var(--light-mode-text-color-buttons);
-    --color-scheme-background-color: var(--light-mode-background-color);
-    --color-scheme-text-color-inverted: var(--dark-mode-text-color);
-    --color-scheme-background-inverted: var(--dark-mode-background-color);
-    --default-background-color-lightness: 97%;
-  }
-
-
-  --color-scheme-text-color-buttons: var(--dark-mode-text-color-buttons);
-  --color-scheme-text-color-inverted: var(--light-mode-text-color);
-  --color-scheme-background: var(--dark-mode-background-color);
-  --color-scheme-background-inverted: var(--light-mode-background-color);
-  --default-background-color-lightness: 20%;
-  --hyperlink-color: var(--hyperlink-color-highlighted);
-
-  &.dark-mode {
-    /* assign default colors for custom dark-mode set by class */
-    --color-scheme-text-color: var(--dark-mode-text-color);
+    &.light-mode {
+        /* assign default colors for custom light-mode set by class */
+        --color-scheme-text-color: var(--light-mode-text-color);
+        --color-scheme-text-color-buttons: var(--light-mode-text-color-buttons);
+        --color-scheme-background-color: var(--light-mode-background-color);
+        --color-scheme-text-color-inverted: var(--dark-mode-text-color);
+        --color-scheme-background-inverted: var(--dark-mode-background-color);
+        --default-background-color-lightness: 97%;
+    }
+
     --color-scheme-text-color-buttons: var(--dark-mode-text-color-buttons);
-    --color-scheme-background-color: var(--dark-mode-background-color);
     --color-scheme-text-color-inverted: var(--light-mode-text-color);
+    --color-scheme-background: var(--dark-mode-background-color);
     --color-scheme-background-inverted: var(--light-mode-background-color);
     --default-background-color-lightness: 20%;
 
-    :where(label, .label) .label-text > [class*="icon-"] {
-      background: var(--dark-gray);
+    &.dark-mode {
+        /* assign default colors for custom dark-mode set by class */
+        --color-scheme-text-color: var(--dark-mode-text-color);
+        --color-scheme-text-color-buttons: var(--dark-mode-text-color-buttons);
+        --color-scheme-background-color: var(--dark-mode-background-color);
+        --color-scheme-text-color-inverted: var(--light-mode-text-color);
+        --color-scheme-background-inverted: var(--light-mode-background-color);
+        --default-background-color-lightness: 20%;
+        --hyperlink-color-lightness: 40%; /* hyperlink-color-lightness */
+        --hyperlink-color-highlighted-lightness: 50%; /* hyperlink-color-highlighted-lightness (used for highlighted hyperlinks) */
+
+        :where(label, .label) .label-text > [class*="icon-"] {
+            background: var(--dark-gray);
+        }
     }
-  }
 }
+
 /* ---------------------------------------------- END COLORS-SCHEMES (LIGHT-/DARK-MODE) -------------------------------------------------- */

package/src/components/CmdBackToTopButton.vue

@@ -1,7 +1,7 @@
 <template>
     <!-- begin cmd-back-to-top-button -->
     <transition name="fade">
-        <a v-if="show" class="cmd-back-to-top-button" href="#" :title="iconBackToTop.tooltip" @click.prevent="onBackToTop">
+        <a v-if="show" class="cmd-back-to-top-button button" id="back-to-top-button" href="#" role="button" :title="iconBackToTop.tooltip" @click.prevent="onBackToTop">
             <!-- begin CmdIcon -->
             <CmdIcon :iconClass="iconBackToTop.iconClass" :type="iconBackToTop.iconType" />
             <!-- end CmdIcon -->
@@ -89,31 +89,3 @@ export default {
     }
 }
 </script>
-
-<style lang="scss">
-/* begin cmd-back-to-top-button ---------------------------------------------------------------------------------------- */
-.cmd-back-to-top-button {
-    padding: var(--default-padding);
-    display: inline-flex;
-    position: fixed;
-    right: 2rem;
-    bottom: 2rem;
-    text-decoration: none;
-    z-index: 1000;
-    border: var(--default-border);
-    background: var(--color-scheme-background-color);
-    border-radius: var(--full-circle);
-    line-height: 100%;
-
-    & [class*="icon-"] {
-       line-height: 100%; /* avoids icon-bounding-box to be stretched by global line-height */
-    }
-
-    &:hover, &:active, &:focus {
-        border-color: var(--primary-color);
-        transition: var(--default-transition);
-    }
-}
-
-/* cmd-back-to-top-button ------------------------------------------------------------------------------------------ */
-</style>

package/src/components/CmdBox.vue

@@ -466,11 +466,17 @@ export default {
             }
         }
 
+        &.open {
+            > .box-header {
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+        }
+
         > .box-header {
             display: flex;
             align-items: center;
-            border-top-left-radius: var(--border-radius);
-            border-top-right-radius: var(--border-radius);
+            border-radius: var(--border-radius);
             padding: calc(var(--default-padding) / 2) var(--default-padding);
             background: var(--secondary-color);
             color: var(--pure-white);
@@ -532,12 +538,12 @@ export default {
 
             img {
                 display: block;
+                border-radius: 0;
             }
 
             .navigation {
                 margin: 0;
                 height: 100%;
-                background: var(--pure-white);
 
                 li {
                     list-style-type: none;
@@ -547,7 +553,6 @@ export default {
                         display: block;
                         padding: var(--default-padding);
                         text-decoration: none;
-                        background: var(--pure-white);
                         border-bottom: var(--default-border);
 
                         &:hover, &:active, &:focus {
@@ -632,6 +637,8 @@ export default {
 
             img {
                 border: 0;
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
             }
 
             figcaption {

package/src/components/CmdFakeSelect.vue

@@ -532,10 +532,10 @@ export default {
                     height: inherit;
                     border: var(--default-border);
                     background: var(--color-scheme-background-color);
-                    color: var(--text-color);
+                    color: var(--color-scheme-text-color);
 
                     span, [class*="icon"] {
-                        color: var(--text-color);
+                        color: var(--color-scheme-text-color);
                     }
 
                     .option-name {
@@ -553,7 +553,7 @@ export default {
                         border-color: var(--primary-color);
 
                         span, [class*="icon"] {
-                            color: var(--text-color);
+                            color: var(--color-scheme-text-color-inverted);
                         }
                     }
                 }
@@ -611,7 +611,7 @@ export default {
                 background: var(--light-gray);
 
                 span {
-                    color: var(--text-color);
+                    color: var(--hyperlink-color);
                 }
 
                 &:hover, &:active, &:focus {

package/src/components/CmdFormElement.vue

@@ -22,14 +22,13 @@
 
         <!-- begin label-text (+ required asterisk) -->
         <span v-if="(labelText || $slots.labeltext) && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
-              v-show="showLabel"
-              class="label-text">
+              :class="['label-text', { hidden: !showLabel }]">
             <span>
                 <template v-if="labelText">{{ labelText }}</template>
                 <!-- begin slot 'labeltext' -->
                 <slot v-else name="labeltext" />
                 <!-- end slot 'labeltext' -->
-                <sup v-if="$attrs.required">*</sup>
+                <sup v-if="$attrs.required" aria-hidden="true">*</sup>
             </span>
 
             <!-- begin CmdTooltipForInputElements -->
@@ -154,7 +153,7 @@
                     <span class="label-text">{{ onLabel }}</span>
                     <span class="label-text">{{ offLabel }}</span>
                 </span>
-                <span v-if="labelText" class="label-text">
+                <span v-if="labelText" :class="['label-text', {hidden: !showLabel}]">
                     <span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
                 </span>
             </template>
@@ -879,12 +878,12 @@ export default {
             // set styles to avoid overwriting by has-state-colors
             &.button {
                 span {
-                    color: var(--pure-white);
+                    color: var(--color-scheme-background-color);
                 }
 
                 &:hover, &:active, &:focus {
                     span {
-                        color: var(--text-color);
+                        color: var(--color-scheme-text-color);
                     }
                 }
             }