globuswebcomponents 0.3.5 → 0.3.6

package/dist/collection/components/gb-progress-bar/gb-progress-bar.css

@@ -75,10 +75,19 @@
     --success-900: #074d31;
     --success-950: #053321;
 
-    /* opacity color palette  */
+    /* ------------------------------------------opacity color palette--------------------------------------  */
+    /* 20% opacity */
     --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);
     --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);
 
+    /* 30% opacity */
+    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);
+    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);
+
+    /* 40% opacity */
+    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);
+    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);
+
 
     /* ------------------------------------------Secondary Color------------------------------------------- */
     /* blueLight color palete */
@@ -250,6 +259,14 @@
         --color-text-warning-bold: var(--warning-100);
     }
 
+    [data-theme="light"] {
+        --color-text-warning-subtle: var(--warning-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-warning-subtle: var(--warning-400);
+    }
+
     [data-theme="light"] {
         --color-text-sucess: var(--success-600);
     }
@@ -282,6 +299,14 @@
         --color-text-discovery-bold: var(--blueLight-100);
     }
 
+    [data-theme="light"] {
+        --color-text-discovery-subtle: var(--blueLight-400);
+    }
+
+    [data-theme="dark"] {
+        --color-text-discovery-subtle: var(--blueLight-100);
+    }
+
     [data-theme="light"] {
         --color-text-information: var(--blue-600);
     }
@@ -298,6 +323,14 @@
         --color-text-information-bold: var(--blue-100);
     }
 
+    [data-theme="light"] {
+        --color-text-information-subtle: var(--blue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-information-subtle: var(--blue-400);
+    }
+
     [data-theme="light"] {
         --color-text-purple: var(--purple-600);
     }
@@ -314,6 +347,30 @@
         --color-text-purple-bold: var(--purple-100);
     }
 
+    [data-theme="light"] {
+        --color-text-purple-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-purple-subtle: var(--purple-400);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink: var(--purple-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink: var(--purple-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink-subtle: var(--purple-400);
+    }
+
 
     /* --------------Link color--------------- */
 
@@ -1244,6 +1301,22 @@
         --color-blanket: var(--darkBlue200-opacity20);
     }
 
+    [data-theme="light"] {
+        --color-blanket-subtle: var(--darkBlue500-opacity30);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtle: var(--darkBlue200-opacity30);
+    }
+
+    [data-theme="light"] {
+        --color-blanket-subtler: var(--darkBlue500-opacity40);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtler: var(--darkBlue200-opacity40);
+    }
+
 
 
     /* ----------------Skeleton Color --------------- */

package/dist/collection/components/gb-progress-bar/gb-progress-bar.js

@@ -8,7 +8,7 @@ export class GbProgressBar {
     }
     render() {
         const progressValue = Math.min(Math.max(this.progress, 0), 100);
-        return (h("div", { key: '00fefa8bc73cedd8bd3734200f7b8e78e8916027', class: `progress_bar_container ${this.labelPosition}` }, h("div", { key: '3926e467179ea9e0185a5c1b3c9f24e1899c3112', class: "progress_bar" }, h("div", { key: 'a8d8caac6b024af4e1f831cc8477df107118cf92', class: "progress_fill", style: { width: `${progressValue}%` } })), h(Fragment, null, this.showLabel && (h("div", { key: 'f7b79833ca09026c9ea429eca9624778c43d75f6', class: `label ${this.labelPosition}` }, this.labelPosition === 'right' && h("span", { key: 'd9aa25f36656ce8a96f2a6cc2d034d75591841e4', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'bottom' && h("span", { key: '1db9b2941ba8e420f2b67d344d9454360fd0ac2c', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'top_floating' && (h("gb-tooltip", { key: 'b82b9f334dc2fafb870e1e4a5376f2ca92013342', class: `top_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 6.5).toString()}%` } }, h("p", { key: '4df2198c343b0fb5c711649f0acb4a228ba8bec3', slot: "main_text", class: "text-xs-semi-bold" }, progressValue, "%"))), this.labelPosition === 'bottom_floating' && (h("gb-tooltip", { key: '7e85d919ba5b286e8ea0f742e2f126195d13cbfa', class: `bottom_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 59.5).toString()}%` } }, h("p", { key: 'b268d9cac04c5a1c57b1a3a78b621512ef916ade', slot: "main_text", class: "text-xs-semi-bold" }, progressValue, "%"))))))));
+        return (h("div", { key: 'e5a250b18ef7c5fcca52b0b5f8ec12643cd43ec9', class: `progress_bar_container ${this.labelPosition}` }, h("div", { key: 'aff358483991367206aaa6d2b8db1034aacc1023', class: "progress_bar" }, h("div", { key: '55bc9e1f3b775c18dec1ba9934a1346ff2ff7153', class: "progress_fill", style: { width: `${progressValue}%` } })), h(Fragment, null, this.showLabel && (h("div", { key: 'ff6e81f5043e411cf9728c481aa9b8c322dca1e4', class: `label ${this.labelPosition}` }, this.labelPosition === 'right' && h("span", { key: '032818e935d5700862f7dadf296becbf27d4e8f0', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'bottom' && h("span", { key: '601e71b747649963e267ebbad3d23488b474a47f', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'top_floating' && (h("gb-tooltip", { key: 'dfb3693f9063069371be7f9ba26ba181404bfbf3', class: `top_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 6.5).toString()}%` } }, h("p", { key: '164e74d44bfc235ef3a2c3af109c83a214c17a5a', slot: "main_text", class: "text-xs-semi-bold" }, progressValue, "%"))), this.labelPosition === 'bottom_floating' && (h("gb-tooltip", { key: 'ecd4e3dee17704382593780407c45d53eaeda6e4', class: `bottom_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 59.5).toString()}%` } }, h("p", { key: '0d89042de6a71b7001d448c66c6546b937103704', slot: "main_text", class: "text-xs-semi-bold" }, progressValue, "%"))))))));
     }
     static get is() { return "gb-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-progress-circle/gb-progress-circle.js

@@ -7,7 +7,7 @@ export class GbProgressCircle {
         this.progress = 0;
     }
     render() {
-        return (h("div", { key: 'e1a7f2869d12cd4952173bdaa50a350c3e695c1e', class: "progress" }, h("svg", { key: '6df88babf13d41cb1ab39e511dfc5dbf7b743849', class: "progress-circle", width: "200px", height: "200px", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '0d29883b41c9fbbfb20fef000ab37040587c813d', class: "progress-circle-back", cx: "80", cy: "80", r: "74" }), h("circle", { key: '08e2b9d0a69489382fe4bd5117b278b003779369', class: "progress-circle-prog", cx: "80", cy: "80", r: "74" })), h("div", { key: 'a17205ecdb36c2d85470b3f38add06fb187c20c0', class: "progress-text", "data-progress": "0" }, "50%")));
+        return (h("div", { key: '8aaec549f544dbeb820557e64ca5f06ea0d170b8', class: "progress" }, h("svg", { key: '3de823b17e19cfe4ec6665e32a53de68f52cac65', class: "progress-circle", width: "200px", height: "200px", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'e410a39515af281e48bc54b2a2f6801d52ccb6f1', class: "progress-circle-back", cx: "80", cy: "80", r: "74" }), h("circle", { key: '99f7bbfd863011aa969d185ae7d79f69ee509956', class: "progress-circle-prog", cx: "80", cy: "80", r: "74" })), h("div", { key: 'f553a04725283f2efc942f6c89594c3e0ad94e3d', class: "progress-text", "data-progress": "0" }, "50%")));
     }
     static get is() { return "gb-progress-circle"; }
     static get encapsulation() { return "shadow"; }
@@ -28,7 +28,7 @@ export class GbProgressCircle {
                 "mutable": false,
                 "complexType": {
                     "original": "GeneralSizes",
-                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\"",
+                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\" | \"xxs\"",
                     "references": {
                         "GeneralSizes": {
                             "location": "import",

package/dist/collection/components/gb-scrollbar/gb-scrollbar.css

@@ -75,10 +75,19 @@
     --success-900: #074d31;
     --success-950: #053321;
 
-    /* opacity color palette  */
+    /* ------------------------------------------opacity color palette--------------------------------------  */
+    /* 20% opacity */
     --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);
     --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);
 
+    /* 30% opacity */
+    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);
+    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);
+
+    /* 40% opacity */
+    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);
+    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);
+
 
     /* ------------------------------------------Secondary Color------------------------------------------- */
     /* blueLight color palete */
@@ -250,6 +259,14 @@
         --color-text-warning-bold: var(--warning-100);
     }
 
+    [data-theme="light"] {
+        --color-text-warning-subtle: var(--warning-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-warning-subtle: var(--warning-400);
+    }
+
     [data-theme="light"] {
         --color-text-sucess: var(--success-600);
     }
@@ -282,6 +299,14 @@
         --color-text-discovery-bold: var(--blueLight-100);
     }
 
+    [data-theme="light"] {
+        --color-text-discovery-subtle: var(--blueLight-400);
+    }
+
+    [data-theme="dark"] {
+        --color-text-discovery-subtle: var(--blueLight-100);
+    }
+
     [data-theme="light"] {
         --color-text-information: var(--blue-600);
     }
@@ -298,6 +323,14 @@
         --color-text-information-bold: var(--blue-100);
     }
 
+    [data-theme="light"] {
+        --color-text-information-subtle: var(--blue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-information-subtle: var(--blue-400);
+    }
+
     [data-theme="light"] {
         --color-text-purple: var(--purple-600);
     }
@@ -314,6 +347,30 @@
         --color-text-purple-bold: var(--purple-100);
     }
 
+    [data-theme="light"] {
+        --color-text-purple-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-purple-subtle: var(--purple-400);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink: var(--purple-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink: var(--purple-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink-subtle: var(--purple-400);
+    }
+
 
     /* --------------Link color--------------- */
 
@@ -1244,6 +1301,22 @@
         --color-blanket: var(--darkBlue200-opacity20);
     }
 
+    [data-theme="light"] {
+        --color-blanket-subtle: var(--darkBlue500-opacity30);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtle: var(--darkBlue200-opacity30);
+    }
+
+    [data-theme="light"] {
+        --color-blanket-subtler: var(--darkBlue500-opacity40);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtler: var(--darkBlue200-opacity40);
+    }
+
 
 
     /* ----------------Skeleton Color --------------- */

package/dist/collection/components/gb-scrollbar/gb-scrollbar.js

@@ -4,7 +4,7 @@ export class GbScrollbar {
         this.length = '25%';
     }
     render() {
-        return (h("div", { key: '1efd33151e0838b53331c701a265529563a90674', class: "scrollbar-container" }, h("div", { key: '9af4419b28451dc2eeeff1bd0d68b77c2738703e', class: "scrollbar", style: { height: this.length } }, h("slot", { key: '7f21debc1a4e5753fa6e31e5ef8aca60d33be944' }))));
+        return (h("div", { key: 'd4eafdb95b6f17415d0f91056e90b5d4b4dac013', class: "scrollbar-container" }, h("div", { key: 'e838a61303d18a42ec0c9738d856dd3103c5d365', class: "scrollbar", style: { height: this.length } }, h("slot", { key: 'f2301355f6ff83db465e586704972c9df51bebbb' }))));
     }
     static get is() { return "gb-scrollbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-slider-control-handle/slider-control-handle.css

@@ -75,10 +75,19 @@
     --success-900: #074d31;
     --success-950: #053321;
 
-    /* opacity color palette  */
+    /* ------------------------------------------opacity color palette--------------------------------------  */
+    /* 20% opacity */
     --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);
     --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);
 
+    /* 30% opacity */
+    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);
+    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);
+
+    /* 40% opacity */
+    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);
+    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);
+
 
     /* ------------------------------------------Secondary Color------------------------------------------- */
     /* blueLight color palete */
@@ -250,6 +259,14 @@
         --color-text-warning-bold: var(--warning-100);
     }
 
+    [data-theme="light"] {
+        --color-text-warning-subtle: var(--warning-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-warning-subtle: var(--warning-400);
+    }
+
     [data-theme="light"] {
         --color-text-sucess: var(--success-600);
     }
@@ -282,6 +299,14 @@
         --color-text-discovery-bold: var(--blueLight-100);
     }
 
+    [data-theme="light"] {
+        --color-text-discovery-subtle: var(--blueLight-400);
+    }
+
+    [data-theme="dark"] {
+        --color-text-discovery-subtle: var(--blueLight-100);
+    }
+
     [data-theme="light"] {
         --color-text-information: var(--blue-600);
     }
@@ -298,6 +323,14 @@
         --color-text-information-bold: var(--blue-100);
     }
 
+    [data-theme="light"] {
+        --color-text-information-subtle: var(--blue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-information-subtle: var(--blue-400);
+    }
+
     [data-theme="light"] {
         --color-text-purple: var(--purple-600);
     }
@@ -314,6 +347,30 @@
         --color-text-purple-bold: var(--purple-100);
     }
 
+    [data-theme="light"] {
+        --color-text-purple-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-purple-subtle: var(--purple-400);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink: var(--purple-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink: var(--purple-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink-subtle: var(--purple-400);
+    }
+
 
     /* --------------Link color--------------- */
 
@@ -1244,6 +1301,22 @@
         --color-blanket: var(--darkBlue200-opacity20);
     }
 
+    [data-theme="light"] {
+        --color-blanket-subtle: var(--darkBlue500-opacity30);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtle: var(--darkBlue200-opacity30);
+    }
+
+    [data-theme="light"] {
+        --color-blanket-subtler: var(--darkBlue500-opacity40);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtler: var(--darkBlue200-opacity40);
+    }
+
 
 
     /* ----------------Skeleton Color --------------- */

package/dist/collection/components/gb-slider-control-handle/slider-control-handle.js

@@ -19,7 +19,7 @@ export class SliderControlHandle {
         this.isFocused = false;
     }
     render() {
-        return (h("div", { key: '17646b828d28a09eca6bd71b84cbbd36e01fdabf', class: `thumb-container ${this.type} ${this.isHovered ? 'hover' : ''} ${this.isFocused ? 'focused' : ''}`, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), tabindex: "0" }, this.type === 'tooltip' && (h("div", { key: '26e1cd939f136c491a10fb13f4598d154a42eb6a', class: "tooltip-container" }, h("gb-tooltip", { key: '940de690145c5016ab89528fca8cccd16d97723f', arrow: 'none' }, h("p", { key: 'eac33b1963b2a64f8bc92000856e2dba0f29346b', class: "text-xs-semi-bold", slot: "main_text" }, this.value, "%")))), this.type === 'text' && (h("div", { key: 'a496ce3bd6f432095df5e5d14461366773172731', class: "thumb-label" }, this.value, "%"))));
+        return (h("div", { key: '76dbbb3b57968e92ebce0b0c6d7a66a0ce4edbcc', class: `thumb-container ${this.type} ${this.isHovered ? 'hover' : ''} ${this.isFocused ? 'focused' : ''}`, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), tabindex: "0" }, this.type === 'tooltip' && (h("div", { key: '98dcd30b21a84fc1a4c968b816c786e810d65793', class: "tooltip-container" }, h("gb-tooltip", { key: 'ebe47f80de89d3410840cd6bc4ecee596862c0f2', arrow: 'none' }, h("p", { key: '6ef783f9dcd8c85eea2fe8cf8d4720df74251df3', class: "text-xs-semi-bold", slot: "main_text" }, this.value, "%")))), this.type === 'text' && (h("div", { key: '5729286fb3dfae1b33d3e7f31e3a9e7704d9290b', class: "thumb-label" }, this.value, "%"))));
     }
     static get is() { return "gb-slider-control-handle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-sliders/slider.css

@@ -75,10 +75,19 @@
     --success-900: #074d31;
     --success-950: #053321;
 
-    /* opacity color palette  */
+    /* ------------------------------------------opacity color palette--------------------------------------  */
+    /* 20% opacity */
     --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);
     --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);
 
+    /* 30% opacity */
+    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);
+    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);
+
+    /* 40% opacity */
+    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);
+    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);
+
 
     /* ------------------------------------------Secondary Color------------------------------------------- */
     /* blueLight color palete */
@@ -250,6 +259,14 @@
         --color-text-warning-bold: var(--warning-100);
     }
 
+    [data-theme="light"] {
+        --color-text-warning-subtle: var(--warning-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-warning-subtle: var(--warning-400);
+    }
+
     [data-theme="light"] {
         --color-text-sucess: var(--success-600);
     }
@@ -282,6 +299,14 @@
         --color-text-discovery-bold: var(--blueLight-100);
     }
 
+    [data-theme="light"] {
+        --color-text-discovery-subtle: var(--blueLight-400);
+    }
+
+    [data-theme="dark"] {
+        --color-text-discovery-subtle: var(--blueLight-100);
+    }
+
     [data-theme="light"] {
         --color-text-information: var(--blue-600);
     }
@@ -298,6 +323,14 @@
         --color-text-information-bold: var(--blue-100);
     }
 
+    [data-theme="light"] {
+        --color-text-information-subtle: var(--blue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-information-subtle: var(--blue-400);
+    }
+
     [data-theme="light"] {
         --color-text-purple: var(--purple-600);
     }
@@ -314,6 +347,30 @@
         --color-text-purple-bold: var(--purple-100);
     }
 
+    [data-theme="light"] {
+        --color-text-purple-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-purple-subtle: var(--purple-400);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink: var(--purple-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink: var(--purple-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink-subtle: var(--purple-400);
+    }
+
 
     /* --------------Link color--------------- */
 
@@ -1244,6 +1301,22 @@
         --color-blanket: var(--darkBlue200-opacity20);
     }
 
+    [data-theme="light"] {
+        --color-blanket-subtle: var(--darkBlue500-opacity30);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtle: var(--darkBlue200-opacity30);
+    }
+
+    [data-theme="light"] {
+        --color-blanket-subtler: var(--darkBlue500-opacity40);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtler: var(--darkBlue200-opacity40);
+    }
+
 
 
     /* ----------------Skeleton Color --------------- */

package/dist/collection/components/gb-sliders/slider.js

@@ -56,7 +56,7 @@ export class GbSlider {
         this.trackEl.style.width = `${rightPos - leftPos}%`;
     }
     render() {
-        return (h("div", { key: '97a1a6259d7b835240a453d1f33a6fc78b5f9e53', class: "slider-container", ref: (el) => this.containerEl = el }, h("div", { key: 'd9e731475e12eefa8c29318e48e2c0e6393c708a', class: "track", ref: (el) => this.trackEl = el }), h("gb-slider-control-handle", { key: '5421018ac1fcedde31c3020f74439d05c1d7896c', class: "left", value: this.leftValue, type: this.thumbType, style: { left: `${this.leftValue}%` }, onMouseDown: (e) => this.handleMouseDown(e, 'left') }), h("gb-slider-control-handle", { key: '1806237385aabb0bd975de4bb27bfd5386cb4a65', class: "right", value: this.rightValue, type: this.thumbType, style: { left: `${this.rightValue}%` }, onMouseDown: (e) => this.handleMouseDown(e, 'right') })));
+        return (h("div", { key: 'fe059583eab90c106f50fce8e2a23b2bda817b65', class: "slider-container", ref: (el) => this.containerEl = el }, h("div", { key: 'f9bbd393d4dd843649093abac59a1b3014bbe9bf', class: "track", ref: (el) => this.trackEl = el }), h("gb-slider-control-handle", { key: '0140956d42a6cb7407d0ffb097ed4c3c82b7f0eb', class: "left", value: this.leftValue, type: this.thumbType, style: { left: `${this.leftValue}%` }, onMouseDown: (e) => this.handleMouseDown(e, 'left') }), h("gb-slider-control-handle", { key: '6fbbd1a87acd040d7b53b811d8be88a20b973cec', class: "right", value: this.rightValue, type: this.thumbType, style: { left: `${this.rightValue}%` }, onMouseDown: (e) => this.handleMouseDown(e, 'right') })));
     }
     static get is() { return "gb-slider"; }
     static get encapsulation() { return "shadow"; }