@norgate-av/ch5-crcomlib 2.17.2

package/build_bundles/generate-metadata/sass-schema.json

@@ -0,0 +1,2892 @@
+[
+    {
+        "group": "ch5-animation",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-animation",
+                        "description": "Main Class\n",
+                        "value": "position: relative;\n  display: inline-block;\n  color: var(--ch5-animation--color);\n\n  /// Applied when startAnimating='true'\n  .ch5-animation--start-animating-true {\n    animation-play-state: running;\n  }\n\n  /// Applied when startAnimating='false'\n  .ch5-animation--start-animating-false {\n    animation-play-state: paused;\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-animation--start-animating-true",
+                        "description": "Applied when startAnimating='true'\n",
+                        "value": "animation-play-state: running;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-animation--start-animating-false",
+                        "description": "Applied when startAnimating='false'\n",
+                        "value": "animation-play-state: paused;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-animation--disabled",
+                        "description": "Applied when disabled='true'\n",
+                        "value": "@include ch5-component-disabled();"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-animation--size-regular",
+                        "description": "Applied when size='regular'\n",
+                        "value": "font-size: var(--ch5-animation--size-regular);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-animation--size-small",
+                        "description": "Applied when size='small'\n",
+                        "value": "font-size: var(--ch5-animation--size-small);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-animation--size-large",
+                        "description": "Applied when size='large'\n",
+                        "value": "font-size: var(--ch5-animation--size-large);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-animation--size-x-large",
+                        "description": "Applied when size='x-large'\n",
+                        "value": "font-size: var(--ch5-animation--size-x-large);"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-background",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-background",
+                        "description": "Added automatically on the ch5-background element\n",
+                        "value": "position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n\n  /// @require .ch5-background\n  /// Added automatically on the first parent of the ch5-background element\n  &--parent {\n    position: relative;\n    z-index: 1;\n  }\n\n  /// @require .ch5-background\n  /// Added automatically on the all canvas child of ch5-background element\n  &--canvas {\n    position: absolute;\n    left: 0;\n    top: 0;\n    opacity: 0;\n    transition-property: opacity;\n    transition-duration: var(--ch5-background--transition-duration);\n    transition-timing-function: var(--ch5-background--transition-timing-function);\n\n    &.ch5bg-fadein {\n      opacity: 1;\n    }\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-background--parent",
+                        "description": "Added automatically on the first parent of the ch5-background element",
+                        "value": "position: relative;\n    z-index: 1;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-background--canvas",
+                        "description": "Added automatically on the all canvas child of ch5-background element",
+                        "value": "position: absolute;\n    left: 0;\n    top: 0;\n    opacity: 0;\n    transition-property: opacity;\n    transition-duration: var(--ch5-background--transition-duration);\n    transition-timing-function: var(--ch5-background--transition-timing-function);\n\n    &.ch5bg-fadein {\n      opacity: 1;\n    }"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-button",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-button",
+                        "description": "Main Class\n",
+                        "value": "display: block;\n    max-width: 100%;\n    cursor: pointer;\n    pointer-events: all;\n\n    button {\n      cursor: pointer;\n    }\n\n    button,\n    .ch5-button--label {\n      background-color: transparent;\n      border: none;\n      // color: inherit;\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    /// Applied on label\n    .ch5-button--label {\n      display: block;\n      margin-left: var(--ch5-button--label-margin-left);\n      margin-right: var(--ch5-button--label-margin-right);\n      margin-top: var(--ch5-button--label-margin-top);\n      margin-bottom: var(--ch5-button--label-margin-bottom);\n      text-decoration: var(--ch5-button--label-text-decoration);\n      letter-spacing: var(--ch5-button--label-letter-spacing);\n      text-underline-offset: var(--ch5-button--label-text-underline-offset);\n      @include text-truncate();\n    }\n\n    .cb-btn {\n      position: relative;\n      display: inline-flex;\n      line-height: var(--ch5-button--line-height);\n      padding: var(--ch5-button--padding);\n      vertical-align: middle; //adding this property to prevent button taking extra height for iconUrlFilltype=\"initial\" and vAlignLabel=\"bottom\"\n    }\n\n    .cb-btn i.cb-checkbox-icon {\n      display: inline-flex;\n      align-items: center;\n      justify-content: space-between;\n      height: 100%;\n    }\n\n    .cb-btn {\n      padding-top: calc(var(--ch5-button--padding) / 2);\n      padding-bottom: calc(var(--ch5-button--padding) / 2);\n    }\n\n    .ch5-button--label {\n      padding-left: calc(var(--ch5-button--padding) / 2);\n      padding-right: calc(var(--ch5-button--padding) / 2);\n    }\n\n    /// Applied when button orientation='vertical'\n    &.ch5-button--vertical {\n      position: relative;\n\n      .cb-btn {\n        transform: rotate(270deg) translateX(-100%);\n        transform-origin: top left;\n      }\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--label",
+                        "description": "Applied on label\n",
+                        "value": "display: block;\n      margin-left: var(--ch5-button--label-margin-left);\n      margin-right: var(--ch5-button--label-margin-right);\n      margin-top: var(--ch5-button--label-margin-top);\n      margin-bottom: var(--ch5-button--label-margin-bottom);\n      text-decoration: var(--ch5-button--label-text-decoration);\n      letter-spacing: var(--ch5-button--label-letter-spacing);\n      text-underline-offset: var(--ch5-button--label-text-underline-offset);\n      @include text-truncate();"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--vertical",
+                        "description": "Applied when button orientation='vertical'\n",
+                        "value": "position: relative;\n\n      .cb-btn {\n        transform: rotate(270deg) translateX(-100%);\n        transform-origin: top left;\n      }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--background-image-fill-type-stretch",
+                        "description": "Applied when backgroundImageFillType=\"stretch\"\n",
+                        "value": "button {\n      background-repeat: no-repeat;\n      background-size: 100% 100%;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--background-image-fill-type-tile",
+                        "description": "Applied when backgroundImageFillType=\"tile\"\n",
+                        "value": "button {\n      background-size: auto;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--background-image-fill-type-center",
+                        "description": "Applied when backgroundImageFillType=\"center\"\n",
+                        "value": "button {\n      background-repeat: no-repeat;\n      background-size: contain;\n      background-position: center; // Center the image\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--background-image-fill-type-stretch-aspect",
+                        "description": "Applied when backgroundImageFillType=\"stretch-aspect\"\n",
+                        "value": "button {\n      background-size: contain;\n      background-repeat: no-repeat;\n      background-position: center;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--icon-url-fill-type-stretch",
+                        "description": "Applied when iconUrlFillType=\"stretch\"\n",
+                        "value": ".ch5-button--img {\n      background-size: 100% 100%;\n      background-position: center;\n      background-repeat: no-repeat;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--icon-url-fill-type-stretch-aspect",
+                        "description": "Applied when iconUrlFillType=\"stretch-aspect\"\n",
+                        "value": ".ch5-button--img {\n      background-size: contain;\n      background-position: center;\n      background-repeat: no-repeat;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--icon-url-fill-type-center",
+                        "description": "Applied when iconUrlFillType=\"center\"\n",
+                        "value": ".ch5-button--img {\n      background-size: contain;\n      background-position: center;\n      background-repeat: no-repeat;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--icon-url-fill-type-tile",
+                        "description": "Applied when iconUrlFillType=\"tile\"\n",
+                        "value": ".ch5-button--img {\n      background-size: auto;\n      background-position: 0;\n      background-repeat: repeat;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--icon-url-fill-type-initial",
+                        "description": "Applied when iconUrlFillType=\"initial\"\n",
+                        "value": ".ch5-button--img {\n      background-repeat: no-repeat;\n      background-size: contain;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--disabled",
+                        "description": "Applied when the button is disabled\n",
+                        "value": "@include ch5-component-disabled();"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--horizontal",
+                        "description": "Applied when button orientation='horizontal'\n",
+                        "value": "/// Applied to make the width as much as its parent allows.\n    &.ch5-button--stretch-width {\n      width: 100%;\n\n      .cb-btn {\n        width: 100% !important;\n      }\n    }\n\n    /// Applied to make the height as much as its parent allows.\n    &.ch5-button--stretch-height {\n      height: 100%;\n\n      .cb-btn {\n        height: 100% !important;\n        min-height: var(--ch5-button--regular-height); // Added as a fix for the issue of button height varying when moved from width to height in stretch\n      }\n    }\n\n    /// Applied to make both width and height as much as its parent allows.\n    &.ch5-button--stretch-both {\n      width: 100%;\n      height: 100%;\n\n      .cb-btn {\n        width: 100% !important;\n        height: 100% !important;\n        min-height: var(--ch5-button--regular-height); // Added as a fix for the issue of button height varying when moved from width to height in stretch\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--stretch-width",
+                        "description": "Applied to make the width as much as its parent allows.\n",
+                        "value": "width: 100%;\n\n      .cb-btn {\n        width: 100% !important;\n      }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--stretch-height",
+                        "description": "Applied to make the height as much as its parent allows.\n",
+                        "value": "height: 100%;\n\n      .cb-btn {\n        height: 100% !important;\n        min-height: var(--ch5-button--regular-height); // Added as a fix for the issue of button height varying when moved from width to height in stretch\n      }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--stretch-both",
+                        "description": "Applied to make both width and height as much as its parent allows.\n",
+                        "value": "width: 100%;\n      height: 100%;\n\n      .cb-btn {\n        width: 100% !important;\n        height: 100% !important;\n        min-height: var(--ch5-button--regular-height); // Added as a fix for the issue of button height varying when moved from width to height in stretch\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--size-regular",
+                        "description": "Applied when size=\"regular\"\n",
+                        "value": "@include ch5-button-size-set(\"regular\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--size-x-small",
+                        "description": "Applied when size=\"x-small\"\n",
+                        "value": "@include ch5-button-size-set(\"x-small\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--size-small",
+                        "description": "Applied when size=\"small\"\n",
+                        "value": "@include ch5-button-size-set(\"small\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--size-large",
+                        "description": "Applied when size=\"large\"\n",
+                        "value": "@include ch5-button-size-set(\"large\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--size-x-large",
+                        "description": "Applied when size=\"x-large\"\n",
+                        "value": "@include ch5-button-size-set(\"x-large\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--img",
+                        "description": "Applied on images\n",
+                        "value": "display: block;\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-position: center;\n    // color: inherit;\n    height: var(#{$property-font-image-height});\n    width: var(#{$property-font-image-width});\n\n    &::before,\n    &::after {\n      content: none;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--icon",
+                        "description": "Applied on icons\n",
+                        "value": "vertical-align: middle;\n    // color: var(#{$property-icon-color});\n    font-size: var(#{$property-icon-font-size});\n    margin-top: var(--ch5-button--icon-margin-top);\n    margin-bottom: var(--ch5-button--icon-margin-bottom);\n    margin-left: var(--ch5-button--icon-margin-left);\n    margin-right: var(--ch5-button--icon-margin-right);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--selected",
+                        "description": "Applied when selected signal is applied\n",
+                        "value": "@include ch5-button-content--selected($property-value);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--pressed",
+                        "description": "Applied when selected signal is pressed\n",
+                        "value": "@include ch5-button-content--pressed($property-value);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--rectangle",
+                        "description": "Applied when shape='rectangle'\n",
+                        "value": "@include border-radius(0);\n\t.cb-btn {\n\t\t@include border-radius(0);\n\t}\n\toverflow: hidden;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--rounded-rectangle",
+                        "description": "Applied when shape='rounded-rectangle'\n",
+                        "value": "@include border-radius-rounded-rectangle(\n\t\t--ch5-button--rounded-rectangle-border-radius-top-left,\n\t\t--ch5-button--rounded-rectangle-border-radius-top-right,\n\t\t--ch5-button--rounded-rectangle-border-radius-bottom-left,\n\t\t--ch5-button--rounded-rectangle-border-radius-bottom-right\n\t);\n\toverflow: hidden;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--circle",
+                        "description": "Applied when shape='circle'\n",
+                        "value": "display: inline-block;\n\ttext-decoration: none;\n\toutline: none;\n\tborder-style: none;\n\ttext-align: center;\n\toverflow: hidden;\n\t@include border-radius(50%);\n\n\t.cb-btn {\n\t\t@include border-radius(50%);\n\t\tdisplay: inline-flex;\n\t\tvertical-align: middle;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--oval",
+                        "description": "Applied when shape='oval'\n",
+                        "value": "@include border-radius(var(--ch5-button--oval-border-radius));\n\t.cb-btn {\n\t\t@include border-radius(var(--ch5-button--oval-border-radius));\n\t}\n\toverflow: hidden;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--tab",
+                        "description": "Applied when shape='tab'\n",
+                        "value": "@include border-radius(var(--ch5-button--tab-border-radius));\n\t.cb-btn {\n\t\t@include border-radius(var(--ch5-button--tab-border-radius));\n\t}\n\toverflow: hidden;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--text",
+                        "description": "Applied when type='text'\n",
+                        "value": "@include ch5-button-content(\"text\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--danger",
+                        "description": "Applied when type='danger'\n",
+                        "value": "@include ch5-button-content(\"danger\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--warning",
+                        "description": "Applied when type='warning'\n",
+                        "value": "@include ch5-button-content(\"warning\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--info",
+                        "description": "Applied when type='info'\n",
+                        "value": "@include ch5-button-content(\"info\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--success",
+                        "description": "Applied when type='success'\n",
+                        "value": "@include ch5-button-content(\"success\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--default",
+                        "description": "Default button\n",
+                        "value": "@include ch5-button-content(\"default\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--primary",
+                        "description": "Applied when type='primary'\n",
+                        "value": "@include ch5-button-content(\"primary\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button--secondary",
+                        "description": "Applied when type='secondary'\n",
+                        "value": "@include ch5-button-content(\"secondary\");"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-button-list",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--button-type-default",
+                        "description": "Applied when buttonType='default'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--button-type-danger",
+                        "description": "Applied when buttonType='danger'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--button-type-text",
+                        "description": "Applied when buttonType='text'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--button-type-warning",
+                        "description": "Applied when buttonType='warning'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--button-type-info",
+                        "description": "Applied when buttonType='info'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--button-type-success",
+                        "description": "Applied when buttonType='success'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--button-type-primary",
+                        "description": "Applied when buttonType='primary'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--button-type-secondary",
+                        "description": "Applied when buttonType='secondary'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--button-checkbox-position-left",
+                        "description": "Applied when buttonCheckboxPosition='left'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--button-checkbox-position-right",
+                        "description": "Applied when buttonCheckboxPosition='right'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--button-icon-position-first",
+                        "description": "Applied when buttonIconPosition='first'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--button-icon-position-last",
+                        "description": "Applied when buttonIconPosition='last'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--button-icon-position-top",
+                        "description": "Applied when buttonIconPosition='top'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--button-icon-position-bottom",
+                        "description": "Applied when buttonIconPosition='bottom'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--button-shape-rectangle",
+                        "description": "Applied when buttonShape='rectangle'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--button-shape-rounded-rectangle",
+                        "description": "Applied when buttonShape='rounded-rectangle'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--pressed",
+                        "description": "Applied when buttonPressed='true'. Note - use !important css property to override the styles of child button. \n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--selected",
+                        "description": "Applied when buttonSelected='true'. Note - use !important css property to override the styles of child button. \n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list",
+                        "description": "Main class\n",
+                        "value": "position: relative;\n  overflow: scroll;\n  white-space: nowrap;\n  will-change: transform;\n  user-select: none;\n  display: grid;\n  height: 100%;\n  padding: var(--ch5-button-list--container-padding);\n  scrollbar-width: none; // needed to hide the firefox scrollbar\n\n  &.active {\n    cursor: -webkit-grabbing;\n  }\n\n  &.ch5-button-list::-webkit-scrollbar {\n    height: 0px;\n    width: 0px;\n  }\n\n  &~.scrollbar-container {\n    position: absolute;\n    background-color: var(--ch5-button-list--scrollbar-track-color);\n    border-radius: var(--ch5-button-list--scrollbar-border-radius);\n\n    .scrollbar {\n      position: absolute;\n      will-change: width, transform;\n      position: absolute;\n      border-radius: var(--ch5-button-list--scrollbar-border-radius);\n      background: var(--ch5-button-list--scrollbar-thumb-color);\n    }\n  }\n\n  &.ch5-button-list--scrollbar-true {\n    &~.scrollbar-container {\n      display: block;\n    }\n  }\n\n  &.ch5-button-list--scrollbar-false {\n    &~.scrollbar-container {\n      display: none;\n    }\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--disabled",
+                        "description": "Applied when the component is disabled\n",
+                        "value": "@include ch5-component-disabled();"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--button-container",
+                        "description": "Applied for the container of ch5-button\n",
+                        "value": "width: var(--ch5-button-list--button-container-width);\n  height: var(--ch5-button-list--button-container-height);\n  padding: var(--ch5-button-list--button-container-padding);\n  min-width: 100px;\n  min-height: 58px;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--orientation-horizontal",
+                        "description": "Applied when orientation='horizontal'\n",
+                        "value": "grid-auto-flow: column;\n\n    &.ch5-button-list--center-items-true {\n      justify-content: center;\n      align-content: start;\n    }\n\n    &.ch5-button-list--center-items-false {\n      align-content: start;\n      justify-content: start;\n    }\n\n    &.ch5-button-list--stretch-both {\n      align-content: stretch;\n      justify-content: stretch;\n    }\n\n    .ch5-button-list--button-container {\n      height: 100%;\n    }\n\n    &.ch5-button-list--stretch-both {\n      .ch5-button-list--button-container {\n        width: 100%;\n      }\n    }\n\n    &.ch5-button-list--scrollbar-true {\n      padding-bottom: var(--ch5-button-list--scrollbar-width);\n\n      &~.scrollbar-container {\n        width: 100%;\n        bottom: 0;\n        height: var(--ch5-button-list--scrollbar-width);\n\n        .scrollbar {\n          height: 100%;\n        }\n      }\n    }\n\n    @for $var from 1 to 501 {\n      &.ch5-button-list--rows-#{$var} {\n        grid-template-rows: repeat($var, 1fr);\n      }\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-button-list--orientation-vertical",
+                        "description": "Applied when orientation='vertical'\n",
+                        "value": "grid-auto-flow: row;\n\n    &.ch5-button-list--center-items-true {\n      justify-content: start;\n      align-content: center;\n    }\n\n    &.ch5-button-list--center-items-false {\n      align-content: start;\n      justify-content: start;\n    }\n\n    &.ch5-button-list--stretch-both {\n      align-content: stretch;\n      justify-content: stretch;\n    }\n\n    &.ch5-button-list--scrollbar-true {\n      padding-right: var(--ch5-button-list--scrollbar-width);\n\n      &~.scrollbar-container {\n        top: 0;\n        height: 100%;\n        right: 0;\n        left: auto;\n        width: var(--ch5-button-list--scrollbar-width);\n\n        .scrollbar {\n          width: 100%;\n        }\n      }\n    }\n\n    .ch5-button-list--button-container {\n      width: 100%;\n    }\n\n    &.ch5-button-list--stretch-both {\n      .ch5-button-list--button-container {\n        height: 100%;\n      }\n    }\n\n    @for $var from 1 to 501 {\n      &.ch5-button-list--columns-#{$var} {\n        grid-template-columns: repeat($var, 1fr);\n      }\n    }"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-color-chip",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-color-chip",
+                        "description": "Color Chip parent class\n",
+                        "value": "// position: relative;\n  // display: inline-block;\n  background-color: var(--ch5-color-chip--background-color);\n  height: var(--ch5-color-chip--height);\n  width: var(--ch5-color-chip--width);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-color-chip--disabled",
+                        "description": "Color Chip disabled class\n",
+                        "value": "@include ch5-component-disabled();"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-color-picker",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-color-picker",
+                        "description": "Added automatically on the ch5-color-picker element\n",
+                        "value": "position: relative;\n  display: inline-flex;\n  width: var(--ch5-color-picker--width);\n  height: var(--ch5-color-picker--height);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-color-picker--disabled",
+                        "description": "Added automatically based on the disabled attribute or by receiveStateEnable\n",
+                        "value": "@include ch5-component-disabled();"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-datetime",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-datetime",
+                        "description": "Class to set the container properties of ch5-datetime\n",
+                        "value": "width: var(--ch5-datetime--width);\n  height: var(--ch5-datetime--height);\n  font-size: var(--ch5-datetime--font-size);\n  font-weight: var(--ch5-datetime--font-weight);\n  font-style: var(--ch5-datetime--font-style);\n  background-color: var(--ch5-datetime--background-color);\n  color: var(--ch5-datetime--color);\n  letter-spacing: var(--ch5-datetime--letter-spacing);\n  text-decoration: var(--ch5-datetime--text-decoration);\n  white-space: var(--ch5-datetime--white-space);\n  border-color: var(--ch5-datetime--border-color);\n  border-width: var(--ch5-datetime--border-width);\n  border-style: var(--ch5-datetime--border-style);\n  padding-top: var(--ch5-datetime--padding-top);\n  padding-right: var(--ch5-datetime--padding-right);\n  padding-bottom: var(--ch5-datetime--padding-bottom);\n  padding-left: var(--ch5-datetime--padding-left);\n  border-top-left-radius: var(--ch5-datetime--border-top-left-radius);\n  border-top-right-radius: var(--ch5-datetime--border-top-right-radius);\n  border-bottom-left-radius: var(--ch5-datetime--border-bottom-left-radius);\n  border-bottom-right-radius: var(--ch5-datetime--border-bottom-right-radius);\n  display: flex;\n  align-items: center;\n  overflow: hidden;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-datetime--horizontal-alignment-center",
+                        "description": "Set horizontalAlignment as center",
+                        "value": "justify-content: center;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-datetime--horizontal-alignment-left",
+                        "description": "Set horizontalAlignment as left",
+                        "value": "justify-content: flex-start;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-datetime--horizontal-alignment-right",
+                        "description": "Set horizontalAlignment as right",
+                        "value": "justify-content: flex-end;"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-dpad",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-dpad",
+                        "description": "Primary Class\n",
+                        "value": "position: relative;\n  display: inline-flex;\n  min-width: 100px;\n  min-height: 100px;\n  vertical-align: top;\n\n  .dpad-container {\n    position: relative;\n    display: flex;\n    flex-wrap: wrap;\n    vertical-align: top;\n  }\n\n  /// Applied when button in the disabled state\n  &.ch5-disabled {\n    @include ch5-component-disabled();\n\n    .ch5-dpad-child {\n      pointer-events: none;\n    }\n  }\n\n  &:not(.ch5-disabled) {\n    .ch5-dpad-child.ch5-disabled {\n      @include ch5-component-disabled();\n    }\n  }\n\n  .image-url {\n    display: block;\n    height: 100%;\n    width: 100%;\n    z-index: 1;\n\n    &::before,\n    &::after {\n      content: none;\n    }\n  }\n\n  .center {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    height: 34%; // increasing slightly to avoid white line from 33.33%\n    width: 34%; // increasing slightly to avoid white line\n\n    .dpad-btn-label {\n      font-size: var(--ch5-dpad--label-font-size);\n    }\n\n    &.ch5-dpad-button-center--pressed {\n      .dpad-btn-label {\n        font-size: var(--ch5-dpad--pressed-label-font-size);\n      }\n    }\n\n    overflow: hidden;\n    z-index: 2;\n    cursor: pointer;\n\n    &.ch5-disabled {\n      pointer-events: none;\n      z-index: 2;\n    }\n\n    span {\n      border-radius: 50%;\n      text-align: center;\n      background-repeat: no-repeat;\n      background-position: center;\n      background-size: 80%;\n    }\n\n    .image-url {\n      border-radius: 50%;\n    }\n  }\n\n  .direction-btn {\n    position: relative;\n    display: flex;\n    cursor: pointer;\n    justify-content: center;\n    align-items: center;\n\n    &.ch5-disabled {\n      pointer-events: none;\n      z-index: 2;\n    }\n\n    span {\n      background-repeat: no-repeat;\n      background-position: center;\n      background-size: 80%;\n    }\n  }\n\n  /// Defines the dpad shape\n  &.ch5-dpad--shape-circle {\n    .ch5-disable-child-button {\n      cursor: default;\n      pointer-events: auto; // Note that pointer events should NOT be set to none here for circle shape only and do not set opacity here\n    }\n\n    .dpad-container {\n      transform: rotate(45deg);\n      .ch5-disable-child-button > span {\n        @include ch5-component-disabled();\n        cursor: default;\n        pointer-events: auto; // Note that pointer events should NOT be set to none here for circle shape only\n      }\n      /// Applied when hideCenterButton = \"true\"\n      .ch5-hide-child-button {\n        visibility: hidden !important;\n        cursor: default;\n        > span {\n          opacity: 0.5;\n          cursor: default;\n        }\n      }\n    }\n\n    .center {\n      border-radius: 50%;\n      z-index: 3;\n\n      .dpad-btn-label {\n        display: block;\n        width: 100%;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        overflow: hidden;\n        transform: rotate(-45deg);\n        padding: 0 15%;\n      }\n\n      span.dpad-btn-icon {\n        transform: rotate(-45deg);\n      }\n    }\n\n    .direction-btn {\n      flex: 50%;\n      height: 50%;\n      overflow: hidden;\n\n      span {\n        transform: rotate(-45deg);\n        background-size: 50%;\n      }\n\n      &.up {\n        border-top-left-radius: 100%;\n      }\n\n      &.right {\n        border-top-right-radius: 100%;\n      }\n\n      &.left {\n        border-bottom-left-radius: 100%;\n      }\n\n      &.down {\n        border-bottom-right-radius: 100%;\n      }\n    }\n  }\n\n  /// Defines the dpad shape plus\n  &.ch5-dpad--shape-plus {\n    /// Applied when disableCenterButton=\"true\"\n    .ch5-disable-child-button {\n      pointer-events: none; // Do not set opacity here\n      cursor: default;\n    }\n\n    .dpad-container {\n      .ch5-disable-child-button > span {\n        @include ch5-component-disabled();\n        cursor: default;\n      }\n      .ch5-hide-child-button {\n        cursor: default;\n        > span {\n          visibility: hidden !important;\n          cursor: default;\n        }\n      }\n    }\n\n    .direction-btn {\n      flex: 33.33%;\n      height: 33.33%;\n\n      &:after,\n      &:before {\n        content: \"\";\n        height: 20px;\n        width: 20px;\n        position: absolute;\n        background-color: transparent;\n      }\n\n      span {\n        height: 100%;\n        width: 100%;\n        position: relative;\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        z-index: 1;\n        // line-height: calc(var(--ch5-dpad--regular-size) / 3);\n        text-align: center;\n      }\n    }\n  }\n\n  /// Applied when type=\"default\"\n  &.ch5-dpad--type-default {\n    @include ch5-dpad-content(\"default\");\n  }\n\n  /// Applied when type=\"primary\"\n  &.ch5-dpad--type-primary {\n    @include ch5-dpad-content(\"primary\");\n  }\n\n  /// Applied when type=\"info\"\n  &.ch5-dpad--type-info {\n    @include ch5-dpad-content(\"info\");\n  }\n\n  /// Applied when type=\"text\"\n  &.ch5-dpad--type-text {\n    @include ch5-dpad-content(\"text\");\n  }\n\n  /// Applied when type=\"danger\"\n  &.ch5-dpad--type-danger {\n    @include ch5-dpad-content(\"danger\");\n  }\n\n  /// Applied when type=\"warning\"\n  &.ch5-dpad--type-warning {\n    @include ch5-dpad-content(\"warning\");\n  }\n\n  /// Applied when type=\"success\"\n  &.ch5-dpad--type-success {\n    @include ch5-dpad-content(\"success\");\n  }\n\n  /// Applied when type=\"secondary\"\n  &.ch5-dpad--type-secondary {\n    @include ch5-dpad-content(\"secondary\");\n  }\n\n  &.ch5-dpad--stretch-both {\n    height: 100%;\n    width: 100%;\n  }\n\n  &.ch5-dpad--stretch-height {\n    height: 100%;\n  }\n\n  &.ch5-dpad--stretch-width {\n    width: 100%;\n  }\n\n  /// Applied when size=\"regular\"\n  &.ch5-dpad--size-regular {\n    @include ch5-dpad-content-plus-direction-btn(\"regular\");\n  }\n\n  /// Applied when size=\"x-small\"\n  &.ch5-dpad--size-x-small {\n    @include ch5-dpad-content-plus-direction-btn(\"x-small\");\n  }\n\n  /// Applied when size=\"small\"\n  &.ch5-dpad--size-small {\n    @include ch5-dpad-content-plus-direction-btn(\"small\");\n  }\n\n  /// Applied when size=\"large\"\n  &.ch5-dpad--size-large {\n    @include ch5-dpad-content-plus-direction-btn(\"large\");\n  }\n\n  /// Applied when size=\"x-large\"\n  &.ch5-dpad--size-x-large {\n    @include ch5-dpad-content-plus-direction-btn(\"x-large\");\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-disabled",
+                        "description": "Applied when button in the disabled state\n",
+                        "value": "@include ch5-component-disabled();\n\n    .ch5-dpad-child {\n      pointer-events: none;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-dpad--shape-circle",
+                        "description": "Defines the dpad shape\n",
+                        "value": ".ch5-disable-child-button {\n      cursor: default;\n      pointer-events: auto; // Note that pointer events should NOT be set to none here for circle shape only and do not set opacity here\n    }\n\n    .dpad-container {\n      transform: rotate(45deg);\n      .ch5-disable-child-button > span {\n        @include ch5-component-disabled();\n        cursor: default;\n        pointer-events: auto; // Note that pointer events should NOT be set to none here for circle shape only\n      }\n      /// Applied when hideCenterButton = \"true\"\n      .ch5-hide-child-button {\n        visibility: hidden !important;\n        cursor: default;\n        > span {\n          opacity: 0.5;\n          cursor: default;\n        }\n      }\n    }\n\n    .center {\n      border-radius: 50%;\n      z-index: 3;\n\n      .dpad-btn-label {\n        display: block;\n        width: 100%;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        overflow: hidden;\n        transform: rotate(-45deg);\n        padding: 0 15%;\n      }\n\n      span.dpad-btn-icon {\n        transform: rotate(-45deg);\n      }\n    }\n\n    .direction-btn {\n      flex: 50%;\n      height: 50%;\n      overflow: hidden;\n\n      span {\n        transform: rotate(-45deg);\n        background-size: 50%;\n      }\n\n      &.up {\n        border-top-left-radius: 100%;\n      }\n\n      &.right {\n        border-top-right-radius: 100%;\n      }\n\n      &.left {\n        border-bottom-left-radius: 100%;\n      }\n\n      &.down {\n        border-bottom-right-radius: 100%;\n      }\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-hide-child-button",
+                        "description": "Applied when hideCenterButton = \"true\"\n",
+                        "value": "visibility: hidden !important;\n        cursor: default;\n        > span {\n          opacity: 0.5;\n          cursor: default;\n        }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-dpad--shape-plus",
+                        "description": "Defines the dpad shape plus\n",
+                        "value": "/// Applied when disableCenterButton=\"true\"\n    .ch5-disable-child-button {\n      pointer-events: none; // Do not set opacity here\n      cursor: default;\n    }\n\n    .dpad-container {\n      .ch5-disable-child-button > span {\n        @include ch5-component-disabled();\n        cursor: default;\n      }\n      .ch5-hide-child-button {\n        cursor: default;\n        > span {\n          visibility: hidden !important;\n          cursor: default;\n        }\n      }\n    }\n\n    .direction-btn {\n      flex: 33.33%;\n      height: 33.33%;\n\n      &:after,\n      &:before {\n        content: \"\";\n        height: 20px;\n        width: 20px;\n        position: absolute;\n        background-color: transparent;\n      }\n\n      span {\n        height: 100%;\n        width: 100%;\n        position: relative;\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        z-index: 1;\n        // line-height: calc(var(--ch5-dpad--regular-size) / 3);\n        text-align: center;\n      }\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-disable-child-button",
+                        "description": "Applied when disableCenterButton=\"true\"\n",
+                        "value": "pointer-events: none; // Do not set opacity here\n      cursor: default;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-dpad--type-default",
+                        "description": "Applied when type=\"default\"\n",
+                        "value": "@include ch5-dpad-content(\"default\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-dpad--type-primary",
+                        "description": "Applied when type=\"primary\"\n",
+                        "value": "@include ch5-dpad-content(\"primary\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-dpad--type-info",
+                        "description": "Applied when type=\"info\"\n",
+                        "value": "@include ch5-dpad-content(\"info\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-dpad--type-text",
+                        "description": "Applied when type=\"text\"\n",
+                        "value": "@include ch5-dpad-content(\"text\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-dpad--type-danger",
+                        "description": "Applied when type=\"danger\"\n",
+                        "value": "@include ch5-dpad-content(\"danger\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-dpad--type-warning",
+                        "description": "Applied when type=\"warning\"\n",
+                        "value": "@include ch5-dpad-content(\"warning\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-dpad--type-success",
+                        "description": "Applied when type=\"success\"\n",
+                        "value": "@include ch5-dpad-content(\"success\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-dpad--type-secondary",
+                        "description": "Applied when type=\"secondary\"\n",
+                        "value": "@include ch5-dpad-content(\"secondary\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-dpad--size-regular",
+                        "description": "Applied when size=\"regular\"\n",
+                        "value": "@include ch5-dpad-content-plus-direction-btn(\"regular\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-dpad--size-x-small",
+                        "description": "Applied when size=\"x-small\"\n",
+                        "value": "@include ch5-dpad-content-plus-direction-btn(\"x-small\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-dpad--size-small",
+                        "description": "Applied when size=\"small\"\n",
+                        "value": "@include ch5-dpad-content-plus-direction-btn(\"small\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-dpad--size-large",
+                        "description": "Applied when size=\"large\"\n",
+                        "value": "@include ch5-dpad-content-plus-direction-btn(\"large\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-dpad--size-x-large",
+                        "description": "Applied when size=\"x-large\"\n",
+                        "value": "@include ch5-dpad-content-plus-direction-btn(\"x-large\");"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-dpad-mixins",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-dpad-button-up--pressed",
+                        "description": "Applied when up button is in the pressed state\n",
+                        "value": "@include ch5-dpad-content--pressed($borderRadius, $property-pressed-background-color, $property-pressed-color);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-dpad-button-left--pressed",
+                        "description": "Applied when left button is in the pressed state\n",
+                        "value": "@include ch5-dpad-content--pressed($borderRadius, $property-pressed-background-color, $property-pressed-color);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-dpad-button-right--pressed",
+                        "description": "Applied when right button is in the pressed state\n",
+                        "value": "@include ch5-dpad-content--pressed($borderRadius, $property-pressed-background-color, $property-pressed-color);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-dpad-button-down--pressed",
+                        "description": "Applied when down button is in the pressed state\n",
+                        "value": "@include ch5-dpad-content--pressed($borderRadius, $property-pressed-background-color, $property-pressed-color);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-dpad-button-center--pressed",
+                        "description": "Applied when center button is in the pressed state\n",
+                        "value": "@include ch5-dpad-content--pressed($borderRadius, $property-pressed-background-color, $property-pressed-color);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "dpad-btn-icon",
+                        "description": "Apply to icons\n",
+                        "value": "font-size: var(#{$property-icon-font-size});"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-image",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-image",
+                        "description": "Added automatically on the first child of the ch5-image element.\n",
+                        "value": "&.ch5-image__img {\n    height: inherit;\n    width: inherit;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: var(--ch5-image--object-fit);\n    border-color: var(--ch5-image--border-color);\n    border-width: var(--ch5-image--border-width);\n    border-style: var(--ch5-image--border-style);\n    display: inline-block;\n  }\n  // flip image\n  &.ch5-image--dir--rtl {\n    -moz-transform: scaleX(-1);\n    -o-transform: scaleX(-1);\n    -webkit-transform: scaleX(-1);\n    transform: scaleX(-1);\n    /* filter: FlipH;\n    -ms-filter: \"FlipH\"; */\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-image--disabled",
+                        "description": "Added automatically based on the disabled attribute or by receiveStateEnable.\n",
+                        "value": "@include ch5-component-disabled();"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-keypad",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad",
+                        "description": "Primary Class\n",
+                        "value": "display: grid;\n  aspect-ratio: 3/4;\n  padding: var(--ch5-keypad--padding);\n  gap: var(--ch5-keypad--gap-between-buttons);\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(4, 1fr);\n\n  .extra-btn {\n    display: none;\n  }\n\n  &.ch5-keypad--show-extra-button {\n    aspect-ratio: 3/5;\n    grid-template-rows: repeat(5, 1fr);\n\n    .keypad-btn.extra-btn {\n      display: flex;\n      grid-column-start: 2;\n\n      button {\n        color: var(--ch5-keypad--extra-button-font-color);\n        background-color: var(--ch5-keypad--extra-button-background-color);\n        border: var(--ch5-keypad--extra-button-border-width) var(--ch5-keypad--extra-button-border-style) var(--ch5-keypad--extra-button-border-color);\n      }\n\n      &.keypad-btn.keypad-btn-pressed button {\n        color: var(--ch5-keypad--extra-button-pressed-font-color);\n        background-color: var(--ch5-keypad--extra-button-pressed-background-color);\n        border: var(--ch5-keypad--extra-button-pressed-border-width) var(--ch5-keypad--extra-button-pressed-border-style) var(--ch5-keypad--extra-button-pressed-border-color);\n      }\n    }\n  }\n\n  /// Applied when keypad in the disabled state\n  &.ch5-keypad--disabled {\n    @include ch5-component-disabled();\n    cursor: default;\n\n    button {\n      pointer-events: none;\n      cursor: default;\n    }\n  }\n\n  /// Applied when type=\"default\"\n  &.ch5-keypad--type-default {\n    @include ch5-keypad-content(\"default\");\n  }\n\n  /// Applied when type=\"primary\"\n  &.ch5-keypad--type-primary {\n    @include ch5-keypad-content(\"primary\");\n  }\n\n  /// Applied when type=\"info\"\n  &.ch5-keypad--type-info {\n    @include ch5-keypad-content(\"info\");\n  }\n\n  /// Applied when type=\"text\"\n  &.ch5-keypad--type-text {\n    @include ch5-keypad-content(\"text\");\n  }\n\n  /// Applied when type=\"danger\"\n  &.ch5-keypad--type-danger {\n    @include ch5-keypad-content(\"danger\");\n  }\n\n  /// Applied when type=\"warning\"\n  &.ch5-keypad--type-warning {\n    @include ch5-keypad-content(\"warning\");\n  }\n\n  /// Applied when type=\"success\"\n  &.ch5-keypad--type-success {\n    @include ch5-keypad-content(\"success\");\n  }\n\n  /// Applied when type=\"secondary\"\n  &.ch5-keypad--type-secondary {\n    @include ch5-keypad-content(\"secondary\");\n  }\n\n  /// Applied when button in the textOrientation=\"top\"\n  &.ch5-keypad--orientation-top {\n    button {\n      flex-direction: column;\n    }\n  }\n\n  /// Applied when button in the textOrientation=\"right\"\n  &.ch5-keypad--orientation-right {\n    button {\n      flex-direction: row-reverse;\n\n      .label-major {\n        margin-left: 2px;\n      }\n    }\n  }\n\n  /// Applied when button in the textOrientation=\"bottom\"\n  &.ch5-keypad--orientation-bottom {\n    button {\n      flex-direction: column-reverse;\n    }\n  }\n\n  /// Applied when button in the textOrientation=\"left\"\n  &.ch5-keypad--orientation-left {\n    button {\n      flex-direction: row;\n\n      .label-major {\n        margin-right: 2px;\n      }\n    }\n  }\n\n  &.ch5-keypad--shape-square {\n    .keypad-btn {\n      button {\n        border-radius: 0;\n      }\n    }\n  }\n\n  &.ch5-keypad--shape-circle {\n    .keypad-btn {\n      button {\n        border-radius: 50%;\n      }\n    }\n  }\n\n  &.ch5-keypad--shape-rounded-rectangle {\n    .keypad-btn {\n      button {\n        border-radius: 10%;\n      }\n    }\n  }\n\n  /// Applied when size=\"x-small\"\n  &.ch5-keypad--size-x-small {\n    @include ch5-keypad-fonts-sizes(\"x-small\");\n  }\n\n  /// Applied when size=\"small\"\n  &.ch5-keypad--size-small {\n    @include ch5-keypad-fonts-sizes(\"small\");\n  }\n\n  /// Applied when size=\"regular\"\n  &.ch5-keypad--size-regular {\n    @include ch5-keypad-fonts-sizes(\"regular\");\n  }\n\n  /// Applied when size=\"large\"\n  &.ch5-keypad--size-large {\n    @include ch5-keypad-fonts-sizes(\"large\");\n  }\n\n  /// Applied when size=\"x-large\"\n  &.ch5-keypad--size-x-large {\n    @include ch5-keypad-fonts-sizes(\"x-large\");\n  }\n\n  &.ch5-keypad--display-label-major-only-true {\n    button {\n      .label-minor {\n        display: none;\n      }\n    }\n  }\n \n  &.ch5-keypad--display-label-major-only-false {\n    button {\n      .label-minor {\n        display: block;\n      }\n    }\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--disabled",
+                        "description": "Applied when keypad in the disabled state\n",
+                        "value": "@include ch5-component-disabled();\n    cursor: default;\n\n    button {\n      pointer-events: none;\n      cursor: default;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--type-default",
+                        "description": "Applied when type=\"default\"\n",
+                        "value": "@include ch5-keypad-content(\"default\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--type-primary",
+                        "description": "Applied when type=\"primary\"\n",
+                        "value": "@include ch5-keypad-content(\"primary\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--type-info",
+                        "description": "Applied when type=\"info\"\n",
+                        "value": "@include ch5-keypad-content(\"info\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--type-text",
+                        "description": "Applied when type=\"text\"\n",
+                        "value": "@include ch5-keypad-content(\"text\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--type-danger",
+                        "description": "Applied when type=\"danger\"\n",
+                        "value": "@include ch5-keypad-content(\"danger\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--type-warning",
+                        "description": "Applied when type=\"warning\"\n",
+                        "value": "@include ch5-keypad-content(\"warning\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--type-success",
+                        "description": "Applied when type=\"success\"\n",
+                        "value": "@include ch5-keypad-content(\"success\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--type-secondary",
+                        "description": "Applied when type=\"secondary\"\n",
+                        "value": "@include ch5-keypad-content(\"secondary\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--orientation-top",
+                        "description": "Applied when button in the textOrientation=\"top\"\n",
+                        "value": "button {\n      flex-direction: column;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--orientation-right",
+                        "description": "Applied when button in the textOrientation=\"right\"\n",
+                        "value": "button {\n      flex-direction: row-reverse;\n\n      .label-major {\n        margin-left: 2px;\n      }\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--orientation-bottom",
+                        "description": "Applied when button in the textOrientation=\"bottom\"\n",
+                        "value": "button {\n      flex-direction: column-reverse;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--orientation-left",
+                        "description": "Applied when button in the textOrientation=\"left\"\n",
+                        "value": "button {\n      flex-direction: row;\n\n      .label-major {\n        margin-right: 2px;\n      }\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--size-x-small",
+                        "description": "Applied when size=\"x-small\"\n",
+                        "value": "@include ch5-keypad-fonts-sizes(\"x-small\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--size-small",
+                        "description": "Applied when size=\"small\"\n",
+                        "value": "@include ch5-keypad-fonts-sizes(\"small\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--size-regular",
+                        "description": "Applied when size=\"regular\"\n",
+                        "value": "@include ch5-keypad-fonts-sizes(\"regular\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--size-large",
+                        "description": "Applied when size=\"large\"\n",
+                        "value": "@include ch5-keypad-fonts-sizes(\"large\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--size-x-large",
+                        "description": "Applied when size=\"x-large\"\n",
+                        "value": "@include ch5-keypad-fonts-sizes(\"x-large\");"
+                    },
+                    {
+                        "type": "class",
+                        "name": "keypad-btn",
+                        "description": "Add styles for all buttons inside the keypad\n",
+                        "value": "cursor: pointer;\n  display: flex;\n  aspect-ratio: 1/1;\n  overflow: hidden;\n\n  button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    aspect-ratio: 1/1;\n    color: inherit;\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n\n    span {\n      white-space: pre;\n      color: inherit;\n    }\n\n    .label-major {\n      font-weight: 300;\n    }\n\n    .label-minor {\n      margin-top: 0;\n      letter-spacing: 0.1rem;\n    }\n  }\n\n  &[key=\"button0\"] {\n    .label-minor {\n      margin-left: 3%;\n    }\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--shape-rounded-rectangle",
+                        "description": "Applied when shape=\"rounded-rectangle\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--shape-square",
+                        "description": "Applied when shape=\"square\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--shape-circle",
+                        "description": "Applied when shape=\"circle\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--stretch-height",
+                        "description": "Applied when stretch=\"height\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--stretch-width",
+                        "description": "Applied when stretch=\"width\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-keypad--stretch-both",
+                        "description": "Applied when stretch=\"both\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "keypad-btn-pressed",
+                        "description": "Applied when button in the pressed state\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-list",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-list--disabled",
+                        "description": "Add the \"disabled\" attribute to the ch5-list tag in order to disable the list.\n",
+                        "value": "@include ch5-component-disabled();"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-list-vertical",
+                        "description": "The list is displayed vertically by default, you can explicitly add the attribute orientation=\"vertical\".\n",
+                        "value": "-webkit-overflow-scrolling: touch;\n  touch-action: pan-y !important;\n\n  & * {\n    touch-action: pan-y !important;\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-list-horizontal",
+                        "description": "Applied when orientation=\"horizontal\" to display the list horizontally.\n",
+                        "value": "-webkit-overflow-scrolling: touch;\n  touch-action: pan-x !important;\n\n  & * {\n    touch-action: pan-x !important;\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-list-vertical-scrollbar",
+                        "description": "Applied when the list is displayed vertically and scrollbar=\"true\" is added\n",
+                        "value": "padding-right: var(--ch5-list--scrollbar-width);\n\n    & ~ .scrollbar-container {\n      top: 0;\n      height: 100%;\n      right: 0;\n      left: auto;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-list-horizontal-scrollbar",
+                        "description": "Applied when scrollbar=\"true\" is added\n",
+                        "value": "padding-bottom: var(--ch5-list--scrollbar-width);\n\n    & ~ .scrollbar-container {\n      width: 100%;\n      bottom: 0;\n    }"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-media-player",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-media-player",
+                        "description": "Main class\n",
+                        "value": "position: relative;\n  width: var(--ch5-media-player--width);\n  height: var(--ch5-media-player--height);\n  min-width: 360px;\n  min-height: 360px;\n  background-color: var(--ch5-media-player--background-color);\n  display: flex;\n  overflow: hidden;\n  box-sizing: border-box;\n  border: var(--ch5-media-player--border-style) var(--ch5-media-player--border-width) var(--ch5-media-player--border-color);\n\n  .ch5-media-player--popup-overlay {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background-color: var(--ch5-media-player--popup-overlay-background-color);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    .ch5-media-player--popup-content-generic {\n      background-color: var(--ch5-media-player--background-color);\n      color: var(--ch5-media-player--popup-font-color);\n      width: 60%;\n      border-radius: 1em;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      font-size: var(--ch5-media-player--popup-text-font-size);\n\n      .generic-dialog-title {\n        padding: $ch5-media-player--padding;\n        display: flex;\n        justify-content: center;\n        text-align: center;\n      }\n\n      .dialog-content {\n        display: flex;\n        padding: 0 $ch5-media-player--padding $ch5-media-player--padding $ch5-media-player--padding;\n\n        .dialog-content-input {\n          width: 100%;\n          border: none;\n          outline: none;\n          border-bottom: var(--ch5-media-player--popup-border-width) var(--ch5-media-player--popup-border-style) var(--ch5-media-player--popup-input-border-color);\n          padding: 0.25em;\n          background-color: inherit;\n          color: inherit;\n        }\n      }\n\n      .generic-dialog-footer {\n        display: flex;\n        justify-content: space-between;\n\n        &--column {\n          flex-direction: column;\n        }\n\n        &--row {\n          flex-direction: row;\n\n          > .generic-dialog-button:nth-child(2) {\n            border-left: var(--ch5-media-player--popup-border-width) var(--ch5-media-player--popup-border-style) var(--ch5-media-player--popup-border-color);\n          }\n        }\n\n        .generic-dialog-button {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          padding: $ch5-media-player--padding;\n          flex: 1;\n          cursor: pointer;\n          background: none;\n          border: none;\n          color: var(--ch5-media-player--popup-font-color);\n          border-top: var(--ch5-media-player--popup-border-width) var(--ch5-media-player--popup-border-style) var(--ch5-media-player--popup-border-color);\n\n          &:active {\n            background-color: var(--ch5-media-player--popup-active-button-background-color);\n            color: var(--ch5-media-player--popup-active-button-color);\n          }\n        }\n\n        .primary-dialog-button {\n          font-weight: 600;\n        }\n      }\n\n      .action-group-dialog-footer {\n        .action-group-dialog-button {\n          display: flex;\n          justify-content: center;\n          padding: $ch5-media-player--padding;\n          border-top: var(--ch5-media-player--popup-border-width) var(--ch5-media-player--popup-border-style) var(--ch5-media-player--popup-border-color);\n          cursor: pointer;\n        }\n\n        .primary-dialog-button {\n          font-weight: 600;\n        }\n      }\n    }\n  }"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-modal-dialog",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-modal-dialog",
+                        "description": "This class is added on the container div of the ch5-modal-dialog element.\n",
+                        "value": "position: fixed;\n  box-sizing: border-box;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 10001;\n\n  background-color: var(--ch5-modal-dialog--background-color);\n  border-radius: var(--ch5-modal-dialog--border-radius);\n  border: var(--ch5-modal-dialog--border-width) var(--ch5-modal-dialog--border-style) var(--ch5-modal-dialog--border-color);\n  color: var(--ch5-modal-dialog--text-color);\n  padding: var(--ch5-modal-dialog--padding);\n  min-width: 200px;\n\n  .ch5-modal-dialog-close-icon-btn {\n    border: none;\n    outline: none;\n    cursor: pointer;\n    float: right;\n    color: var(--ch5-modal-dialog--close-icon-color);\n\n    background-color: var(--ch5-modal-dialog--close-icon-background-color);\n    margin: var(--ch5-modal-dialog--close-icon-margin);\n    padding: var(--ch5-modal-dialog--close-icon-padding);\n    width: var(--ch5-modal-dialog--close-button-width);\n    font-size: var(--ch5-modal-dialog--close-icon-size);\n\n    &.f-left {\n      float: left;\n    }\n\n    &.f-right {\n      float: right;\n    }\n  }\n\n  .ch5-modal-dialog-default-close-icon {\n    font-size: var(--ch5-modal-dialog--default-close-icon-size);\n    color: var(--ch5-modal-dialog--close-icon-color);\n\n    &:before {\n      content: \"\\00d7\";\n    }\n\n    &:hover {\n      color: var(--ch5-modal-dialog--close-icon-color-hover);\n    }\n  }\n\n  /// the class added on the ok button\n  .ch5-modal-dialog-btn-ok {\n    float: left;\n  }\n\n  /// the class of the cancel button\n  .ch5-modal-dialog-btn-cancel {\n    float: right;\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-modal-dialog-btn-ok",
+                        "description": "the class added on the ok button\n",
+                        "value": "float: left;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-modal-dialog-btn-cancel",
+                        "description": "the class of the cancel button\n",
+                        "value": "float: right;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-modal-dialog-prompt",
+                        "description": "modal section (a div) that wraps the prompt-icon and the prompt-text\n",
+                        "value": "&:before {\n    clear: both;\n  }\n\n  padding: var(--ch5-modal-dialog--prompt-padding);\n  vertical-align: middle;\n\n  /// an image element.\n  .ch5-modal-dialog-prompt-icon {\n    vertical-align: middle;\n    margin-right: var(--ch5-modal-dialog--prompt-icon-margin-right);\n    font-size: var(--ch5-modal-dialog--prompt-icon-size);\n  }\n\n  /// a span element\n  .ch5-modal-dialog-prompt-text {\n    vertical-align: middle;\n    font-size: var(--ch5-modal-dialog--prompt-text-font-size);\n    font-style: var(--ch5-modal-dialog--prompt-text-font-style);\n    font-weight: var(--ch5-modal-dialog--prompt-text-font-weight);\n    color: var(--ch5-modal-dialog--prompt-text-font-color);\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-modal-dialog-prompt-icon",
+                        "description": "an image element.\n",
+                        "value": "vertical-align: middle;\n    margin-right: var(--ch5-modal-dialog--prompt-icon-margin-right);\n    font-size: var(--ch5-modal-dialog--prompt-icon-size);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-modal-dialog-prompt-text",
+                        "description": "a span element\n",
+                        "value": "vertical-align: middle;\n    font-size: var(--ch5-modal-dialog--prompt-text-font-size);\n    font-style: var(--ch5-modal-dialog--prompt-text-font-style);\n    font-weight: var(--ch5-modal-dialog--prompt-text-font-weight);\n    color: var(--ch5-modal-dialog--prompt-text-font-color);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-modal-dialog-mask",
+                        "description": "class added on the mask element\n",
+                        "value": "top: 0;\n  left: 0;\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  z-index: 10000;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-modal-dialog-contents",
+                        "description": "wrap the html that is initially between the ch5-modal-dialog tags\n",
+                        "value": "padding: var(--ch5-modal-dialog--contents-padding);\n  font-size: var(--ch5-modal-dialog--contents-font-size);\n  font-style: var(--ch5-modal-dialog--contents-font-style);\n  font-weight: var(--ch5-modal-dialog--contents-font-weight);\n  color: var(--ch5-modal-dialog--contents-font-color);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-modal-dialog-header",
+                        "description": "the modal header: the title string is placed here\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-modal-dialog-footer",
+                        "description": "modal section (div) that contains the two buttons\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-overlay-panel",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-overlay-panel",
+                        "description": "Main class\n",
+                        "value": "display: inline-block;\n  position: absolute;\n\n  background-color: var(--ch5-overlay-panel--background-color);\n  border-radius: var(--ch5-overlay-panel--border-radius);\n  border: var(--ch5-overlay-panel--border-width) var(--ch5-overlay-panel--border-style) var(--ch5-overlay-panel--border-color);\n  color: var(--ch5-overlay-panel--text-color);\n  padding: var(--ch5-overlay-panel--padding);\n  min-width: 200px;\n  z-index: 10000;\n\n  font-size: var(--ch5-overlay-panel--font-size);\n  font-style: var(--ch5-overlay-panel--font-style);\n  font-weight: var(--ch5-overlay-panel--font-weight);\n\n  /// Class for close icon\n  .ch5-overlay-panel-close-icon-btn {\n    border: none;\n    outline: none;\n    cursor: pointer;\n    float: right;\n    line-height: 1.15;\n\n    background-color: var(--ch5-overlay-panel--close-icon-background-color);\n    margin: var(--ch5-overlay-panel--close-icon-margin);\n    padding: var(--ch5-overlay-panel--close-icon-padding);\n    width: var(--ch5-overlay-panel--close-button-width);\n\n    &.f-left {\n      float: left;\n    }\n    &.f-right {\n      float: right;\n    }\n  }\n\n  /// Class for default close icon\n  .ch5-overlay-panel-default-close-icon {\n    color: var(--ch5-overlay-panel--close-icon-color);\n    font-size: var(--ch5-overlay-panel--close-icon-size);\n\n    &:before {\n      content: \"\\00d7\";\n    }\n    &:hover {\n      color: var(--ch5-overlay-panel--close-icon-color-hover);\n    }\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-overlay-panel-close-icon-btn",
+                        "description": "Class for close icon\n",
+                        "value": "border: none;\n    outline: none;\n    cursor: pointer;\n    float: right;\n    line-height: 1.15;\n\n    background-color: var(--ch5-overlay-panel--close-icon-background-color);\n    margin: var(--ch5-overlay-panel--close-icon-margin);\n    padding: var(--ch5-overlay-panel--close-icon-padding);\n    width: var(--ch5-overlay-panel--close-button-width);\n\n    &.f-left {\n      float: left;\n    }\n    &.f-right {\n      float: right;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-overlay-panel-default-close-icon",
+                        "description": "Class for default close icon\n",
+                        "value": "color: var(--ch5-overlay-panel--close-icon-color);\n    font-size: var(--ch5-overlay-panel--close-icon-size);\n\n    &:before {\n      content: \"\\00d7\";\n    }\n    &:hover {\n      color: var(--ch5-overlay-panel--close-icon-color-hover);\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-overlay-panel--overflow-scroll",
+                        "description": "Overflow auto\n",
+                        "value": "overflow: auto;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-overlay-panel--overflow-show",
+                        "description": "Overflow visible\n",
+                        "value": "overflow: visible;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-overlay-panel--stretch-width",
+                        "description": "Applied to make the width as much as its parent allows.\n",
+                        "value": "width: 100%;\n  height: auto;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-overlay-panel--stretch-height",
+                        "description": "Applied to make the height as much as its parent allows.\n",
+                        "value": "height: 100%;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-overlay-panel--stretch-both",
+                        "description": "Applied to make both width and height as much as its parent allows.\n",
+                        "value": "width: 100%;\n  height: 100%;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-overlay-panel-mask",
+                        "description": "Applied for panel mask\n",
+                        "value": "top: 0;\n  left: 0;\n  position: fixed;\n  width: 100%;\n  height: 100%;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-overlay-panel-contents",
+                        "description": "Applied for content of the panel\n",
+                        "value": "padding: var(--ch5-overlay-panel--contents-padding);\n  font-style: var(--ch5-overlay-panel--contents-font-style);\n  font-size: var(--ch5-overlay-panel--contents-font-size);\n  font-weight: var(--ch5-overlay-panel--contents-font-weight);\n  color: var(--ch5-overlay-panel--contents-font-color);"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-qrcode",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-qrcode",
+                        "description": "Main class\n",
+                        "value": "position: relative;\n  display: inline-flex;\n\n  /// Class applied for qrcode size\n  &.ch5-qrcode--size-css {\n    width: clamp(calc($min-size * 1px), calc(var(--ch5-qrcode--size) * 1px), calc($max-size * 1px));\n    height: clamp(calc($min-size * 1px), calc(var(--ch5-qrcode--size) * 1px), calc($max-size * 1px));\n    min-width: calc($min-size * 1px);\n    min-height: calc($min-size * 1px);\n  }\n\n  canvas {\n    min-width: calc($min-size * 1px);\n    min-height: calc($min-size * 1px);\n    aspect-ratio: 1 / 1;\n    border-width: var(--ch5-qrcode--border-width);\n    border-style: var(--ch5-qrcode--border-style);\n    border-color: var(--ch5-qrcode--border-color);\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-qrcode--size-css",
+                        "description": "Class applied for qrcode size\n",
+                        "value": "width: clamp(calc($min-size * 1px), calc(var(--ch5-qrcode--size) * 1px), calc($max-size * 1px));\n    height: clamp(calc($min-size * 1px), calc(var(--ch5-qrcode--size) * 1px), calc($max-size * 1px));\n    min-width: calc($min-size * 1px);\n    min-height: calc($min-size * 1px);"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-segmented-gauge",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-segmented-gauge",
+                        "description": "Main class\n",
+                        "value": "position: relative;\n  display: inline-flex;\n  cursor: pointer;\n\n  .ch5-segmented-gauge-segment {\n    background-color: var(--ch5-segmented-gauge--state-graphic-inactive);\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-segmented-gauge--disabled",
+                        "description": "Disabled class\n",
+                        "value": "@include ch5-component-disabled();"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-segmented-gauge--gauge-led-style-rectangle",
+                        "description": "Led style rectangle class\n",
+                        "value": ".ch5-segmented-gauge-segment {\n      height: var(--ch5-segmented-gauge--rectangle-each-gauge-height);\n      width: var(--ch5-segmented-gauge--rectangle-each-gauge-width);\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-segmented-gauge--gauge-led-style-circle",
+                        "description": "Led style circle class\n",
+                        "value": ".ch5-segmented-gauge-segment {\n      height: var(--ch5-segmented-gauge--circle-each-gauge-size);\n      width: var(--ch5-segmented-gauge--circle-each-gauge-size);\n      border-radius: 50%;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-segmented-gauge--orientation-horizontal",
+                        "description": "Orientation horizontal class\n",
+                        "value": "flex-direction: row;\n\n    .ch5-segmented-gauge-segment {\n      margin-right: 2px;\n    }\n\n    .ch5-segmented-gauge--segment--state-graphic-hidden {\n      width: 4px; // to remove the color for first segment\n      margin-right: 0px;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-segmented-gauge--orientation-vertical",
+                        "description": "Orientation vertical class\n",
+                        "value": "flex-direction: column;\n    transform: rotate(180deg);\n\n    .ch5-segmented-gauge-segment {\n      margin-top: 2px;\n    }\n\n    .ch5-segmented-gauge--segment--state-graphic-hidden {\n      height: 4px; // to remove the color for first segment\n      margin-top: 0px;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-segmented-gauge--segment-state-graphic-green.active",
+                        "description": "State graphic green class\n",
+                        "value": "background-color: var(--ch5-segmented-gauge--state-graphic-green);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-segmented-gauge--segment-state-graphic-yellow.active",
+                        "description": "State graphic yellow class\n",
+                        "value": "background-color: var(--ch5-segmented-gauge--state-graphic-yellow);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-segmented-gauge--segment-state-graphic-red.active",
+                        "description": "State graphic red class\n",
+                        "value": "background-color: var(--ch5-segmented-gauge--state-graphic-red);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-segmented-gauge--segment-state-graphic-inactive.active",
+                        "description": "State graphic inactive class\n",
+                        "value": "background-color: var(--ch5-segmented-gauge--state-graphic-inactive);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-segmented-gauge--segment-state-graphic-white.active",
+                        "description": "State graphic white class\n",
+                        "value": "background-color: var(--ch5-segmented-gauge--state-graphic-white);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-segmented-gauge--segment-state-graphic-blue.active",
+                        "description": "State graphic blue class\n",
+                        "value": "background-color: var(--ch5-segmented-gauge--state-graphic-blue);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-segmented-gauge--segment-state-graphic-orange.active",
+                        "description": "State graphic orange class\n",
+                        "value": "background-color: var(--ch5-segmented-gauge--state-graphic-orange);"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-select",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-select",
+                        "description": "Main class\n",
+                        "value": "position: relative;\n  display: block;\n  border: var(--ch5-select--border-width) var(--ch5-select--border-style) var(--ch5-select--border-color);\n  border-radius: var(--ch5-select--border-radius);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-select__main",
+                        "description": "Top line container (holds selected items and combo trigger button)\n",
+                        "value": "// for direction rtl we might just have to set display to `row-reverse`\n\n  @include layout-h;\n  @include layout-flex;\n  @include layout-center;\n  @include layout-justify;\n\n  width: 100%;\n  overflow: hidden;\n  padding: var(--ch5-select--padding);\n  box-sizing: border-box;\n  font-style: var(--ch5-select--font-style);\n  font-size: var(--ch5-select--font-size);\n  font-weight: var(--ch5-select--font-weight);\n  color: var(--ch5-select--font-color);\n\n  &[dir=\"rtl\"] {\n    @include rtl-style;\n  }\n\n  /// Dropdown button\n  .ch5-select__combo_trigger {\n    display: block;\n    width: var(--ch5-select--dropdown-icon-width);\n    height: var(--ch5-select--dropdown-icon-height);\n    overflow: hidden;\n    margin: var(--ch5-select--dropdown-icon-margin);\n  }\n\n  .ch5-select__selected_items {\n    width: calc(100% - 40px); // Not really sure if we need this\n    overflow: hidden;\n    @include layout-h;\n    @include layout-flex;\n    @include layout-center;\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-select__combo_trigger",
+                        "description": "Dropdown button\n",
+                        "value": "display: block;\n    width: var(--ch5-select--dropdown-icon-width);\n    height: var(--ch5-select--dropdown-icon-height);\n    overflow: hidden;\n    margin: var(--ch5-select--dropdown-icon-margin);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-select__panel__items",
+                        "description": "List container with items\n",
+                        "value": "width: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: absolute;\n  left: 0;\n  display: none;\n  background-color: var(--ch5-select--option-background-color);\n  box-shadow:0 2 px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-select__panel__item",
+                        "description": "Each item\n",
+                        "value": "@include layout-h;\n  @include layout-flex;\n  @include layout-center;\n  padding: var(--ch5-select--option-item-padding);\n  cursor: pointer;\n  color: var(--ch5-select--option-item-color);\n  border: var(--ch5-select--option-item-border-width) var(--ch5-select--option-item-border-style) var(--ch5-select--option-item-border-color);\n  background-color: var(--ch5-select--option-item-background-color);\n  font-size: var(--ch5-select--font-size);\n  &[dir=\"rtl\"] {\n    @include rtl-style;\n  }\n\n  &:not(.ch5-select__panel__item--selected):hover {\n    background-color: var(--ch5-select--option-item-hover-background-color);\n  }\n  /// Selected\n  &.ch5-select__panel__item--selected {\n    background-color: var(--ch5-select--option-item-selected-background-color);\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-select__panel__item--selected",
+                        "description": "Selected\n",
+                        "value": "background-color: var(--ch5-select--option-item-selected-background-color);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-select--disabled",
+                        "description": "Added automatically based on the disabled attribute or by receiveStateEnable\n",
+                        "value": "@include ch5-component-disabled();"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-select--selected",
+                        "description": "Applied when item is selected\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-select-pressed",
+                        "description": "Applied while finger on the item being selected\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-select__combo",
+                        "description": "Applied when in 'plain', combobox mode\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-select__panel",
+                        "description": "Applied when in 'panel' mode\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-select__panel--open",
+                        "description": "Overlay panel is open\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-signal-level-gauge",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-signal-level-gauge--disabled",
+                        "description": "Added automatically based on the disabled attribute or by receiveStateEnable\n",
+                        "value": "@include ch5-component-disabled();"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-signal-level-gauge",
+                        "description": "Added automatically on the ch5-signal-level-gauge element\n",
+                        "value": "position: relative;\n  display: inline-flex;\n\n  /// Applied when the bar is not receiving signal.\n  .ch5-signal-level-gauge--bar-color {\n    background-color: var(--ch5-signal-level-gauge--bar-color);\n  }\n  /// Applied when the bar is receiving signal.\n  .ch5-signal-level-gauge--selected-bar-color {\n    background-color: var(--ch5-signal-level-gauge--selected-bar-color);\n  }\n  /// Vertical orientation\n  &.ch5-signal-level-gauge--orientation-vertical {\n    align-items: center;\n    flex-direction: column-reverse;\n  }\n  /// Horizontal orientation\n  &.ch5-signal-level-gauge--orientation-horizontal {\n    align-items: flex-end;\n  }\n  \n  /// Applied when size='small'\n  &.ch5-signal-level-gauge--size-small {\n    height: var(--ch5-signal-level-gauge--small-height);\n    width: var(--ch5-signal-level-gauge--small-width);\n  }\n\n  /// Applied when size='regular'\n  &.ch5-signal-level-gauge--size-regular {\n    height: var(--ch5-signal-level-gauge--regular-height);\n    width: var(--ch5-signal-level-gauge--regular-width);\n  }\n\n  /// Applied when size='large'\n  &.ch5-signal-level-gauge--size-large {\n    height: var(--ch5-signal-level-gauge--large-height);\n    width: var(--ch5-signal-level-gauge--large-width);\n  }\n\n  /// Applied when size='x-large'\n  &.ch5-signal-level-gauge--size-x-large {\n    height: var(--ch5-signal-level-gauge--x-large-height);\n    width: var(--ch5-signal-level-gauge--x-large-width);\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-signal-level-gauge--bar-color",
+                        "description": "Applied when the bar is not receiving signal.\n",
+                        "value": "background-color: var(--ch5-signal-level-gauge--bar-color);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-signal-level-gauge--selected-bar-color",
+                        "description": "Applied when the bar is receiving signal.\n",
+                        "value": "background-color: var(--ch5-signal-level-gauge--selected-bar-color);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-signal-level-gauge--orientation-vertical",
+                        "description": "Vertical orientation\n",
+                        "value": "align-items: center;\n    flex-direction: column-reverse;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-signal-level-gauge--orientation-horizontal",
+                        "description": "Horizontal orientation\n",
+                        "value": "align-items: flex-end;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-signal-level-gauge--size-small",
+                        "description": "Applied when size='small'\n",
+                        "value": "height: var(--ch5-signal-level-gauge--small-height);\n    width: var(--ch5-signal-level-gauge--small-width);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-signal-level-gauge--size-regular",
+                        "description": "Applied when size='regular'\n",
+                        "value": "height: var(--ch5-signal-level-gauge--regular-height);\n    width: var(--ch5-signal-level-gauge--regular-width);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-signal-level-gauge--size-large",
+                        "description": "Applied when size='large'\n",
+                        "value": "height: var(--ch5-signal-level-gauge--large-height);\n    width: var(--ch5-signal-level-gauge--large-width);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-signal-level-gauge--size-x-large",
+                        "description": "Applied when size='x-large'\n",
+                        "value": "height: var(--ch5-signal-level-gauge--x-large-height);\n    width: var(--ch5-signal-level-gauge--x-large-width);"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-slider",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--tooltip--off",
+                        "description": "Applied when slider toolTipShowType=\"off\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--tooltip--auto",
+                        "description": "Applied when slider toolTipShowType=\"auto\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--tooltip--on",
+                        "description": "Applied when slider toolTipShowType=\"on\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--stretch--both",
+                        "description": "Applied when slider stretch=\"both\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--stretch--width",
+                        "description": "Applied when slider stretch=\"width\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--stretch--height",
+                        "description": "Applied when slider stretch=\"height\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--handle-size--x-small",
+                        "description": "Applied when slider handle size=\"x-small\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--handle-size--small",
+                        "description": "Applied when slider handle size=\"small\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--handle-size--regular",
+                        "description": "Applied when slider handle size=\"regular\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--handle-size--large",
+                        "description": "Applied when slider handle size=\"large\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--handle-size--x-large",
+                        "description": "Applied when slider handle size=\"x-large\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--size--x-small",
+                        "description": "Applied when slider  size=\"x-small\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--size--small",
+                        "description": "Applied when slider size=\"small\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--size--regular",
+                        "description": "Applied when slider size=\"regular\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--size--large",
+                        "description": "Applied when slider size=\"large\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--size--x-large",
+                        "description": "Applied when slider size=\"x-large\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--shape--rounded-rectangle",
+                        "description": "Applied when slider shape=\"rounded-rectangle\"\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--disabled",
+                        "description": "Applied when the component is disabled\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider",
+                        "description": "Main class\n",
+                        "value": "position: relative;\n  display: block;\n\n  &.ch5-hide-dis {\n    display: none;\n  }\n\n  &:focus,\n  .noUi-connects:focus,\n  .noUi-base,\n  .noUi-handle:focus {\n    outline: none;\n  }\n\n  &.nohandle .noUi-handle {\n    visibility: hidden;\n  }\n\n  .noUi-handle:after {\n    content: none !important;\n    height: 0% !important;\n    width: 0% !important;\n  }\n\n  &.ch5-slider--disabled {\n    .noUi-connect {\n      // background: lighten(\n      //   $ch5-slider-connect-bg,\n      //   var(--ch5-slider--background-lighten-percent)\n      // );\n      @include ch5-component-disabled();\n    }\n  }\n\n  .noUi-handle {\n    &:before,\n    &:after {\n      content: none;\n    }\n  }\n\n  .noUi-target {\n    display: inline-block;\n    background: transparent;\n    border-style: var(--ch5-slider--target-border-style);\n    border-color: var(--ch5-slider--target-border-color);\n    border-width: var(--ch5-slider--target-border-width);\n    box-shadow: none;\n  }\n\n  .noUi-connect {\n    background: var(--ch5-slider--connect-background-color);\n    border-color: var(--ch5-slider--connect-border-color);\n    border-style: var(--ch5-slider--connect-border-style);\n    border-width: var(--ch5-slider--connect-border-width);\n  }\n\n  .noUi-connects {\n    background: var(--ch5-slider--target-background-color);\n  }\n\n  .noUi-handle {\n    border-style: var(--ch5-slider--handle-border-style);\n    border-color: var(--ch5-slider--handle-border-color);\n    border-width: var(--ch5-slider--handle-border-width);\n    background: var(--ch5-slider--handle-background-color);\n    box-shadow: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1;\n  }\n\n  .noUi-touch-area {\n    padding: var(--ch5-slider--handle-touch-padding);\n  }\n\n  .ch5-slider-ticks {\n    .noUi-base {\n      border-style: var(--ch5-slider--target-border-style);\n      border-color: var(--ch5-slider--target-border-color);\n      border-width: var(--ch5-slider--target-border-width);\n    }\n  }\n\n  /// Applied when slider orientation=\"horizontal\"\n  &.ch5-slider--orientation--horizontal {\n    .noUi-target {\n      height: var(--ch5-slider--height);\n    }\n\n    &.ch5-slider--tooltip--on.ch5-advanced-slider-container {\n      &:not(.ch5-slider--stretch--both):not(.ch5-slider--stretch--height) .ch5-slider-button-container {\n        min-height: 30px;\n      }\n    }\n\n    &.ch5-slider-ticks {\n      .noUi-base {\n        height: 100%;\n      }\n    }\n  }\n\n  /// Applied when slider orientation=\"vertical\"\n  &.ch5-slider--orientation--vertical {\n    .noUi-target {\n      width: var(--ch5-slider--height);\n    }\n\n    &.ch5-slider--tooltip--on:not(.ch5-advanced-slider-container) {\n      &:not(.ch5-slider--stretch--both):not(.ch5-slider--stretch--width):not(.ch5-slider--stretch--height) .ch5-slider-button-container {\n        margin-left: var(--ch5-slider--tooltip-on-spacing-vertical-orientation);\n        min-width: 30px;\n      }\n    }\n\n    &.ch5-slider-ticks {\n      .noUi-base {\n        width: 100%;\n      }\n    }\n  }\n\n  /* ===============================================\n    STRETCH\n   ============================================= */\n  &.ch5-slider--stretch--width.ch5-slider--orientation--horizontal:not(.ch5-advanced-slider-container) {\n    .ch5-slider-button-container {\n      width: 100% !important;\n    }\n  }\n\n  &.ch5-slider--stretch--height.ch5-slider--orientation--vertical:not(.ch5-advanced-slider-container) {\n    .ch5-slider-button-container {\n      height: 100% !important;\n    }\n  }\n\n  &.ch5-slider--stretch--height.ch5-slider--orientation--horizontal:not(.ch5-advanced-slider-container) {\n    .ch5-slider-button-container {\n      height: 100% !important;\n    }\n  }\n\n  &.ch5-slider--stretch--width.ch5-slider--orientation--vertical:not(.ch5-advanced-slider-container) {\n    .ch5-slider-button-container {\n      width: 100% !important;\n      display: flex;\n      justify-content: center;\n    }\n  }\n\n  &.ch5-slider--stretch--both.ch5-slider--orientation--horizontal:not(.ch5-advanced-slider-container) {\n    .ch5-slider-button-container {\n      width: 100% !important;\n      height: 100% !important;\n    }\n  }\n\n  &.ch5-slider--stretch--both.ch5-slider--orientation--vertical:not(.ch5-advanced-slider-container) {\n    .ch5-slider-button-container {\n      height: 100% !important;\n      width: 100% !important;\n      display: flex;\n      justify-content: center;\n    }\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--orientation--horizontal",
+                        "description": "Applied when slider orientation=\"horizontal\"\n",
+                        "value": ".noUi-target {\n      height: var(--ch5-slider--height);\n    }\n\n    &.ch5-slider--tooltip--on.ch5-advanced-slider-container {\n      &:not(.ch5-slider--stretch--both):not(.ch5-slider--stretch--height) .ch5-slider-button-container {\n        min-height: 30px;\n      }\n    }\n\n    &.ch5-slider-ticks {\n      .noUi-base {\n        height: 100%;\n      }\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--orientation--vertical",
+                        "description": "Applied when slider orientation=\"vertical\"\n",
+                        "value": ".noUi-target {\n      width: var(--ch5-slider--height);\n    }\n\n    &.ch5-slider--tooltip--on:not(.ch5-advanced-slider-container) {\n      &:not(.ch5-slider--stretch--both):not(.ch5-slider--stretch--width):not(.ch5-slider--stretch--height) .ch5-slider-button-container {\n        margin-left: var(--ch5-slider--tooltip-on-spacing-vertical-orientation);\n        min-width: 30px;\n      }\n    }\n\n    &.ch5-slider-ticks {\n      .noUi-base {\n        width: 100%;\n      }\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--shape--rectangle",
+                        "description": "Applied when slider shape=\"rectangle\"\n",
+                        "value": ".noUi-handle,\n\t\t.noUi-target,\n\t\t.noUi-connects {\n\t\t\tborder-radius: var(--ch5-slider--shape-rectangle-border-radius);\n\t\t}"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--shape--circle",
+                        "description": "Applied when slider shape=\"circle\"\n",
+                        "value": ".noUi-target,\n\t\t.noUi-connects {\n\t\t\tborder-radius: var(--ch5-slider--shape-circle-border-radius);\n\t\t}\n\t\t.noUi-handle {\n\t\t\tborder-radius: 50%;\n\t\t}"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-slider--shape--oval",
+                        "description": "Applied when slider shape=\"oval\"\n",
+                        "value": ".noUi-target,\n\t\t.noUi-connects {\n\t\t\tborder-radius: var(--ch5-slider--shape-oval-border-radius);\n\t\t}\n\t\t.noUi-handle {\n\t\t\tborder-radius: var(--ch5-slider--shape-oval-handle-border-radius);\n\t\t}"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-slider-variables",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--height:",
+                        "description": "description: Height for slider. Note: If orientation is vertical then height variable will be set to width css property and vice-versa\n  type: unit\n  values: px, %\n  show-theme-editor: true\n  example: 18px \n  related-theme-variable: --theme-ch5-slider--height\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--target-border-width:",
+                        "description": "description: Width for slider target\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 1px \n  related-theme-variable: --theme-ch5-slider--target-border-width\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--handle-border-width:",
+                        "description": "description: Slider handle border width\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 1px \n  related-theme-variable: --theme-ch5-slider--handle-border-width\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--target-border-style:",
+                        "description": "description: Slider border style\n  type: list\n  values: none, solid, dotted, dashed, double, groove, ridge, inset, outset\n  show-theme-editor: true\n  example: solid \n  related-theme-variable: --theme-ch5-slider--target-border-style\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--handle-border-style:",
+                        "description": "description: Slider handle border style\n  type: list\n  values: none, solid, dotted, dashed, double, groove, ridge, inset, outset\n  show-theme-editor: true\n  example: solid \n  related-theme-variable: --theme-ch5-slider--handle-border-style\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--width-x-small:",
+                        "description": "description: Width of slider for size=x-small. Note: If orientation is vertical then width variable will be set to height css property\n  type: unit\n  values: px, %\n  show-theme-editor: true\n  example: 200px \n  related-theme-variable: --theme-ch5-slider--width-x-small\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--width-small:",
+                        "description": "description: Width of slider for size=small. Note: If orientation is vertical then width variable will be set to height css property\n  type: unit\n  values: px, %\n  show-theme-editor: true\n  example: 250px \n  related-theme-variable: --theme-ch5-slider--width-small\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--width-regular:",
+                        "description": "description: Width of slider for size=regular. Note: If orientation is vertical then width variable will be set to height css property\n  type: unit\n  values: px, %\n  show-theme-editor: true\n  example: 300px \n  related-theme-variable: --theme-ch5-slider--width-regular\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--width-large:",
+                        "description": "description: Width of slider for size=large. Note: If orientation is vertical then width variable will be set to height css property\n  type: unit\n  values: px, %\n  show-theme-editor: true\n  example: 400px \n  related-theme-variable: --theme-ch5-slider--width-large\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--width-x-large:",
+                        "description": "description: Width of slider for size=x-large. Note: If orientation is vertical then width variable will be set to height css property\n  type: unit\n  values: px, %\n  show-theme-editor: true\n  example: 500px \n  related-theme-variable: --theme-ch5-slider--width-x-large\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-x-small-button-width:",
+                        "description": "description: Slider button width for size=x-small\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 24px \n  related-theme-variable: --theme-ch5-slider--size-x-small-button-width\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-x-small-button-height:",
+                        "description": "description: Slider button height for size=x-small\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 26px \n  related-theme-variable: --theme-ch5-slider--size-x-small-button-height\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-small-button-width:",
+                        "description": "description: Slider button width for size=small\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 26px \n  related-theme-variable: --theme-ch5-slider--size-small-button-width\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-small-button-height:",
+                        "description": "description: Slider button height for size=small\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 30px \n  related-theme-variable: --theme-ch5-slider--size-small-button-height\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-regular-button-width:",
+                        "description": "description: Slider button width for size=regular\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 30px \n  related-theme-variable: --theme-ch5-slider--size-regular-button-width\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-regular-button-height:",
+                        "description": "description: Slider button height for size=regular\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 36px \n  related-theme-variable: --theme-ch5-slider--size-regular-button-height\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-large-button-width:",
+                        "description": "description: Slider button width for size=large\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 34px \n  related-theme-variable: --theme-ch5-slider--size-large-button-width\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-large-button-height:",
+                        "description": "description: Slider button height for size=large\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 42px \n  related-theme-variable: --theme-ch5-slider--size-large-button-height\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-x-large-button-width:",
+                        "description": "description: Slider button width for size=x-large\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 40px \n  related-theme-variable: --theme-ch5-slider--size-x-large-button-width\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-x-large-button-height:",
+                        "description": "description: Slider button height for size=x-large\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 54px \n  related-theme-variable: --theme-ch5-slider--size-x-large-button-height\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-x-small-handle-width-rounded-rectangle:",
+                        "description": "description: Handle width for size=x-small when shape=rounded-rectangle. Note: If orientation is vertical then width variable will be set to height css property\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 26px \n  related-theme-variable: --theme-ch5-slider--size-x-small-handle-width-rounded-rectangle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-x-small-handle-height-rounded-rectangle:",
+                        "description": "description: Handle height for size=x-small when shape=rounded-rectangle. Note: If orientation is vertical then height variable will be set to width css property\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 24px \n  related-theme-variable: --theme-ch5-slider--size-x-small-handle-height-rounded-rectangle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-small-handle-width-rounded-rectangle:",
+                        "description": "description: Handle width for size=small when shape=rounded-rectangle. Note: If orientation is vertical then width variable will be set to height css property\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 30px \n  related-theme-variable: --theme-ch5-slider--size-small-handle-width-rounded-rectangle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-small-handle-height-rounded-rectangle:",
+                        "description": "description: Handle height for size=small when shape=rounded-rectangle. Note: If orientation is vertical then height variable will be set to width css property\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 26px \n  related-theme-variable: --theme-ch5-slider--size-small-handle-height-rounded-rectangle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-regular-handle-width-rounded-rectangle:",
+                        "description": "description: Handle width for size=regular when shape=rounded-rectangle. Note: If orientation is vertical then width variable will be set to height css property\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 36px \n  related-theme-variable: --theme-ch5-slider--size-regular-handle-width-rounded-rectangle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-regular-handle-height-rounded-rectangle:",
+                        "description": "description: Handle height for size=regular when shape=rounded-rectangle. Note: If orientation is vertical then height variable will be set to width css property\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 30px \n  related-theme-variable: --theme-ch5-slider--size-regular-handle-height-rounded-rectangle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-large-handle-width-rounded-rectangle:",
+                        "description": "description: Handle width for size=large when shape=rounded-rectangle. Note: If orientation is vertical then width variable will be set to height css property\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 42px \n  related-theme-variable: --theme-ch5-slider--size-large-handle-width-rounded-rectangle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-large-handle-height-rounded-rectangle:",
+                        "description": "description: Handle height for size=large when shape=rounded-rectangle. Note: If orientation is vertical then height variable will be set to width css property\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 34px \n  related-theme-variable: --theme-ch5-slider--size-large-handle-height-rounded-rectangle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-x-large-handle-width-rounded-rectangle:",
+                        "description": "description: Handle width for size=x-large when shape=rounded-rectangle. Note: If orientation is vertical then width variable will be set to height css property\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 54px \n  related-theme-variable: --theme-ch5-slider--size-x-large-handle-width-rounded-rectangle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-x-large-handle-height-rounded-rectangle:",
+                        "description": "description: Handle height for size=x-large when shape=rounded-rectangle. Note: If orientation is vertical then height variable will be set to width css property\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 40px \n  related-theme-variable: --theme-ch5-slider--size-x-large-handle-height-rounded-rectangle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-x-small-handle-width-rectangle:",
+                        "description": "description: Handle width for size=x-small when shape=rectangle. Note: If orientation is vertical then width variable will be set to height css property\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 26px \n  related-theme-variable: --theme-ch5-slider--size-x-small-handle-width-rectangle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-x-small-handle-height-rectangle:",
+                        "description": "description: Handle height for size=x-small when shape=rectangle. Note: If orientation is vertical then height variable will be set to width css property\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 24px \n  related-theme-variable: --theme-ch5-slider--size-x-small-handle-height-rectangle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-small-handle-width-rectangle:",
+                        "description": "description: Handle width for size=small when shape=rectangle. Note: If orientation is vertical then width variable will be set to height css property\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 30px \n  related-theme-variable: --theme-ch5-slider--size-small-handle-width-rectangle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-small-handle-height-rectangle:",
+                        "description": "description: Handle height for size=small when shape=rectangle. Note: If orientation is vertical then height variable will be set to width css property\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 26px \n  related-theme-variable: --theme-ch5-slider--size-small-handle-height-rectangle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-regular-handle-width-rectangle:",
+                        "description": "description: Handle width for size=regular when shape=rectangle. Note: If orientation is vertical then width variable will be set to height css property\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 36px \n  related-theme-variable: --theme-ch5-slider--size-regular-handle-width-rectangle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-regular-handle-height-rectangle:",
+                        "description": "description: Handle height for size=regular when shape=rectangle. Note: If orientation is vertical then height variable will be set to width css property\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 30px \n  related-theme-variable: --theme-ch5-slider--size-regular-handle-height-rectangle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-large-handle-width-rectangle:",
+                        "description": "description: Handle width for size=large when shape=rectangle. Note: If orientation is vertical then width variable will be set to height css property\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 42px \n  related-theme-variable: --theme-ch5-slider--size-large-handle-width-rectangle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-large-handle-height-rectangle:",
+                        "description": "description: Handle height for size=large when shape=rectangle. Note: If orientation is vertical then height variable will be set to width css property\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 34px \n  related-theme-variable: --theme-ch5-slider--size-large-handle-height-rectangle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-x-large-handle-width-rectangle:",
+                        "description": "description: Handle width for size=x-large when shape=rectangle. Note: If orientation is vertical then width variable will be set to height css property\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 54px \n  related-theme-variable: --theme-ch5-slider--size-x-large-handle-width-rectangle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-x-large-handle-height-rectangle:",
+                        "description": "description: Handle height for size=x-large when shape=rectangle. Note: If orientation is vertical then height variable will be set to width css property\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 40px \n  related-theme-variable: --theme-ch5-slider--size-x-large-handle-height-rectangle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-x-small-handle-width-circle:",
+                        "description": "description: Handle width for size=x-small when shape=circle\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 26px \n  related-theme-variable: --theme-ch5-slider--size-x-small-handle-width-circle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-small-handle-width-circle:",
+                        "description": "description: Handle width for size=small when shape=circle\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 30px \n  related-theme-variable: --theme-ch5-slider--size-small-handle-width-circle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-regular-handle-width-circle:",
+                        "description": "description: Handle width for size=regular when shape=circle\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 36px \n  related-theme-variable: --theme-ch5-slider--size-regular-handle-width-circle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-large-handle-width-circle:",
+                        "description": "description: Handle width for size=large when shape=circle\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 42px \n  related-theme-variable: --theme-ch5-slider--size-large-handle-width-circle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-x-large-handle-width-circle:",
+                        "description": "description: Handle width for size=x-large when shape=circle\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 54px \n  related-theme-variable: --theme-ch5-slider--size-x-large-handle-width-circle\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-x-small-handle-width-oval:",
+                        "description": "description: Handle width for size=x-small when shape=oval\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 26px \n  related-theme-variable: --theme-ch5-slider--size-x-small-handle-width-oval\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-small-handle-width-oval:",
+                        "description": "description: Handle width for size=small when shape=oval\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 30px \n  related-theme-variable: --theme-ch5-slider--size-small-handle-width-oval\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-regular-handle-width-oval:",
+                        "description": "description: Handle width for size=regular when shape=oval\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 36px \n  related-theme-variable: --theme-ch5-slider--size-regular-handle-width-oval\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-large-handle-width-oval:",
+                        "description": "description: Handle width for size=large when shape=oval\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 42px \n  related-theme-variable: --theme-ch5-slider--size-large-handle-width-oval\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-x-large-handle-width-oval:",
+                        "description": "description: Handle width for size=x-large when shape=oval\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 54px \n  related-theme-variable: --theme-ch5-slider--size-x-large-handle-width-oval\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--tooltip-font-size:",
+                        "description": "description: Font size of the tooltip\n  type: unit\n  values: px, %\n  show-theme-editor: true\n  example: 14px\n  related-theme-variable: --theme-ch5-slider--tooltip-font-size\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--tooltip-font-style:",
+                        "description": "description: Font style of the tooltip\n  type: list\n  values: normal, italic\n  show-theme-editor: true\n  example: normal\n  related-theme-variable: --theme-ch5-slider--tooltip-font-style\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--tooltip-font-weight:",
+                        "description": "description: Font weight of the tooltip\n  type: list\n  values: normal, bold\n  show-theme-editor: true\n  example: normal\n  related-theme-variable: --theme-ch5-slider--tooltip-font-weight\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--tooltip-on-spacing-vertical-orientation:",
+                        "description": "description: Tooltip spacing vertical slider\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 58px \n  related-theme-variable: --theme-ch5-slider--tooltip-on-spacing-vertical-orientation\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--tooltip-on-spacing-horizontal-orientation:",
+                        "description": "description: Tooltip spacing for horizontal slider\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 40px \n  related-theme-variable: --theme-ch5-slider--tooltip-on-spacing-horizontal-orientation\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--target-border-color:",
+                        "description": "description: Border color for slider target\n  type: color\n  values: rgb(35,35,35), #1a1a1a, red\n  show-theme-editor: true\n  example: #efefef\n  related-theme-variable: --theme-ch5-slider--target-border-color\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--connect-background-color:",
+                        "description": "description: Slider connect background color\n  type: color\n  values: rgb(35,35,35), #1a1a1a, red\n  show-theme-editor: true\n  example: #0099ff\n  related-theme-variable: --theme-ch5-slider--connect-background-color\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--connect-border-color:",
+                        "description": "description: Border color for slider connect\n  type: color\n  values: rgb(35,35,35), #1a1a1a, red\n  show-theme-editor: true\n  example: #efefef\n  related-theme-variable: --theme-ch5-slider--connect-border-color\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--connect-border-style:",
+                        "description": "description: Border style for Slider connect\n  type: list\n  values: none, solid, dotted, dashed, double, groove, ridge, inset, outset\n  show-theme-editor: true\n  example: solid \n  related-theme-variable: --theme-ch5-slider--connect-border-style\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--connect-border-width:",
+                        "description": "description: Width for slider connect\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 1px \n  related-theme-variable: --theme-ch5-slider--connect-border-width\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--target-background-color:",
+                        "description": "description: Slider target background color\n  type: color\n  values: rgb(35,35,35), #1a1a1a, red\n  show-theme-editor: true\n  example: #2f2f33\n  related-theme-variable: --theme-ch5-slider--target-background-color\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--handle-border-color:",
+                        "description": "description: Slider handle border color\n  type: color\n  values: rgb(35,35,35), #1a1a1a, red\n  show-theme-editor: true\n  example: #efefef\n  related-theme-variable: --theme-ch5-slider--handle-border-color\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--handle-background-color:",
+                        "description": "description: Slider handle background\n  type: color\n  values: rgb(35,35,35), #1a1a1a, red\n  show-theme-editor: true\n  example: #efefef\n  related-theme-variable: --theme-ch5-slider--handle-background-color\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--pips-color:",
+                        "description": "description: Slider pips color\n  type: color\n  values: rgb(35,35,35), #1a1a1a, red\n  show-theme-editor: true\n  example: #efefef\n  related-theme-variable: --theme-ch5-slider--pips-color\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--button-padding:",
+                        "description": "description: Slider button padding\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 0.25rem \n  related-theme-variable: --theme-ch5-slider--button-padding\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--button-content-line-height:",
+                        "description": "description: Slider button content line height\n  type: number\n  values: 1, 10, 100\n  show-theme-editor: true\n  example: 1.2 \n  related-theme-variable: --theme-ch5-slider--button-content-line-height\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--shape-rectangle-border-radius:",
+                        "description": "description: Border radius for slider when handleshape=\"rectangle\"\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 0\n  related-theme-variable: --theme-ch5-slider--shape-rectangle-border-radius\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--shape-circle-border-radius:",
+                        "description": "description: Border radius for slider when handleshape=\"circle\"\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 8px\n  related-theme-variable: --theme-ch5-slider--shape-circle-border-radius\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--shape-rounded-rectangle-border-radius:",
+                        "description": "description: Border radius for slider when handleshape=\"rounded-rectangle\"\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 8px\n  related-theme-variable: --theme-ch5-slider--shape-rounded-rectangle-border-radius\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--shape-oval-border-radius:",
+                        "description": "description: Border radius for slider when handleshape=\"oval\"\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 10px\n  related-theme-variable: --theme-ch5-slider--shape-oval-border-radius\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--shape-oval-handle-border-radius:",
+                        "description": "description: Border radius for slider handle when handleshape=\"oval\"\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 50%\n  related-theme-variable: --theme-ch5-slider--shape-oval-handle-border-radius\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-x-small-handle-height-oval:",
+                        "description": "description: Handle height for slider when handleshape=\"oval\" and handlesize=\"x-small\"\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 17px \n  related-theme-variable: --theme-ch5-slider--size-x-small-handle-height-oval\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-small-handle-height-oval:",
+                        "description": "description: Handle height for slider when handleshape=\"oval\" and handlesize=\"small\"\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 20px \n  related-theme-variable: --theme-ch5-slider--size-small-handle-height-oval\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-regular-handle-height-oval:",
+                        "description": "description: Handle height for slider when handleshape=\"oval\" and handlesize=\"regular\"\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 24px \n  related-theme-variable: --theme-ch5-slider--size-regular-handle-height-oval\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-large-handle-height-oval:",
+                        "description": "description: Handle height for slider when handleshape=\"oval\" and handlesize=\"large\"\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 28px \n  related-theme-variable: --theme-ch5-slider--size-large-handle-height-oval\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--size-x-large-handle-height-oval:",
+                        "description": "description: Handle height for slider when handleshape=\"oval\" and handlesize=\"x-large\"\n  type: unit\n  values: px\n  show-theme-editor: true\n  example: 36px \n  related-theme-variable: --theme-ch5-slider--size-x-large-handle-height-oval\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--handle-touch-padding:",
+                        "description": "description: Handle touch padding for slider\n  type: unit\n  values: px, %\n  show-theme-editor: true\n  example: 0px \n  related-theme-variable: --theme-ch5-slider--handle-touch-padding\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--label-text-decoration:",
+                        "description": "description: Text decoration for the slider label\n  type: list\n  values: none, underline, line-through\n  show-theme-editor: false\n  example: none\n  related-theme-variable: --theme-ch5-slider--label-text-decoration\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--label-font-size:",
+                        "description": "description: Font size for the slider label\n  type: unit\n  values: px, %\n  show-theme-editor: true\n  example: 14px\n  related-theme-variable: --theme-ch5-slider--label-font-size\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--label-font-weight:",
+                        "description": "description: Font weight for the slider label\n  type: list\n  values: normal, bold\n  show-theme-editor: true\n  example: normal\n  related-theme-variable: --theme-ch5-slider--label-font-weight\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--label-font-color:",
+                        "description": "description: Font color for the slider label\n  type: color\n  values: rgb(35,35,35), #1a1a1a, red\n  show-theme-editor: true\n  example: #ffffff\n  related-theme-variable: --theme-ch5-slider--label-font-color\n",
+                        "value": "@extend ch5-button !optional;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "--ch5-slider--label-letter-spacing:",
+                        "description": "description: Letter spacing for the slider label\n  type: unit\n  values: px\n  show-theme-editor: false\n  example: 72px\n  related-theme-variable: --theme-ch5-slider--label-letter-spacing\n",
+                        "value": "@extend ch5-button !optional;"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-spinner",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-spinner",
+                        "description": "Main class\n",
+                        "value": "-webkit-user-select: none; /* Chrome all / Safari all */\n  -moz-user-select: none; /* Firefox all */\n  -ms-user-select: none; /* IE 10+ */\n  user-select: none;\n  font-size: var(--ch5-spinner--font-size);\n  font-style: var(--ch5-spinner--font-style);\n  font-weight: var(--ch5-spinner--font-weight);\n  cursor: pointer;\n  width: 100%;\n  \n  /// @require .ch5-spinner\n  /// Applied for spinner wrapper\n  &__wrapper {\n    overflow: hidden;\n    position: relative;\n    z-index: 9999;\n    text-align: center;\n\n    &:before,\n    &:after {\n      content: \"\";\n      height: 30%;\n      left: 0;\n      right: 0;\n      position: absolute;\n      z-index: 9999;\n    }\n\n    &:after {\n      background: linear-gradient(rgba(255, 255, 255, 0.05), #fff 120%);\n      bottom: 0;\n    }\n\n    &:before {\n      background: linear-gradient(#fff 5%, rgba(255, 255, 255, 0.05));\n      top: 0;\n    }\n  }\n  /// @require .ch5-spinner\n  /// Applied for scroll animation\n  &__scrollarea--animate {\n    transition: all 0.5s ease;\n  }\n  /// @require .ch5-spinner\n  /// Applied for the highlight section\n  &__highlight {\n    position: absolute;\n    width: 100%;\n    left: 0;\n    right: 0;\n    border-bottom: var(--ch5-spinner--border-width) var(--ch5-spinner--border-style) var(--ch5-spinner--highlight-border-color);\n    box-shadow: 0px 0px 3px var(--ch5-spinner--highlight-box-shadow-color);\n  }\n\n  &__overlay {\n    position: fixed;\n    z-index: 999;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    height: 100%;\n    background: var(--ch5-spinner--overlay-background-color);\n    cursor: grabbing;\n    opacity: 0;\n    display: none;\n  }\n  /// @require .ch5-spinner\n  /// Applied on the item\n  &__item {\n    color: var(--ch5-spinner--item-color);\n    white-space: nowrap;\n    transition: all 0.4s ease;\n    justify-content: center;\n    align-items: center;\n  }\n  /// @require .ch5-spinner\n  /// Applied on the active item\n  &--active {\n    font-size: var(--ch5-spinner--font-size);\n    color: var(--ch5-spinner--active-item-color);\n  }\n  /// @require .ch5-spinner\n  /// Applied on the icon\n  &__icon {\n    font-size: var(--ch5-spinner--icon-size);\n    padding: var(--ch5-spinner--icon-padding);\n    margin: var(--ch5-spinner--icon-margin);\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-spinner__wrapper",
+                        "description": "Applied for spinner wrapper",
+                        "value": "overflow: hidden;\n    position: relative;\n    z-index: 9999;\n    text-align: center;\n\n    &:before,\n    &:after {\n      content: \"\";\n      height: 30%;\n      left: 0;\n      right: 0;\n      position: absolute;\n      z-index: 9999;\n    }\n\n    &:after {\n      background: linear-gradient(rgba(255, 255, 255, 0.05), #fff 120%);\n      bottom: 0;\n    }\n\n    &:before {\n      background: linear-gradient(#fff 5%, rgba(255, 255, 255, 0.05));\n      top: 0;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-spinner__scrollarea--animate",
+                        "description": "Applied for scroll animation",
+                        "value": "transition: all 0.5s ease;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-spinner__highlight",
+                        "description": "Applied for the highlight section",
+                        "value": "position: absolute;\n    width: 100%;\n    left: 0;\n    right: 0;\n    border-bottom: var(--ch5-spinner--border-width) var(--ch5-spinner--border-style) var(--ch5-spinner--highlight-border-color);\n    box-shadow: 0px 0px 3px var(--ch5-spinner--highlight-box-shadow-color);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-spinner__item",
+                        "description": "Applied on the item",
+                        "value": "color: var(--ch5-spinner--item-color);\n    white-space: nowrap;\n    transition: all 0.4s ease;\n    justify-content: center;\n    align-items: center;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-spinner--active",
+                        "description": "Applied on the active item",
+                        "value": "font-size: var(--ch5-spinner--font-size);\n    color: var(--ch5-spinner--active-item-color);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-spinner__icon",
+                        "description": "Applied on the icon",
+                        "value": "font-size: var(--ch5-spinner--icon-size);\n    padding: var(--ch5-spinner--icon-padding);\n    margin: var(--ch5-spinner--icon-margin);"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-subpage-reference-list",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-subpage-reference-list",
+                        "description": "Main class\n",
+                        "value": "position: relative;\n  overflow: scroll;\n  white-space: nowrap;\n  will-change: transform;\n  user-select: none;\n  display: grid;\n  height: 100%;\n  scrollbar-width: none; // needed to hide the firefox scrollbar\n  background-color: var(--ch5-subpage-reference-list--background-color);\n  padding-left: var(--ch5-subpage-reference-list--container-padding-left);\n  padding-right: var(--ch5-subpage-reference-list--container-padding-right);\n  padding-top: var(--ch5-subpage-reference-list--container-padding-top);\n  padding-bottom: var(--ch5-subpage-reference-list--container-padding-bottom);\n\n  &.active {\n    cursor: -webkit-grabbing;\n  }\n\n  &.ch5-subpage-reference-list::-webkit-scrollbar {\n    height: 0;\n    width: 0;\n  }\n\n  & ~ .scrollbar-container {\n    position: absolute;\n    background-color: var(--ch5-subpage-reference-list--scrollbar-track-color);\n    border-radius: var(--ch5-subpage-reference-list--scrollbar-border-radius);\n\n    .scrollbar {\n      position: absolute;\n      will-change: width, transform;\n      position: absolute;\n      border-radius: var(--ch5-subpage-reference-list--scrollbar-border-radius);\n      background: var(--ch5-subpage-reference-list--scrollbar-thumb-color);\n    }\n  }\n\n  &.ch5-subpage-reference-list--scrollbar-true {\n    & ~ .scrollbar-container {\n      display: block;\n    }\n  }\n\n  &.ch5-subpage-reference-list--scrollbar-false {\n    & ~ .scrollbar-container {\n      display: none;\n    }\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-subpage-reference-list--disabled",
+                        "description": "Applied when the subpage reference list is disabled\n",
+                        "value": "@include ch5-component-disabled();"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-subpage-reference-list--orientation-horizontal",
+                        "description": "Applied when orientation='horizontal'\n",
+                        "value": "grid-auto-flow: column;\n\n    &.ch5-subpage-reference-list--center-items-true {\n      justify-content: center;\n      align-content: start;\n    }\n\n    &.ch5-subpage-reference-list--center-items-false {\n      align-content: start;\n      justify-content: start;\n    }\n\n    &.ch5-subpage-reference-list--stretch-both {\n      align-content: stretch;\n      justify-content: stretch;\n    }\n\n    /// Applied for the container of subpage\n    .ch5-subpage-reference-list--subpage-container {\n      height: 100%;\n      padding: var(--ch5-subpage-reference-list--item-padding);\n    }\n\n    &.ch5-subpage-reference-list--stretch-both {\n      .ch5-subpage-reference-list--subpage-container {\n        width: 100%;\n      }\n    }\n\n    &.ch5-subpage-reference-list--scrollbar-true {\n      //padding-bottom: var(--ch5-subpage-reference-list--scrollbar-width);\n\n      &~.scrollbar-container {\n        width: 100%;\n        bottom: calc(-1 * var(--ch5-subpage-reference-list--scrollbar-width));\n        height: var(--ch5-subpage-reference-list--scrollbar-width);\n\n        .scrollbar {\n          height: 100%;\n        }\n      }\n    }\n\n    @for $var from 1 to 601 {\n      &.ch5-subpage-reference-list--rows-#{$var} {\n        grid-template-rows: repeat($var, 1fr);\n      }\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-subpage-reference-list--subpage-container",
+                        "description": "Applied for the container of subpage\n",
+                        "value": "height: 100%;\n      padding: var(--ch5-subpage-reference-list--item-padding);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-subpage-reference-list--orientation-vertical",
+                        "description": "Applied when orientation='vertical'\n",
+                        "value": "grid-auto-flow: row;\n\n    &.ch5-subpage-reference-list--center-items-true {\n      justify-content: start;\n      align-content: center;\n    }\n\n    &.ch5-subpage-reference-list--center-items-false {\n      align-content: start;\n      justify-content: start;\n    }\n\n    &.ch5-subpage-reference-list--stretch-both {\n      align-content: stretch;\n      justify-content: stretch;\n    }\n\n    &.ch5-subpage-reference-list--scrollbar-true {\n      //padding-right: var(--ch5-subpage-reference-list--scrollbar-width);\n\n      &~.scrollbar-container {\n        top: 0;\n        height: 100%;\n        right: calc(-1 * var(--ch5-subpage-reference-list--scrollbar-width));\n        left: auto;\n        width: var(--ch5-subpage-reference-list--scrollbar-width);\n\n        .scrollbar {\n          width: 100%;\n        }\n      }\n    }\n\n    .ch5-subpage-reference-list--subpage-container {\n      width: 100%;\n      padding: var(--ch5-subpage-reference-list--item-padding);\n    }\n\n    &.ch5-subpage-reference-list--stretch-both {\n      .ch5-subpage-reference-list--subpage-container {\n        height: 100%;\n      }\n    }\n\n    @for $var from 1 to 601 {\n      &.ch5-subpage-reference-list--columns-#{$var} {\n        grid-template-columns: repeat($var, 1fr);\n      }\n    }"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-tab-button",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--button-type-default",
+                        "description": "Applied when buttonType='default'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--button-type-danger",
+                        "description": "Applied when buttonType='danger'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--button-type-text",
+                        "description": "Applied when buttonType='text'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--button-type-warning",
+                        "description": "Applied when buttonType='warning'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--button-type-info",
+                        "description": "Applied when buttonType='info'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--button-type-success",
+                        "description": "Applied when buttonType='success'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--button-type-primary",
+                        "description": "Applied when buttonType='primary'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--button-type-secondary",
+                        "description": "Applied when buttonType='secondary'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--button-icon-position-first",
+                        "description": "Applied when buttonIconPosition='first'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--button-icon-position-last",
+                        "description": "Applied when buttonIconPosition='last'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--button-icon-position-top",
+                        "description": "Applied when buttonIconPosition='top'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--button-icon-position-bottom",
+                        "description": "Applied when buttonIconPosition='bottom'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--button-shape-rectangle",
+                        "description": "Applied when buttonShape='rectangle'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--button-shape-rounded-rectangle",
+                        "description": "Applied when buttonShape='rounded-rectangle'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--button-shape-tab",
+                        "description": "Applied when buttonShape='tab'\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--start-tab-style",
+                        "description": "Applied for start tab button when orientation is horizontal and applied for top most tab button when orientation is vertical.\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--end-tab-style",
+                        "description": "Applied for end tab button when orientation is horizontal and applied for bottom most tab button when orientation is vertical.\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--center-tab-style",
+                        "description": "Applied for center tab buttons when orientation is horizontal and vertical.\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--pressed",
+                        "description": "Applied when buttonPressed='true'. Note - use !important css property to override the styles of child button. \n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--selected",
+                        "description": "Applied when buttonSelected='true'. Note - use !important css property to override the styles of child button.\n",
+                        "value": "// DO NOT DELETE - used for Component Reference"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button",
+                        "description": "Main class\n",
+                        "value": "position: relative;\n  user-select: none;\n  will-change: transform;\n  display: flex;\n  height: auto;\n\n  &.active {\n    cursor: -webkit-grabbing;\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--disabled",
+                        "description": "Applied tab button is set to disabled\n",
+                        "value": "@include ch5-component-disabled();"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--orientation-horizontal",
+                        "description": "Applied when orientation is horizontal\n",
+                        "value": ".ch5-tab-button--button-container {      \n      flex: 1 1;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-tab-button--orientation-vertical",
+                        "description": "Applied when orientation is vertical\n",
+                        "value": "flex-direction: column;"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-text",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-text--vertical-alignment-top",
+                        "description": "Set verticalAlignment as top",
+                        "value": "display: flex;\n      align-items: flex-start;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-text--vertical-alignment-middle",
+                        "description": "Set verticalAlignment as middle",
+                        "value": "display: flex;\n      align-items: center;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-text--vertical-alignment-bottom",
+                        "description": "Set verticalAlignment as bottom",
+                        "value": "display: flex;\n      align-items: flex-end;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-text--horizontal-alignment-center",
+                        "description": "Set horizontalAlignment as center",
+                        "value": "text-align: center;\n      padding: 0 var(--ch5-text--padding);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-text--horizontal-alignment-left",
+                        "description": "Set horizontalAlignment as left",
+                        "value": "text-align: left;\n      padding-right: var(--ch5-text--padding);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-text--horizontal-alignment-right",
+                        "description": "Set horizontalAlignment as right",
+                        "value": "text-align: right;\n      padding-left: var(--ch5-text--padding);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-text",
+                        "description": "Main Class\n",
+                        "value": "position: relative;\n  min-width: 64px;\n  min-height: 44px;\n  width: var(--ch5-text--width);\n  height: var(--ch5-text--height);\n  overflow: hidden;\n  padding: var(--ch5-text--padding);\n  color: var(--ch5-text--font-color);\n  font-style: var(--ch5-text--font-style);\n  font-size: var(--ch5-text--font-size);\n  font-weight: var(--ch5-text--font-weight);\n  letter-spacing: var(--ch5-text--letter-spacing);\n  text-decoration: var(--ch5-text--text-decoration);\n  background-color: var(--ch5-text--background-color);\n  border-color: var(--ch5-text--border-color);\n  border-width: var(--ch5-text--border-width);\n  border-style: var(--ch5-text--border-style);\n  border-top-left-radius: var(--ch5-text--border-top-left-radius);\n  border-top-right-radius: var(--ch5-text--border-top-right-radius);\n  border-bottom-left-radius: var(--ch5-text--border-bottom-left-radius);\n  border-bottom-right-radius: var(--ch5-text--border-bottom-right-radius);\n\n  /// Applied for the span element\n  .ch5-text--span {\n    display: inline-block;\n    width: 100%;\n\n    /// Applied when truncateText='true'\n    &.ch5-text--truncate-text-true {\n      text-overflow: ellipsis; // enables ellipsis\n      white-space: nowrap; // keeps the text in a single line\n      overflow: hidden; // keeps the element from overflowing its parent */\n    }\n\n    /// Applied when truncateText='false'\n    &.ch5-text--truncate-text-false {\n      white-space: nowrap; // keeps the text in a single line\n      overflow: hidden; // keeps the element from overflowing its parent\n    }\n\n    /// Applied when multilineSupport='true'\n    &.ch5-text--multiline-support-true {\n      overflow: hidden;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 3; // start showing ellipsis when 3rd line is reached\n      white-space: pre-wrap !important; // let the text wrap preserving spaces\n      word-break: var(--ch5-text--word-break);\n    }\n\n    &.ch5-text--multiline-support-true.ch5-text--truncate-text-true {\n      display: -webkit-box;      \n    }\n    /// Applied when multilineSupport='false'\n    &.ch5-text--multiline-support-false {\n      white-space: nowrap; // keeps the text in a single line\n      overflow: hidden; // keeps the element from overflowing its parent\n    }\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-text--span",
+                        "description": "Applied for the span element\n",
+                        "value": "display: inline-block;\n    width: 100%;\n\n    /// Applied when truncateText='true'\n    &.ch5-text--truncate-text-true {\n      text-overflow: ellipsis; // enables ellipsis\n      white-space: nowrap; // keeps the text in a single line\n      overflow: hidden; // keeps the element from overflowing its parent */\n    }\n\n    /// Applied when truncateText='false'\n    &.ch5-text--truncate-text-false {\n      white-space: nowrap; // keeps the text in a single line\n      overflow: hidden; // keeps the element from overflowing its parent\n    }\n\n    /// Applied when multilineSupport='true'\n    &.ch5-text--multiline-support-true {\n      overflow: hidden;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 3; // start showing ellipsis when 3rd line is reached\n      white-space: pre-wrap !important; // let the text wrap preserving spaces\n      word-break: var(--ch5-text--word-break);\n    }\n\n    &.ch5-text--multiline-support-true.ch5-text--truncate-text-true {\n      display: -webkit-box;      \n    }\n    /// Applied when multilineSupport='false'\n    &.ch5-text--multiline-support-false {\n      white-space: nowrap; // keeps the text in a single line\n      overflow: hidden; // keeps the element from overflowing its parent\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-text--truncate-text-true",
+                        "description": "Applied when truncateText='true'\n",
+                        "value": "text-overflow: ellipsis; // enables ellipsis\n      white-space: nowrap; // keeps the text in a single line\n      overflow: hidden; // keeps the element from overflowing its parent */"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-text--truncate-text-false",
+                        "description": "Applied when truncateText='false'\n",
+                        "value": "white-space: nowrap; // keeps the text in a single line\n      overflow: hidden; // keeps the element from overflowing its parent"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-text--multiline-support-true",
+                        "description": "Applied when multilineSupport='true'\n",
+                        "value": "overflow: hidden;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 3; // start showing ellipsis when 3rd line is reached\n      white-space: pre-wrap !important; // let the text wrap preserving spaces\n      word-break: var(--ch5-text--word-break);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-text--multiline-support-false",
+                        "description": "Applied when multilineSupport='false'\n",
+                        "value": "white-space: nowrap; // keeps the text in a single line\n      overflow: hidden; // keeps the element from overflowing its parent"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-text--disabled",
+                        "description": "Applied when disabled='true'\n",
+                        "value": "@include ch5-component-disabled();"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-textinput",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-textinput--icon.ch5-textinput--icon-position-last",
+                        "description": "Applied on the icon when iconPosition attribute is set to 'last'\n",
+                        "value": "margin-right: 0;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-textinput--icon.ch5-textinput--icon-position-first",
+                        "description": "Applied on the icon when iconPosition attribute is set to 'first'\n",
+                        "value": "margin-left: 0;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-textinput",
+                        "description": "Main class\n",
+                        "value": "color: var(--ch5-textinput--mask-text-color);\n\n  /// Applied on the label\n  .ch5-textinput--label {\n    display: block;\n    color: var(--ch5-textinput--label-text-color);\n    width: 100%;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n\n  .ch5-textinput-container {\n    display: flex;\n    align-items: center;\n    border: var(--ch5-textinput--input-border-width) var(--ch5-textinput--input-border-style) var(--ch5-textinput--input-border-color);\n    border-radius: var(--ch5-textinput--input-border-radius);\n    height: 100%;\n    width: 100%;\n\n    /// Applied on the icon\n    .ch5-textinput--icon {\n      color: var(--ch5-textinput--icon-text-color);\n      margin-top: var(--ch5-textinput--margin-top);\n      margin-right: var(--ch5-textinput--margin-right);\n      margin-bottom: var(--ch5-textinput--margin-bottom);\n      margin-left: var(--ch5-textinput--margin-left);\n    }\n\n    >span {\n      display: flex;\n      position: relative;\n      align-items: center;\n      width: 100%;\n    }\n\n    /// Applied on the input\n    .ch5-textinput--input {\n      background: var(--ch5-textinput--input-background-color);\n      border: 0;\n      color: var(--ch5-textinput--input-text-color);\n      width: 100%;\n\n      /// Applied on the input when text-transform=\"none\"\n      &.ch5-textinput--text-transform-none {\n        text-transform: none;\n      }\n\n      /// Applied on the input when text-transform=\"capitalize\"\n      &.ch5-textinput--text-transform-capitalize {\n        text-transform: capitalize;\n      }\n\n      /// Applied on the input when text-transform=\"uppercase\"\n      &.ch5-textinput--text-transform-uppercase {\n        text-transform: uppercase;\n      }\n\n      /// Applied on the input when text-transform=\"lowercase\"\n      &.ch5-textinput--text-transform-lowercase {\n        text-transform: lowercase;\n      }\n    }\n\n    .ch5-textinput-mask {\n      width: 100%;\n      font-style: var(--ch5-textinput--regular-font-style);\n      position: absolute;\n      top: 0;\n      left: 0;\n      pointer-events: none;\n    }\n  }\n\n  /// Applied to main class when size=\"regular\"\n  &.ch5-textinput--size-regular {\n    width: var(--ch5-textinput--regular-width);\n\n    .ch5-textinput--label {\n      font-style: var(--ch5-textinput--regular-font-style);\n      font-size: var(--ch5-textinput--regular-font-size);\n      font-weight: var(--ch5-textinput--regular-font-weight);\n    }\n\n    .ch5-textinput-container {\n      .ch5-textinput--icon {\n        font-size: var(--ch5-textinput--regular-icon-font-size);\n        font-weight: var(--ch5-textinput--regular-icon-font-weight);\n      }\n\n      .ch5-textinput--input {\n        padding: var(--ch5-textinput--regular-input-padding);\n        font-style: var(--ch5-textinput--regular-font-style);\n        font-size: var(--ch5-textinput--regular-font-size);\n        font-weight: var(--ch5-textinput--regular-font-weight);\n        height: var(--ch5-textinput--regular-height);\n      }\n\n      .ch5-textinput-mask {\n        padding: 0 20px;\n        font-size: var(--ch5-textinput--regular-font-size);\n        font-weight: var(--ch5-textinput--regular-font-weight);\n      }\n\n      .ch5-textinput-mask--letter {\n        font-size: var(--ch5-textinput--regular-mask-font-size);\n      }\n    }\n  }\n\n  /// Applied to main class when size=\"x-small\"\n  &.ch5-textinput--size-x-small {\n    width: var(--ch5-textinput--x-small-width);\n\n    .ch5-textinput--label {\n      font-style: var(--ch5-textinput--x-small-font-style);\n      font-size: var(--ch5-textinput--x-small-font-size);\n      font-weight: var(--ch5-textinput--x-small-font-weight);\n    }\n\n    .ch5-textinput-container {\n      .ch5-textinput--icon {\n        font-size: var(--ch5-textinput--x-small-icon-font-size);\n        font-weight: var(--ch5-textinput--x-small-icon-font-weight);\n      }\n\n      .ch5-textinput--input {\n        padding: var(--ch5-textinput--x-small-input-padding);\n        font-style: var(--ch5-textinput--x-small-font-style);\n        font-size: var(--ch5-textinput--x-small-font-size);\n        font-weight: var(--ch5-textinput--x-small-font-weight);\n        height: var(--ch5-textinput--x-small-height);\n      }\n\n      .ch5-textinput-mask {\n        padding: 0 10px;\n        font-size: var(--ch5-textinput--x-small-font-size);\n        font-weight: var(--ch5-textinput--x-small-font-weight);\n      }\n\n      .ch5-textinput-mask--letter {\n        font-size: var(--ch5-textinput--x-small-mask-font-size);\n      }\n    }\n  }\n\n  /// Applied to main class when size=\"small\"\n  &.ch5-textinput--size-small {\n    width: var(--ch5-textinput--small-width);\n\n    .ch5-textinput--label {\n      font-style: var(--ch5-textinput--small-font-style);\n      font-size: var(--ch5-textinput--small-font-size);\n      font-weight: var(--ch5-textinput--small-font-weight);\n    }\n\n    .ch5-textinput-container {\n      .ch5-textinput--icon {\n        font-size: var(--ch5-textinput--small-icon-font-size);\n        font-weight: var(--ch5-textinput--small-icon-font-weight);\n      }\n\n      .ch5-textinput--input {\n        padding: var(--ch5-textinput--small-input-padding);\n        font-style: var(--ch5-textinput--small-font-style);\n        font-size: var(--ch5-textinput--small-font-size);\n        font-weight: var(--ch5-textinput--small-font-weight);\n        height: var(--ch5-textinput--small-height);\n      }\n\n      .ch5-textinput-mask {\n        padding: 0 15px;\n        font-size: var(--ch5-textinput--small-font-size);\n        font-weight: var(--ch5-textinput--small-font-weight);\n      }\n\n      .ch5-textinput-mask--letter {\n        font-size: var(--ch5-textinput--small-mask-font-size);\n      }\n    }\n  }\n\n  /// Applied to main class when size=\"large\"\n  &.ch5-textinput--size-large {\n    width: var(--ch5-textinput--large-width);\n\n    .ch5-textinput--label {\n      font-style: var(--ch5-textinput--large-font-style);\n      font-size: var(--ch5-textinput--large-font-size);\n      font-weight: var(--ch5-textinput--large-font-weight);\n    }\n\n    .ch5-textinput-container {\n      .ch5-textinput--icon {\n        font-size: var(--ch5-textinput--large-icon-font-size);\n        font-weight: var(--ch5-textinput--large-icon-font-weight);\n      }\n\n      .ch5-textinput--input {\n        padding: var(--ch5-textinput--large-input-padding);\n        font-style: var(--ch5-textinput--large-font-style);\n        font-size: var(--ch5-textinput--large-font-size);\n        font-weight: var(--ch5-textinput--large-font-weight);\n        height: var(--ch5-textinput--large-height);\n      }\n\n      .ch5-textinput-mask {\n        padding: 0 20px;\n        font-size: var(--ch5-textinput--large-font-size);\n        font-weight: var(--ch5-textinput--large-font-weight);\n      }\n\n      .ch5-textinput-mask--letter {\n        font-size: var(--ch5-textinput--large-mask-font-size);\n      }\n    }\n  }\n\n  /// Applied to main class when size=\"x-large\"\n  &.ch5-textinput--size-x-large {\n    width: var(--ch5-textinput--x-large-width);\n\n    .ch5-textinput--label {\n      font-style: var(--ch5-textinput--x-large-font-style);\n      font-size: var(--ch5-textinput--x-large-font-size);\n      font-weight: var(--ch5-textinput--x-large-font-weight);\n    }\n\n    .ch5-textinput-container {\n      .ch5-textinput--icon {\n        font-size: var(--ch5-textinput--x-large-icon-font-size);\n        font-weight: var(--ch5-textinput--x-large-icon-font-weight);\n      }\n\n      .ch5-textinput--input {\n        padding: var(--ch5-textinput--x-large-input-padding);\n        font-style: var(--ch5-textinput--x-large-font-style);\n        font-size: var(--ch5-textinput--x-large-font-size);\n        font-weight: var(--ch5-textinput--x-large-font-weight);\n        height: var(--ch5-textinput--x-large-height);\n      }\n\n      .ch5-textinput-mask {\n        padding: 0 22px;\n        font-size: var(--ch5-textinput--x-large-font-size);\n        font-weight: var(--ch5-textinput--x-large-font-weight);\n      }\n\n      .ch5-textinput-mask--letter {\n        font-size: var(--ch5-textinput--x-large-mask-font-size);\n      }\n    }\n  }\n\n  &[stretch=\"content\"] {\n    height: 100%;\n    width: 100%;\n\n    .ch5-textinput-container {\n      height: 100%;\n      width: 100%;\n\n      .ch5-textinput--input {\n        height: 100%;\n      }\n    }\n  }\n\n  &[stretch=\"width\"] {\n    width: 100%;\n\n    .ch5-textinput-container {\n      width: 100%;\n    }\n  }\n\n  &[stretch=\"fixed\"] {\n    width: 400px;\n\n    .ch5-textinput-container {\n      width: 100%;\n    }\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-textinput--label",
+                        "description": "Applied on the label\n",
+                        "value": "display: block;\n    color: var(--ch5-textinput--label-text-color);\n    width: 100%;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-textinput--icon",
+                        "description": "Applied on the icon\n",
+                        "value": "color: var(--ch5-textinput--icon-text-color);\n      margin-top: var(--ch5-textinput--margin-top);\n      margin-right: var(--ch5-textinput--margin-right);\n      margin-bottom: var(--ch5-textinput--margin-bottom);\n      margin-left: var(--ch5-textinput--margin-left);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-textinput--input",
+                        "description": "Applied on the input\n",
+                        "value": "background: var(--ch5-textinput--input-background-color);\n      border: 0;\n      color: var(--ch5-textinput--input-text-color);\n      width: 100%;\n\n      /// Applied on the input when text-transform=\"none\"\n      &.ch5-textinput--text-transform-none {\n        text-transform: none;\n      }\n\n      /// Applied on the input when text-transform=\"capitalize\"\n      &.ch5-textinput--text-transform-capitalize {\n        text-transform: capitalize;\n      }\n\n      /// Applied on the input when text-transform=\"uppercase\"\n      &.ch5-textinput--text-transform-uppercase {\n        text-transform: uppercase;\n      }\n\n      /// Applied on the input when text-transform=\"lowercase\"\n      &.ch5-textinput--text-transform-lowercase {\n        text-transform: lowercase;\n      }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-textinput--text-transform-none",
+                        "description": "Applied on the input when text-transform=\"none\"\n",
+                        "value": "text-transform: none;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-textinput--text-transform-capitalize",
+                        "description": "Applied on the input when text-transform=\"capitalize\"\n",
+                        "value": "text-transform: capitalize;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-textinput--text-transform-uppercase",
+                        "description": "Applied on the input when text-transform=\"uppercase\"\n",
+                        "value": "text-transform: uppercase;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-textinput--text-transform-lowercase",
+                        "description": "Applied on the input when text-transform=\"lowercase\"\n",
+                        "value": "text-transform: lowercase;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-textinput--size-regular",
+                        "description": "Applied to main class when size=\"regular\"\n",
+                        "value": "width: var(--ch5-textinput--regular-width);\n\n    .ch5-textinput--label {\n      font-style: var(--ch5-textinput--regular-font-style);\n      font-size: var(--ch5-textinput--regular-font-size);\n      font-weight: var(--ch5-textinput--regular-font-weight);\n    }\n\n    .ch5-textinput-container {\n      .ch5-textinput--icon {\n        font-size: var(--ch5-textinput--regular-icon-font-size);\n        font-weight: var(--ch5-textinput--regular-icon-font-weight);\n      }\n\n      .ch5-textinput--input {\n        padding: var(--ch5-textinput--regular-input-padding);\n        font-style: var(--ch5-textinput--regular-font-style);\n        font-size: var(--ch5-textinput--regular-font-size);\n        font-weight: var(--ch5-textinput--regular-font-weight);\n        height: var(--ch5-textinput--regular-height);\n      }\n\n      .ch5-textinput-mask {\n        padding: 0 20px;\n        font-size: var(--ch5-textinput--regular-font-size);\n        font-weight: var(--ch5-textinput--regular-font-weight);\n      }\n\n      .ch5-textinput-mask--letter {\n        font-size: var(--ch5-textinput--regular-mask-font-size);\n      }\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-textinput--size-x-small",
+                        "description": "Applied to main class when size=\"x-small\"\n",
+                        "value": "width: var(--ch5-textinput--x-small-width);\n\n    .ch5-textinput--label {\n      font-style: var(--ch5-textinput--x-small-font-style);\n      font-size: var(--ch5-textinput--x-small-font-size);\n      font-weight: var(--ch5-textinput--x-small-font-weight);\n    }\n\n    .ch5-textinput-container {\n      .ch5-textinput--icon {\n        font-size: var(--ch5-textinput--x-small-icon-font-size);\n        font-weight: var(--ch5-textinput--x-small-icon-font-weight);\n      }\n\n      .ch5-textinput--input {\n        padding: var(--ch5-textinput--x-small-input-padding);\n        font-style: var(--ch5-textinput--x-small-font-style);\n        font-size: var(--ch5-textinput--x-small-font-size);\n        font-weight: var(--ch5-textinput--x-small-font-weight);\n        height: var(--ch5-textinput--x-small-height);\n      }\n\n      .ch5-textinput-mask {\n        padding: 0 10px;\n        font-size: var(--ch5-textinput--x-small-font-size);\n        font-weight: var(--ch5-textinput--x-small-font-weight);\n      }\n\n      .ch5-textinput-mask--letter {\n        font-size: var(--ch5-textinput--x-small-mask-font-size);\n      }\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-textinput--size-small",
+                        "description": "Applied to main class when size=\"small\"\n",
+                        "value": "width: var(--ch5-textinput--small-width);\n\n    .ch5-textinput--label {\n      font-style: var(--ch5-textinput--small-font-style);\n      font-size: var(--ch5-textinput--small-font-size);\n      font-weight: var(--ch5-textinput--small-font-weight);\n    }\n\n    .ch5-textinput-container {\n      .ch5-textinput--icon {\n        font-size: var(--ch5-textinput--small-icon-font-size);\n        font-weight: var(--ch5-textinput--small-icon-font-weight);\n      }\n\n      .ch5-textinput--input {\n        padding: var(--ch5-textinput--small-input-padding);\n        font-style: var(--ch5-textinput--small-font-style);\n        font-size: var(--ch5-textinput--small-font-size);\n        font-weight: var(--ch5-textinput--small-font-weight);\n        height: var(--ch5-textinput--small-height);\n      }\n\n      .ch5-textinput-mask {\n        padding: 0 15px;\n        font-size: var(--ch5-textinput--small-font-size);\n        font-weight: var(--ch5-textinput--small-font-weight);\n      }\n\n      .ch5-textinput-mask--letter {\n        font-size: var(--ch5-textinput--small-mask-font-size);\n      }\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-textinput--size-large",
+                        "description": "Applied to main class when size=\"large\"\n",
+                        "value": "width: var(--ch5-textinput--large-width);\n\n    .ch5-textinput--label {\n      font-style: var(--ch5-textinput--large-font-style);\n      font-size: var(--ch5-textinput--large-font-size);\n      font-weight: var(--ch5-textinput--large-font-weight);\n    }\n\n    .ch5-textinput-container {\n      .ch5-textinput--icon {\n        font-size: var(--ch5-textinput--large-icon-font-size);\n        font-weight: var(--ch5-textinput--large-icon-font-weight);\n      }\n\n      .ch5-textinput--input {\n        padding: var(--ch5-textinput--large-input-padding);\n        font-style: var(--ch5-textinput--large-font-style);\n        font-size: var(--ch5-textinput--large-font-size);\n        font-weight: var(--ch5-textinput--large-font-weight);\n        height: var(--ch5-textinput--large-height);\n      }\n\n      .ch5-textinput-mask {\n        padding: 0 20px;\n        font-size: var(--ch5-textinput--large-font-size);\n        font-weight: var(--ch5-textinput--large-font-weight);\n      }\n\n      .ch5-textinput-mask--letter {\n        font-size: var(--ch5-textinput--large-mask-font-size);\n      }\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-textinput--size-x-large",
+                        "description": "Applied to main class when size=\"x-large\"\n",
+                        "value": "width: var(--ch5-textinput--x-large-width);\n\n    .ch5-textinput--label {\n      font-style: var(--ch5-textinput--x-large-font-style);\n      font-size: var(--ch5-textinput--x-large-font-size);\n      font-weight: var(--ch5-textinput--x-large-font-weight);\n    }\n\n    .ch5-textinput-container {\n      .ch5-textinput--icon {\n        font-size: var(--ch5-textinput--x-large-icon-font-size);\n        font-weight: var(--ch5-textinput--x-large-icon-font-weight);\n      }\n\n      .ch5-textinput--input {\n        padding: var(--ch5-textinput--x-large-input-padding);\n        font-style: var(--ch5-textinput--x-large-font-style);\n        font-size: var(--ch5-textinput--x-large-font-size);\n        font-weight: var(--ch5-textinput--x-large-font-weight);\n        height: var(--ch5-textinput--x-large-height);\n      }\n\n      .ch5-textinput-mask {\n        padding: 0 22px;\n        font-size: var(--ch5-textinput--x-large-font-size);\n        font-weight: var(--ch5-textinput--x-large-font-weight);\n      }\n\n      .ch5-textinput-mask--letter {\n        font-size: var(--ch5-textinput--x-large-mask-font-size);\n      }\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-textinput--disabled",
+                        "description": "Added automatically based on the disabled attribute or by receiveStateEnable\n",
+                        "value": "@include ch5-component-disabled();"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-toggle",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-toggle",
+                        "description": "This class is set on the container div for ch5-toggle\n",
+                        "value": "position: relative;\n  display: inline-block;\n  box-sizing: border-box;\n  z-index: 1;\n\n  &[hidden] {\n    display: none;\n  }\n\n  div {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  /* ch5-toggle - label */\n  /// Applied on label\n  .ch5-toggle__label {\n    display: inline-flex;\n    vertical-align: middle;\n    font-style: var(--ch5-toggle--label-font-style);\n    font-size: var(--ch5-toggle--label-font-size);\n    font-weight: var(--ch5-toggle--label-font-weight);\n    color: var(--ch5-toggle--label-font-color);\n    // margin: var(--ch5-toggle--label-margin);\n    margin-top: var(--ch5-toggle--label-margin-top);\n    margin-left: var(--ch5-toggle--label-margin-left);\n    margin-bottom: var(--ch5-toggle--label-margin-bottom);\n    margin-right: var(--ch5-toggle--label-margin-right);\n\n    &[hidden] {\n      display: none;\n    }\n  }\n\n  .ch5-toggle__on-label,\n  .ch5-toggle__off-label {\n    word-wrap: normal;\n  }\n\n  .ch5-toggle__on-label {\n    color: var(--ch5-toggle--on-text-font-color);\n    font-style: var(--ch5-toggle--on-text-font-style);\n    font-weight: var(--ch5-toggle--on-text-font-weight);\n  }\n\n  .ch5-toggle__off-label {\n    color: var(--ch5-toggle--off-text-font-color);\n    font-style: var(--ch5-toggle--off-text-font-style);\n    font-weight: var(--ch5-toggle--off-text-font-weight);\n  }\n\n  /// Applied for on label\n  .ch5-toggle__on-label,\n  /// Applied for off label\n  .ch5-toggle__off-label {\n    margin: 0 2px 0 2px;\n  }\n\n\n  /// Applied for icon-on\n  .ch5-toggle__on-icon {\n    margin-top: var(--ch5-toggle--icon-on-margin-top);\n    margin-bottom: var(--ch5-toggle--icon-on-margin-bottom);\n    margin-left: var(--ch5-toggle--icon-on-margin-left);\n    margin-right: var(--ch5-toggle--icon-on-margin-right);\n    font-weight: var(--ch5-toggle--icon-on-font-weight);\n    color: var(--ch5-toggle--icon-on-font-color);\n  }\n\n  /// Applied for icon-off\n  .ch5-toggle__off-icon {\n    margin-top: var(--ch5-toggle--icon-off-margin-top);\n    margin-bottom: var(--ch5-toggle--icon-off-margin-bottom);\n    margin-left: var(--ch5-toggle--icon-off-margin-left);\n    margin-right: var(--ch5-toggle--icon-off-margin-right);\n    font-weight: var(--ch5-toggle--icon-off-font-weight);\n    color: var(--ch5-toggle--icon-off-font-color);\n  }\n\n  /* ch5-toggle - handle default */\n  /// Applied on the handle\n  .ch5-toggle__handle {\n    position: relative;\n    overflow: hidden;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 80px;\n    padding: 0;\n    transition: all 0.4s ease-out;\n    aspect-ratio: 3/1;\n\n    /* ch5-toggle - on/off container */\n    div {\n      position: relative;\n      z-index: 3;\n      line-height: 2em;\n      text-align: center;\n      user-select: none;\n      opacity: 0;\n      height: 100%;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n\n      &:first-of-type {\n        opacity: 1;\n      }\n    }\n\n    /* ch5-toggle - knob */\n    a {\n      position: absolute;\n      right: 50%;\n      top: 0;\n      z-index: 2;\n      display: block;\n      width: 50%;\n      height: 100%;\n      padding: 0;\n      transition: all 0.2s ease-out;\n    }\n  }\n\n  /* ch5-toggle - circle shape */\n  &.ch5-toggle--circle {\n    .ch5-toggle__handle {\n      border-radius: 1.75em;\n      background-color: var(--ch5-toggle--circle-background-color);\n      margin: var(--ch5-toggle--handle-circle-margin);\n\n      div {\n        width: 100%;\n        transition: all 0.2s ease-out;\n\n        &:first-of-type {\n          text-align: center;\n          padding-left: 1.75em;\n        }\n\n        &:last-of-type {\n          display: none;\n          text-align: center;\n          padding-right: 1.75em;\n        }\n      }\n\n      a {\n        left: 0;\n        top: 0;\n        width: 33%;\n        border-radius: 100%;\n        background-color: var(--ch5-toggle--circle-knob-background-color);\n        border-width: var(--ch5-toggle--circle-handle-border-width);\n        border-style: var(--ch5-toggle--circle-handle-border-style);\n        border-color: var(--ch5-toggle--circle-handle-off-border-color);\n      }\n    }\n  }\n\n  /* ch5-toggle - rectangle shape */\n  &.ch5-toggle--rectangle {\n    .ch5-toggle__handle {\n      background: var(--ch5-toggle--rectangle-background-color);\n      border-radius: 1px;\n      box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0;\n      margin: var(--ch5-toggle--handle-rectangle-margin);\n\n      div {\n        display: inline-flex;\n        width: 50%;\n        transition: all 0.1s;\n      }\n\n      a {\n        border-radius: 1px;\n        background-color: var(--ch5-toggle--rectangle-handle-off-background-color);\n      }\n    }\n  }\n\n  /* ch5-toggle - checked/on */\n  /// Applied when value is true\n  &.ch5-toggle--on {\n    .ch5-toggle__handle {\n      a {\n        right: 0%;\n      }\n\n      div:first-of-type {\n        opacity: 0;\n      }\n\n      div:last-of-type {\n        opacity: 1;\n      }\n    }\n\n    /* ch5-toggle - circle shape checked/on */\n    /// Class applied when shape='circle'\n    &.ch5-toggle--circle {\n      .ch5-toggle__handle {\n        // box-shadow: inset 0 0 0 30px var(--ch5-toggle-handle-checked-color;\n        background-color: var(--ch5-toggle--circle-handle-on-background-color);\n        transition: background-color 0.3s linear;\n\n        div:first-of-type {\n          display: none;\n        }\n\n        div:last-of-type {\n          display: flex;\n        }\n\n        a {\n          left: 100%;\n          margin-left: -33%;\n          background-color: var(--ch5-toggle--circle-knob-background-color);\n          border-color: var(--ch5-toggle--circle-handle-on-border-color);\n        }\n      }\n    }\n\n    /* ch5-toggle - rectangle shape checked/on */\n    /// Class applied when shape='rectangle'\n    &.ch5-toggle--rectangle {\n      .ch5-toggle__handle {\n        div {\n          right: 0;\n        }\n\n        a {\n          background-color: var(--ch5-toggle--rectangle-handle-on-background-color);\n        }\n      }\n    }\n  }\n\n  /// Class applied when orientation='horizontal'\n  &.ch5-toggle--horizontal {\n    // Placeholder\n  }\n\n  /// Class applied when orientation='vertical'\n  &.ch5-toggle--vertical {\n    >div {\n      padding: 50% 0;\n      height: 0;\n      -webkit-transform: rotate(90deg);\n      transform: rotate(90deg);\n    }\n  }\n\n  // 'rtl' support\n  &.ch5-toggle--dir--rtl {\n    .ch5-toggle__handle a {\n      left: 50%;\n      right: auto;\n    }\n\n    &.ch5-toggle--circle .ch5-toggle__handle div:first-of-type {\n      padding-left: 0;\n      padding-right: 1.75em;\n    }\n\n    &.ch5-toggle--circle .ch5-toggle__handle div:last-of-type {\n      padding-right: 0;\n      padding-left: 1.75em;\n    }\n\n    &.ch5-toggle--circle .ch5-toggle__handle a {\n      right: auto;\n      left: 100%;\n      margin-left: -33%;\n    }\n\n    &.ch5-toggle--on {\n      .ch5-toggle__handle a {\n        left: 0;\n        right: auto;\n      }\n    }\n\n    &.ch5-toggle--on.ch5-toggle--circle {\n      .ch5-toggle__handle a {\n        left: 33%;\n      }\n    }\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-toggle__label",
+                        "description": "Applied on label\n",
+                        "value": "display: inline-flex;\n    vertical-align: middle;\n    font-style: var(--ch5-toggle--label-font-style);\n    font-size: var(--ch5-toggle--label-font-size);\n    font-weight: var(--ch5-toggle--label-font-weight);\n    color: var(--ch5-toggle--label-font-color);\n    // margin: var(--ch5-toggle--label-margin);\n    margin-top: var(--ch5-toggle--label-margin-top);\n    margin-left: var(--ch5-toggle--label-margin-left);\n    margin-bottom: var(--ch5-toggle--label-margin-bottom);\n    margin-right: var(--ch5-toggle--label-margin-right);\n\n    &[hidden] {\n      display: none;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-toggle__on-label,\n",
+                        "description": "Applied for on label\n",
+                        "value": "margin: 0 2px 0 2px;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-toggle__off-label",
+                        "description": "Applied for off label\n",
+                        "value": "margin: 0 2px 0 2px;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-toggle__on-icon",
+                        "description": "Applied for icon-on\n",
+                        "value": "margin-top: var(--ch5-toggle--icon-on-margin-top);\n    margin-bottom: var(--ch5-toggle--icon-on-margin-bottom);\n    margin-left: var(--ch5-toggle--icon-on-margin-left);\n    margin-right: var(--ch5-toggle--icon-on-margin-right);\n    font-weight: var(--ch5-toggle--icon-on-font-weight);\n    color: var(--ch5-toggle--icon-on-font-color);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-toggle__off-icon",
+                        "description": "Applied for icon-off\n",
+                        "value": "margin-top: var(--ch5-toggle--icon-off-margin-top);\n    margin-bottom: var(--ch5-toggle--icon-off-margin-bottom);\n    margin-left: var(--ch5-toggle--icon-off-margin-left);\n    margin-right: var(--ch5-toggle--icon-off-margin-right);\n    font-weight: var(--ch5-toggle--icon-off-font-weight);\n    color: var(--ch5-toggle--icon-off-font-color);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-toggle__handle",
+                        "description": "Applied on the handle\n",
+                        "value": "position: relative;\n    overflow: hidden;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 80px;\n    padding: 0;\n    transition: all 0.4s ease-out;\n    aspect-ratio: 3/1;\n\n    /* ch5-toggle - on/off container */\n    div {\n      position: relative;\n      z-index: 3;\n      line-height: 2em;\n      text-align: center;\n      user-select: none;\n      opacity: 0;\n      height: 100%;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n\n      &:first-of-type {\n        opacity: 1;\n      }\n    }\n\n    /* ch5-toggle - knob */\n    a {\n      position: absolute;\n      right: 50%;\n      top: 0;\n      z-index: 2;\n      display: block;\n      width: 50%;\n      height: 100%;\n      padding: 0;\n      transition: all 0.2s ease-out;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-toggle--on",
+                        "description": "Applied when value is true\n",
+                        "value": ".ch5-toggle__handle {\n      a {\n        right: 0%;\n      }\n\n      div:first-of-type {\n        opacity: 0;\n      }\n\n      div:last-of-type {\n        opacity: 1;\n      }\n    }\n\n    /* ch5-toggle - circle shape checked/on */\n    /// Class applied when shape='circle'\n    &.ch5-toggle--circle {\n      .ch5-toggle__handle {\n        // box-shadow: inset 0 0 0 30px var(--ch5-toggle-handle-checked-color;\n        background-color: var(--ch5-toggle--circle-handle-on-background-color);\n        transition: background-color 0.3s linear;\n\n        div:first-of-type {\n          display: none;\n        }\n\n        div:last-of-type {\n          display: flex;\n        }\n\n        a {\n          left: 100%;\n          margin-left: -33%;\n          background-color: var(--ch5-toggle--circle-knob-background-color);\n          border-color: var(--ch5-toggle--circle-handle-on-border-color);\n        }\n      }\n    }\n\n    /* ch5-toggle - rectangle shape checked/on */\n    /// Class applied when shape='rectangle'\n    &.ch5-toggle--rectangle {\n      .ch5-toggle__handle {\n        div {\n          right: 0;\n        }\n\n        a {\n          background-color: var(--ch5-toggle--rectangle-handle-on-background-color);\n        }\n      }\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-toggle--circle",
+                        "description": "Class applied when shape='circle'\n",
+                        "value": ".ch5-toggle__handle {\n        // box-shadow: inset 0 0 0 30px var(--ch5-toggle-handle-checked-color;\n        background-color: var(--ch5-toggle--circle-handle-on-background-color);\n        transition: background-color 0.3s linear;\n\n        div:first-of-type {\n          display: none;\n        }\n\n        div:last-of-type {\n          display: flex;\n        }\n\n        a {\n          left: 100%;\n          margin-left: -33%;\n          background-color: var(--ch5-toggle--circle-knob-background-color);\n          border-color: var(--ch5-toggle--circle-handle-on-border-color);\n        }\n      }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-toggle--rectangle",
+                        "description": "Class applied when shape='rectangle'\n",
+                        "value": ".ch5-toggle__handle {\n        div {\n          right: 0;\n        }\n\n        a {\n          background-color: var(--ch5-toggle--rectangle-handle-on-background-color);\n        }\n      }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-toggle--horizontal",
+                        "description": "Class applied when orientation='horizontal'\n",
+                        "value": "// Placeholder"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-toggle--vertical",
+                        "description": "Class applied when orientation='vertical'\n",
+                        "value": ">div {\n      padding: 50% 0;\n      height: 0;\n      -webkit-transform: rotate(90deg);\n      transform: rotate(90deg);\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-toggle--disabled",
+                        "description": "Applied when toggle is disabled\n",
+                        "value": "@include ch5-component-disabled();"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-toggle__handle--size-regular",
+                        "description": "Applied when size='regular'\n",
+                        "value": "width: var(--ch5-toggle--handle-size-regular);\n\n    .ch5-toggle__off-label,\n    .ch5-toggle__on-label {\n      display: table-cell;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n\n    .ch5-toggle__on-label {\n      font-size: var(--ch5-toggle--on-label-regular-font-size);\n    }\n\n    .ch5-toggle__off-label {\n      font-size: var(--ch5-toggle--off-label-regular-font-size);\n    }\n\n    .ch5-toggle__on-icon{\n      font-size: var(--ch5-toggle--on-regular-icon-size);\n    }\n\n    .ch5-toggle__off-icon{\n      font-size: var(--ch5-toggle--off-regular-icon-size);\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-toggle__handle--size-x-small",
+                        "description": "Applied when size='x-small'\n",
+                        "value": "min-width: 80px;\n    width: var(--ch5-toggle--handle-size-x-small);\n\n    /* height: 16.66px; */\n    .ch5-toggle__off-label,\n    .ch5-toggle__on-label {      \n      display: table-cell;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n\n    .ch5-toggle__on-label {\n      font-size: var(--ch5-toggle--on-label-x-small-font-size);\n    }\n\n    .ch5-toggle__off-label {\n      font-size: var(--ch5-toggle--off-label-x-small-font-size);\n    }\n\n    .ch5-toggle__on-icon{\n      font-size: var(--ch5-toggle--on-x-small-icon-size);\n    }\n\n    .ch5-toggle__off-icon{\n      font-size: var(--ch5-toggle--off-x-small-icon-size);\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-toggle__handle--size-small",
+                        "description": "Applied when size='small'\n",
+                        "value": "width: var(--ch5-toggle--handle-size-small);\n\n    /*  height: 25px; */\n    .ch5-toggle__off-label,\n    .ch5-toggle__on-label {\n      display: table-cell;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n\n    .ch5-toggle__on-label {\n      font-size: var(--ch5-toggle--on-label-small-font-size);\n    }\n\n    .ch5-toggle__off-label {\n      font-size: var(--ch5-toggle--off-label-small-font-size);\n    }\n\n    .ch5-toggle__on-icon{\n      font-size: var(--ch5-toggle--on-small-icon-size);\n    }\n\n    .ch5-toggle__off-icon{\n      font-size: var(--ch5-toggle--off-small-icon-size);\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-toggle__handle--size-large",
+                        "description": "Applied when size='large'\n",
+                        "value": "width: var(--ch5-toggle--handle-size-large);\n\n    /*  height: 41.66px; */\n    .ch5-toggle__off-label,\n    .ch5-toggle__on-label {\n      display: table-cell;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n\n    .ch5-toggle__on-label {\n      font-size: var(--ch5-toggle--on-label-large-font-size);\n    }\n\n    .ch5-toggle__off-label {\n      font-size: var(--ch5-toggle--off-label-large-font-size);\n    }\n\n    .ch5-toggle__on-icon{\n      font-size: var(--ch5-toggle--on-large-icon-size);\n    }\n\n    .ch5-toggle__off-icon{\n      font-size: var(--ch5-toggle--off-large-icon-size);\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-toggle__handle--size-x-large",
+                        "description": "Applied when size='x-large'\n",
+                        "value": "width: var(--ch5-toggle--handle-size-x-large);\n\n    /*   height: 50px; */\n    .ch5-toggle__off-label,\n    .ch5-toggle__on-label {\n      display: table-cell;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n\n    .ch5-toggle__on-label {\n      font-size: var(--ch5-toggle--on-label-x-large-font-size);\n    }\n\n    .ch5-toggle__off-label {\n      font-size: var(--ch5-toggle--off-label-x-large-font-size);\n    }\n\n    .ch5-toggle__on-icon{\n      font-size: var(--ch5-toggle--on-x-large-icon-size);\n    }\n\n    .ch5-toggle__off-icon{\n      font-size: var(--ch5-toggle--off-x-large-icon-size);\n    }"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-triggerview",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-triggerview",
+                        "description": "The class added on the component\n",
+                        "value": "font-size: var(--ch5-triggerview--font-size);\n  font-style: var(--ch5-triggerview--font-style);\n  font-weight: var(--ch5-triggerview--font-weight);\n  .swiper-container,\n  .swiper {\n    width: 100%;\n    height: 100%;\n  }\n  .swiper-wrapper {\n    position: relative;\n    z-index: 1;\n    display: inline-flex;\n    -webkit-transition-property: -webkit-transform;\n    transition-property: -webkit-transform;\n    -o-transition-property: transform;\n    transition-property: transform;\n    transition-property: transform, -webkit-transform;\n    -webkit-box-sizing: content-box;\n    box-sizing: content-box;\n    transition-timing-function: ease-out;\n  }\n  .slider-full-width-page {\n    width: 100%;\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-viewchild",
+                        "description": "The class added on the triggeview child component\n",
+                        "value": "box-sizing: border-box;"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-video",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-video--aspect-ratio-16-9",
+                        "description": "Aspect Ratio 16:9\n",
+                        "value": "aspect-ratio: 16/9;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video--aspect-ratio-4-3",
+                        "description": "Aspect Ratio 4:3\n",
+                        "value": "aspect-ratio: 4/3;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video--size-xx-large",
+                        "description": "size=xx-large\n",
+                        "value": "width: var(--ch5-video--size-xx-large-min-w-651);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video--size-x-large",
+                        "description": "size=x-large\n",
+                        "value": "width: var(--ch5-video--size-x-large-min-w-651);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video--size-large",
+                        "description": "size=large\n",
+                        "value": "width: var(--ch5-video--size-large-min-w-651);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video--size-regular",
+                        "description": "size=regular\n",
+                        "value": "width: var(--ch5-video--size-regular-min-w-651);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video--size-small",
+                        "description": "size=small\n",
+                        "value": "width: var(--ch5-video--size-small-min-w-651);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video--size-x-small",
+                        "description": "size=x-small\n",
+                        "value": "width: var(--ch5-video--size-x-small-min-w-651);"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video--stretch-true",
+                        "description": "stretch true\n",
+                        "value": "width: 100%;\n    height: 100%;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video",
+                        "description": "Main class\n",
+                        "value": "display: inline-block;\n  position: relative;\n  overflow: hidden;\n  background: var(--ch5-video--background-color);\n\n  img {\n    height: 100%;\n    width: 100%;\n  }\n\n  img.hide {\n    display: none;\n  }\n\n  .full-screen-icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    right: 5px;\n    top: 5px;\n    padding: 2px;\n    opacity: 1;\n    border-radius: 100%;\n    background-color: var(--ch5-video--full-screen-icon-background-color);\n    transition: opacity 0.2s ease-in;\n\n    &.hide {\n      opacity: 0 !important;\n      pointer-events: none !important;\n    }\n\n    .svgIconStyle {\n      padding: 2px;\n      width: var(--ch5-video--full-screen-icon-size);\n      height: var(--ch5-video--full-screen-icon-size);\n      fill: var(--ch5-video--full-screen-icon-fill-color);\n    }\n\n    &:hover {\n      text-decoration: none;\n    }\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video--disabled",
+                        "description": "Video disabled class\n",
+                        "value": "@include ch5-component-disabled();"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-video-switcher",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-video-switcher",
+                        "description": "Class to set the container properties of ch5-video-switcher\n",
+                        "value": "width: var(--ch5-video-switcher--width);\n  min-width: 240px;\n  min-height: 200px;\n  aspect-ratio: 9/6;\n\n  display: flex;\n  overflow: hidden;\n  gap: var(--ch5-video-switcher--scrollbar-width);\n  background-color: var(--ch5-video-switcher--background-color);\n  scrollbar-width: none; // needed to hide the firefox scrollbar\n  position: relative;\n  border-radius: var(--ch5-video-switcher--border-radius);\n  border-width: var(--ch5-video-switcher--border-width);\n  border-style: var(--ch5-video-switcher--border-style);\n  border-color: var(--ch5-video-switcher--border-color);\n\n  &.ch5-video-switcher::-webkit-scrollbar {\n    height: 0;\n    width: 0;\n  }\n\n  // This is for source-list only\n  .scrollbar-container {\n    position: absolute;\n    background-color: var(--ch5-video-switcher--scrollbar-track-color);\n    border-radius: var(--ch5-video-switcher--scrollbar-border-radius);\n\n    .scrollbar {\n      position: absolute;\n      will-change: width, transform;\n      border-radius: var(--ch5-video-switcher--scrollbar-border-radius);\n      background: var(--ch5-video-switcher--scrollbar-thumb-color);\n    }\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video-switcher--disabled",
+                        "description": "Applied when the video switcher is disabled\n",
+                        "value": "@include ch5-component-disabled();"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video-switcher--screen-list-display-screen-label-true",
+                        "description": "Applied when display screen label  is set to true",
+                        "value": ".ch5-video-switcher--screen-list-label {\n      display: block;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video-switcher--screen-list-display-screen-label-false",
+                        "description": "Applied when display screen label  is set to false",
+                        "value": ".ch5-video-switcher--screen-list-label {\n      display: none;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video-switcher--screen-list",
+                        "description": "Applied to the list of screens",
+                        "value": "display: grid;\n    grid-gap: 2px; // Do not allow access as a variable\n    overflow: hidden;\n    align-items: center;\n    justify-content: center;\n\n    .screen-container {\n      border-radius: var(--ch5-video-switcher--screen-container-border-radius);\n      border-width: var(--ch5-video-switcher--screen-container-border-width);\n      border-style: var(--ch5-video-switcher--screen-container-border-style);\n      border-color: var(--ch5-video-switcher--screen-container-border-color);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: flex-start;\n      background-color: var(--ch5-video-switcher--screen-container-background-color);\n      position: relative;\n      padding: var(--ch5-video-switcher--screen-item-padding);\n      overflow: hidden;\n\n      .source-onscreen {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        flex-direction: column;\n        width: 100% !important; // TODO - remove important after fixing in crcomlib\n        height: 100% !important; // Checking for above\n\n        .source-icon-url {\n          background-repeat: no-repeat;\n          background-size: contain;\n          background-position: center;\n        }\n\n        .source-icon {\n          font-size: calc(1em - var(--ch5-video-switcher--screen-item-padding));\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          color: var(--ch5-video-switcher--source-list-icon-color);\n\n          &.sg {\n            background-position: 50%;\n            background-repeat: no-repeat;\n            background-size: contain;\n            width: inherit;\n            height: 30%;\n            border: none;\n          }\n        }\n\n        .ch5-video-switcher--source-list-label {\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          width: 100%;\n          text-align: center;\n          font-size: calc(0.2em + 10px);\n          font-weight: var(--ch5-video-switcher--source-list-label-weight);\n          font-style: var(--ch5-video-switcher--source-list-label-style);\n          color: var(--ch5-video-switcher--source-list-label-color);\n          letter-spacing: var(--ch5-video-switcher--source-list-label-letter-spacing);\n          padding: 0 5px;\n        }\n      }\n\n      &.hideScreen {\n        display: none;\n      }\n    }\n\n    .ch5-video-switcher--screen-list-label:empty {\n      display: none;\n    }\n\n    .ch5-video-switcher--screen-list-label {\n      color: var(--ch5-video-switcher--screen-list-label-color);\n      font-style: var(--ch5-video-switcher--screen-list-label-style);\n      font-weight: var(--ch5-video-switcher--screen-list-label-weight);\n      font-size: var(--ch5-video-switcher--screen-list-label-size);\n      letter-spacing: var( --ch5-video-switcher--screen-list-label-letter-spacing);\n      width: 100%;\n      text-align: center;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      line-height: 1;\n      min-height: var(--ch5-video-switcher--screen-list-label-size);\n      user-select: none;\n    }\n\n    &-label {\n      &-right {\n        .ch5-video-switcher--screen-list-label {\n          text-align: right;\n        }\n      }\n\n      &-left {\n        .ch5-video-switcher--screen-list-label {\n          text-align: left;\n        }\n      }\n\n      &-center {\n        .ch5-video-switcher--screen-list-label {\n          text-align: center;\n        }\n      }\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video-switcher--screen-aspect-ratio-stretch",
+                        "description": "Applied when screen aspect ratio is stretch\n",
+                        "value": ".screen-container {\n        width: 100% !important;\n        height: 100% !important;\n      }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video-switcher--screen-aspect-ratio-16-9",
+                        "description": "Applied when screen aspect ratio is 16:9\n",
+                        "value": ".screen-container {\n        aspect-ratio: 16/9;\n      }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video-switcher--screen-aspect-ratio-4-3",
+                        "description": "Applied when screen aspect ratio is 4:3\n",
+                        "value": ".screen-container {\n        aspect-ratio: 4/3;\n      }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video-switcher--source-list",
+                        "description": "Applied to the list of sources",
+                        "value": "--number-of-source-list-divisions: 1;\n    gap: calc(var(--ch5-video-switcher--source-list-gap) / var(--number-of-source-list-divisions));\n    padding: 5px; // Do Not create variable\n\n    display: grid;\n    place-items: center;\n    overflow: scroll;\n    position: relative;\n    scrollbar-width: none;\n    user-select: none;\n    white-space: nowrap;\n    will-change: transform;\n\n    &.ch5-video-switcher-source-list::-webkit-scrollbar {\n      height: 0;\n      width: 0;\n    }\n\n    &.active {\n      cursor: -webkit-grabbing;\n    }\n\n    .source-container {\n      // aspect-ratio: 1/1;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      flex-direction: column;\n      overflow: hidden;\n      padding: var(--ch5-video-switcher--source-item-padding);\n      // font-size: calc(var(--ch5-video-switcher--source-icon-size) - var(--ch5-video-switcher--source-item-padding));\n      // font-size: calc(var(--ch5-video-switcher--width) / calc(10 * var(--number-of-source-list-divisions))); //calc(calc(calc(var(--ch5-video-switcher--source-icon-size) - var(--ch5-video-switcher--source-item-padding))) * 0.5);\n      font-size: calc(max(240px, var(--ch5-video-switcher--width)) / 10);\n\n      .source-icon-url {\n        background-repeat: no-repeat;\n        background-size: contain;\n        background-position: center;\n        height: calc(1.5 * var(--number-of-source-list-divisions));\n        width: calc(1.5 * var(--number-of-source-list-divisions));\n      }\n\n      .source-icon {\n        font-size: calc(1em / var(--number-of-source-list-divisions));\n        aspect-ratio: 1/1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex: 1;\n        color: var(--ch5-video-switcher--source-list-icon-color); //TODo - check source list vs source icon\n\n        &.sg {\n          background-position: 50%;\n          background-repeat: no-repeat;\n          background-size: contain;\n          width: 100%;\n          border: none;\n        }\n      }\n\n      .ch5-video-switcher--source-list-label {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        text-align: center;\n        width: 100%;\n        font-size: calc(calc(0.27em / var(--number-of-source-list-divisions)) + calc(4px / var(--number-of-source-list-divisions)));\n        line-height: 1;\n        font-weight: var(--ch5-video-switcher--source-list-label-weight);\n        font-style: var(--ch5-video-switcher--source-list-label-style);\n        color: var(--ch5-video-switcher--source-list-label-color);\n        flex: 0 0 calc(22px / var(--number-of-source-list-divisions));\n        letter-spacing: var(--ch5-video-switcher--source-list-label-letter-spacing);\n      }\n\n      .ch5-video-switcher--source-list-label:empty {\n        display: none;\n      }\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video-switcher--source-list-scrollbar-true",
+                        "description": "Applied when scrollbar is set to true",
+                        "value": ".scrollbar-container {\n      display: block;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video-switcher--source-list-scrollbar-false",
+                        "description": "Applied when scrollbar is set to false",
+                        "value": ".scrollbar-container {\n      display: none;\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video-switcher--source-list-position-top",
+                        "description": "Applied when sourceListPosition='top'\n",
+                        "value": "flex-direction: column;\n    overflow-y: hidden;\n\n    &.ch5-video-switcher--source-list-scrollbar-true {\n      .scrollbar-container {\n        top: calc($ch5-video-switcher--source-size - 3px);\n      }\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video-switcher--source-list-position-bottom",
+                        "description": "Applied when sourceListPosition='bottom'\n",
+                        "value": "flex-direction: column-reverse;\n    overflow-y: hidden;\n\n    &.ch5-video-switcher--source-list-scrollbar-true {\n      .scrollbar-container {\n        bottom: 0;\n      }\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video-switcher--source-list-position-left",
+                        "description": "Applied when sourceListPosition='left'\n",
+                        "value": "flex-direction: row;\n    overflow-x: hidden;\n\n    &.ch5-video-switcher--source-list-scrollbar-true {\n      .scrollbar-container {\n        left: $ch5-video-switcher--source-size; // calc($ch5-video-switcher--source-size - var(--ch5-video-switcher--scrollbar-width));\n      }\n    }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-video-switcher--source-list-position-right",
+                        "description": "Applied when sourceListPosition='right'\n",
+                        "value": "flex-direction: row-reverse;\n    overflow-x: hidden;\n\n    &.ch5-video-switcher--source-list-scrollbar-true {\n      .scrollbar-container {\n        right: 0;\n      }\n    }"
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "group": "ch5-wifi-signal-level-gauge",
+        "schemadata": [
+            {
+                "type": "class",
+                "metadata": [
+                    {
+                        "type": "class",
+                        "name": "ch5-wifi-signal-level-gauge--selected-false",
+                        "description": "class for deselected bar color\n",
+                        "value": "$trans: 0.3s linear;\n          @if $alignmentValue == left {\n            border-left-color: currentColor;\n          } @else if $alignmentValue == right {\n            border-right-color: currentColor;\n          } @else if $alignmentValue == up {\n            border-top-color: currentColor;\n          } @else if $alignmentValue == down {\n            border-bottom-color: currentColor;\n          }\n          transition: currentColor $trans;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-wifi-signal-level-gauge--selected-true",
+                        "description": "class for selected bar color\n",
+                        "value": "$trans: 0.3s linear;\n          @if $alignmentValue == left {\n            border-left-color: currentColor;\n          } @else if $alignmentValue == right {\n            border-right-color: currentColor;\n          } @else if $alignmentValue == up {\n            border-top-color: currentColor;\n          } @else if $alignmentValue == down {\n            border-bottom-color: currentColor;\n          }\n          transition: currentColor $trans;"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-wifi-signal-level-gauge",
+                        "description": "Main class\n",
+                        "value": "position: relative;\n  display: inline-block;\n\n  .ch5-wifi-signal-level-gauge-middle-signal,\n  .ch5-wifi-signal-level-gauge-bottom-signal,\n  .ch5-wifi-signal-level-gauge-top-signal {\n    border-color: transparent;\n    border-style: solid;\n    content: \"\";\n    box-sizing: border-box;\n    background-color: transparent;\n    position: absolute;\n  }"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-wifi-signal-level-gauge--disabled",
+                        "description": "Disabled Class\n",
+                        "value": "@include ch5-component-disabled();"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-wifi-signal-level-gauge--gauge-style-light",
+                        "description": "Applied when gaugeStyle='light'\n",
+                        "value": "// Placeholder"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-wifi-signal-level-gauge--gauge-style-accents",
+                        "description": "Applied when gaugeStyle='accents'\n",
+                        "value": "// Placeholder"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-wifi-signal-level-gauge--gauge-style-dark",
+                        "description": "Applied when gaugeStyle='dark'\n",
+                        "value": "// Placeholder"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-wifi-signal-level-gauge--alignment-up",
+                        "description": "Applied when alignment='up'\n",
+                        "value": "// Placeholder"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-wifi-signal-level-gauge--alignment-down",
+                        "description": "Applied when alignment='down'\n",
+                        "value": "// Placeholder"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-wifi-signal-level-gauge--alignment-left",
+                        "description": "Applied when alignment='left'\n",
+                        "value": "// Placeholder"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-wifi-signal-level-gauge--alignment-right",
+                        "description": "Applied when alignment='right'\n",
+                        "value": "// Placeholder"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-wifi-signal-level-gauge--size-regular",
+                        "description": "Applied when size='regular'\n",
+                        "value": "// Placeholder"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-wifi-signal-level-gauge--size-small",
+                        "description": "Applied when size='small'\n",
+                        "value": "// Placeholder"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-wifi-signal-level-gauge--size-large",
+                        "description": "Applied when size='large'\n",
+                        "value": "// Placeholder"
+                    },
+                    {
+                        "type": "class",
+                        "name": "ch5-wifi-signal-level-gauge--size-x-large",
+                        "description": "Applied when size='x-large'\n",
+                        "value": "// Placeholder"
+                    }
+                ]
+            }
+        ]
+    }
+]