genesys-spark-components 4.0.0-beta.3 → 4.0.0-beta.31

package/dist/collection/components/stable/gux-icon/icons/fa/pen-slash-regular.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M0.970018 1.7275C0.710018 1.5225 0.332518 1.57 0.127518 1.83C-0.0774815 2.09 -0.0299815 2.4675 0.230018 2.6725L15.03 14.2725C15.29 14.4775 15.6675 14.43 15.8725 14.17C16.0775 13.91 16.03 13.5325 15.77 13.3275L10.2475 9L13.9175 5.3325C14.465 4.785 14.5325 3.9425 14.1225 3.32C14.065 3.2325 13.995 3.1475 13.9175 3.07L12.9325 2.0825C12.3075 1.4575 11.295 1.4575 10.67 2.0825L6.60502 6.145L0.970018 1.7275ZM7.55752 6.89L9.62502 4.825L11.175 6.375L9.29752 8.2525L7.55752 6.89ZM3.91252 10.535L5.84502 8.6025L4.89502 7.855L3.06502 9.685C2.80502 9.945 2.61502 10.2675 2.51002 10.62L1.93502 12.575L1.62502 13.63C1.56252 13.84 1.62002 14.0675 1.77752 14.2225C1.93502 14.3775 2.16002 14.435 2.37002 14.375L3.42502 14.065L5.37752 13.49C5.68752 13.4 5.97002 13.2425 6.21252 13.03C6.24752 13 6.28002 12.9675 6.31252 12.935L8.52752 10.72L7.57752 9.9725L5.46252 12.0875C5.34502 12.205 5.19752 12.2925 5.03752 12.34L4.45252 12.5125L3.08252 12.915L3.48502 11.545L3.65752 10.96C3.70002 10.82 3.77002 10.69 3.86752 10.58C3.88252 10.565 3.89502 10.55 3.91002 10.535H3.91252Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/fa/play-regular.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 13.5L12.5 8L3.5 2.5V13.5ZM2.76562 1.19063C3.24063 0.925002 3.81875 0.937502 4.28125 1.21875L13.2812 6.71875C13.7281 6.99063 14 7.475 14 8C14 8.525 13.7281 9.00625 13.2812 9.28125L4.28125 14.7813C3.81875 15.0656 3.2375 15.075 2.76562 14.8094C2.29375 14.5438 2 14.0438 2 13.5V2.5C2 1.95625 2.29375 1.45625 2.76562 1.19063Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/fa/regular-user-circle-arrow-left.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M0 13.6575C0 14.0675 0.3325 14.4 0.7425 14.4C3.785 14.4 6.8275 14.4 9.87 14.4C9.4125 14.0775 9.02 13.67 8.7125 13.2C6.22 13.2 3.725 13.2 1.2325 13.2C1.455 11.6175 2.815 10.4 4.4575 10.4C5.22 10.4 5.98 10.4 6.7425 10.4C7.19 10.4 7.615 10.49 8.0025 10.6525C8.0175 10.2325 8.0875 9.83 8.2125 9.4475C7.7525 9.2875 7.2575 9.2 6.7425 9.2C5.98 9.2 5.22 9.2 4.4575 9.2C1.995 9.2 0 11.195 0 13.6575ZM2.4 4.8C2.4 5.9425 3.01 7 4 7.5725C4.99 8.145 6.21 8.145 7.2 7.5725C8.19 7 8.8 5.945 8.8 4.8C8.8 3.655 8.19 2.6 7.2 2.0275C6.21 1.455 4.99 1.455 4 2.0275C3.01 2.6 2.4 3.6575 2.4 4.8ZM3.6 4.8C3.6 4.085 3.98 3.425 4.6 3.0675C5.22 2.71 5.98 2.71 6.6 3.0675C7.22 3.425 7.6 4.085 7.6 4.8C7.6 5.515 7.22 6.175 6.6 6.5325C5.98 6.89 5.22 6.89 4.6 6.5325C3.98 6.175 3.6 5.515 3.6 4.8ZM9.2825 9C8.64 10.115 8.64 11.485 9.2825 12.6C9.925 13.715 11.115 14.4 12.4 14.4C13.685 14.4 14.875 13.715 15.5175 12.6C16.16 11.485 16.16 10.115 15.5175 9C14.875 7.885 13.685 7.2 12.4 7.2C11.115 7.2 9.925 7.885 9.2825 9ZM10.5175 10.5175C10.985 10.05 11.45 9.585 11.9175 9.1175C12.0725 8.9625 12.3275 8.9625 12.4825 9.1175C12.6375 9.2725 12.6375 9.5275 12.4825 9.6825C12.2425 9.9225 12.005 10.16 11.765 10.4C12.51 10.4 13.255 10.4 14 10.4C14.22 10.4 14.4 10.58 14.4 10.8C14.4 11.02 14.22 11.2 14 11.2C13.255 11.2 12.51 11.2 11.765 11.2C12.005 11.44 12.2425 11.6775 12.4825 11.9175C12.6375 12.0725 12.6375 12.3275 12.4825 12.4825C12.3275 12.6375 12.0725 12.6375 11.9175 12.4825C11.45 12.015 10.985 11.55 10.5175 11.0825C10.36 10.9275 10.36 10.6725 10.5175 10.5175Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/fa/square-dashed-regular.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 1.25311H4.25C4.66563 1.25311 5 1.58749 5 2.00311C5 2.41874 4.66563 2.75311 4.25 2.75311H3.75C3.05938 2.75311 2.5 3.31249 2.5 4.00311V4.50311C2.5 4.91874 2.16562 5.25311 1.75 5.25311C1.33437 5.25311 1 4.91874 1 4.50311V4.00311C1 2.48436 2.23125 1.25311 3.75 1.25311ZM1.75 6.25311C2.16562 6.25311 2.5 6.58749 2.5 7.00311V9.50311C2.5 9.91874 2.16562 10.2531 1.75 10.2531C1.33437 10.2531 1 9.91874 1 9.50311V7.00311C1 6.58749 1.33437 6.25311 1.75 6.25311ZM14.25 6.25311C14.6656 6.25311 15 6.58749 15 7.00311V9.50311C15 9.91874 14.6656 10.2531 14.25 10.2531C13.8344 10.2531 13.5 9.91874 13.5 9.50311V7.00311C13.5 6.58749 13.8344 6.25311 14.25 6.25311ZM14.25 5.25311C13.8344 5.25311 13.5 4.91874 13.5 4.50311V4.00311C13.5 3.31249 12.9406 2.75311 12.25 2.75311H11.75C11.3344 2.75311 11 2.41874 11 2.00311C11 1.58749 11.3344 1.25311 11.75 1.25311H12.25C13.7688 1.25311 15 2.48436 15 4.00311V4.50311C15 4.91874 14.6656 5.25311 14.25 5.25311ZM15 12.0031V12.5031C15 14.0219 13.7688 15.2531 12.25 15.2531H11.75C11.3344 15.2531 11 14.9187 11 14.5031C11 14.0875 11.3344 13.7531 11.75 13.7531H12.25C12.9406 13.7531 13.5 13.1937 13.5 12.5031V12.0031C13.5 11.5875 13.8344 11.2531 14.25 11.2531C14.6656 11.2531 15 11.5875 15 12.0031ZM2.5 12.0031V12.5031C2.5 13.1937 3.05938 13.7531 3.75 13.7531H4.25C4.66563 13.7531 5 14.0875 5 14.5031C5 14.9187 4.66563 15.2531 4.25 15.2531H3.75C2.23125 15.2531 1 14.0219 1 12.5031V12.0031C1 11.5875 1.33437 11.2531 1.75 11.2531C2.16562 11.2531 2.5 11.5875 2.5 12.0031ZM6.75 15.2531C6.33437 15.2531 6 14.9187 6 14.5031C6 14.0875 6.33437 13.7531 6.75 13.7531H9.25C9.66562 13.7531 10 14.0875 10 14.5031C10 14.9187 9.66562 15.2531 9.25 15.2531H6.75ZM6 2.00311C6 1.58749 6.33437 1.25311 6.75 1.25311H9.25C9.66562 1.25311 10 1.58749 10 2.00311C10 2.41874 9.66562 2.75311 9.25 2.75311H6.75C6.33437 2.75311 6 2.41874 6 2.00311Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/fa/stop-regular.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M12 3.5C12.275 3.5 12.5 3.725 12.5 4V12C12.5 12.275 12.275 12.5 12 12.5H4C3.725 12.5 3.5 12.275 3.5 12V4C3.5 3.725 3.725 3.5 4 3.5H12ZM4 2C2.89688 2 2 2.89688 2 4V12C2 13.1031 2.89688 14 4 14H12C13.1031 14 14 13.1031 14 12V4C14 2.89688 13.1031 2 12 2H4Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/fa/subscript-regular.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M0.75 2C0.334375 2 0 2.33437 0 2.75C0 3.16562 0.334375 3.5 0.75 3.5H1.6L4.6 8L1.6 12.5H0.75C0.334375 12.5 0 12.8344 0 13.25C0 13.6656 0.334375 14 0.75 14H2C2.25 14 2.48438 13.875 2.625 13.6656L5.5 9.35312L8.375 13.6656C8.51562 13.875 8.75 14 9 14H10.25C10.6656 14 11 13.6656 11 13.25C11 12.8344 10.6656 12.5 10.25 12.5H9.4L6.4 8L9.4 3.5H10.25C10.6656 3.5 11 3.16562 11 2.75C11 2.33437 10.6656 2 10.25 2H9C8.75 2 8.51562 2.125 8.375 2.33437L5.5 6.64687L2.625 2.33437C2.48438 2.125 2.25 2 2 2H0.75ZM14.75 9.75C14.75 9.5 14.6281 9.26875 14.4219 9.12813C14.2156 8.9875 13.9531 8.95938 13.7219 9.05313L12.4719 9.55313C12.0875 9.70625 11.9 10.1438 12.0531 10.5281C12.2063 10.9125 12.6438 11.1 13.0281 10.9469L13.25 10.8594V14.5H12.75C12.3344 14.5 12 14.8344 12 15.25C12 15.6656 12.3344 16 12.75 16H14H15.25C15.6656 16 16 15.6656 16 15.25C16 14.8344 15.6656 14.5 15.25 14.5H14.75V9.75Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/fa/superscript-regular.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg"><path d="M14.75 1.75C14.75 1.5 14.6281 1.26875 14.4219 1.12813C14.2156 0.9875 13.9531 0.959375 13.7219 1.05313L12.4719 1.55313C12.0875 1.70625 11.9 2.14375 12.0531 2.52813C12.2063 2.9125 12.6438 3.1 13.0281 2.94688L13.25 2.85938V6.5H12.75C12.3344 6.5 12 6.83438 12 7.25C12 7.66563 12.3344 8 12.75 8H14H15.25C15.6656 8 16 7.66563 16 7.25C16 6.83438 15.6656 6.5 15.25 6.5H14.75V1.75ZM0.75 3C0.334375 3 0 3.33438 0 3.75C0 4.16563 0.334375 4.5 0.75 4.5H1.6L4.6 9L1.6 13.5H0.75C0.334375 13.5 0 13.8344 0 14.25C0 14.6656 0.334375 15 0.75 15H2C2.25 15 2.48438 14.875 2.625 14.6656L5.5 10.3531L8.375 14.6656C8.51562 14.875 8.75 15 9 15H10.25C10.6656 15 11 14.6656 11 14.25C11 13.8344 10.6656 13.5 10.25 13.5H9.4L6.4 9L9.4 4.5H10.25C10.6656 4.5 11 4.16563 11 3.75C11 3.33438 10.6656 3 10.25 3H9C8.75 3 8.51562 3.125 8.375 3.33438L5.5 7.64688L2.625 3.33438C2.48438 3.125 2.25 3 2 3H0.75Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/fa/user-group-solid.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M2.4 5.05311C2.4 4.20442 2.73714 3.39049 3.33726 2.79037C3.93737 2.19025 4.75131 1.85311 5.6 1.85311C6.44869 1.85311 7.26263 2.19025 7.86274 2.79037C8.46286 3.39049 8.8 4.20442 8.8 5.05311C8.8 5.90181 8.46286 6.71574 7.86274 7.31585C7.26263 7.91597 6.44869 8.25311 5.6 8.25311C4.75131 8.25311 3.93737 7.91597 3.33726 7.31585C2.73714 6.71574 2.4 5.90181 2.4 5.05311ZM0 13.9106C0 11.4481 1.995 9.45311 4.4575 9.45311H6.7425C9.205 9.45311 11.2 11.4481 11.2 13.9106C11.2 14.3206 10.8675 14.6531 10.4575 14.6531H0.7425C0.3325 14.6531 0 14.3206 0 13.9106ZM15.2325 14.6531H11.785C11.92 14.4181 12 14.1456 12 13.8531V13.6531C12 12.1356 11.3225 10.7731 10.255 9.85811C10.315 9.85561 10.3725 9.85311 10.4325 9.85311H11.9675C14.195 9.85311 16 11.6581 16 13.8856C16 14.3106 15.655 14.6531 15.2325 14.6531ZM10.8 8.25311C10.025 8.25311 9.325 7.93811 8.8175 7.43061C9.31 6.76561 9.6 5.94311 9.6 5.05311C9.6 4.38311 9.435 3.75061 9.1425 3.19561C9.6075 2.85561 10.18 2.65311 10.8 2.65311C12.3475 2.65311 13.6 3.90561 13.6 5.45311C13.6 7.00061 12.3475 8.25311 10.8 8.25311Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/fa/volume-regular.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.33058 6.49722L8.44447 3.73056V12.2694L5.33058 9.50278C5.20836 9.39445 5.05003 9.33333 4.88892 9.33333H2.44447C2.32225 9.33333 2.22225 9.23333 2.22225 9.11111V6.88889C2.22225 6.76667 2.32225 6.66667 2.44447 6.66667H4.88892C5.0528 6.66667 5.21114 6.60556 5.33058 6.49722ZM8.95003 1.77778C8.74725 1.77778 8.5528 1.85278 8.40003 1.98611L4.63614 5.33333H2.44447C1.58614 5.33333 0.888916 6.03056 0.888916 6.88889V9.11111C0.888916 9.96945 1.58614 10.6667 2.44447 10.6667H4.63614L8.40003 14.0139C8.5528 14.1472 8.74725 14.2222 8.95003 14.2222C9.40836 14.2222 9.7778 13.8528 9.7778 13.3944V2.60556C9.7778 2.14722 9.40836 1.77778 8.95003 1.77778ZM14.0306 3.86111C13.7445 3.62778 13.325 3.67222 13.0917 3.95833C12.8584 4.24445 12.9028 4.66389 13.1889 4.89722C14.0917 5.63056 14.6667 6.74722 14.6667 8C14.6667 9.25278 14.0917 10.3694 13.1889 11.1056C12.9028 11.3389 12.8611 11.7583 13.0917 12.0444C13.3222 12.3306 13.7445 12.3722 14.0306 12.1417C15.2306 11.1639 16 9.67222 16 8.00278C16 6.33333 15.2306 4.84167 14.0306 3.86389V3.86111ZM12.35 5.93056C12.0639 5.69722 11.6445 5.74167 11.4111 6.02778C11.1778 6.31389 11.2222 6.73333 11.5084 6.96667C11.8084 7.21111 12 7.58333 12 8C12 8.41667 11.8084 8.78889 11.5084 9.03611C11.2222 9.26944 11.1806 9.68889 11.4111 9.975C11.6417 10.2611 12.0639 10.3028 12.35 10.0722C12.9472 9.58056 13.3334 8.83611 13.3334 8C13.3334 7.16389 12.9472 6.41945 12.35 5.93056Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/fa/volume-xmark-regular.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M4.44167 6.49722L7.55556 3.73056V12.2694L4.44167 9.50278C4.31944 9.39445 4.16111 9.33333 4 9.33333H1.55556C1.43333 9.33333 1.33333 9.23333 1.33333 9.11111V6.88889C1.33333 6.76667 1.43333 6.66667 1.55556 6.66667H4C4.16389 6.66667 4.32222 6.60556 4.44167 6.49722ZM8.06111 1.77778C7.85833 1.77778 7.66389 1.85278 7.51111 1.98611L3.74722 5.33333H1.55556C0.697222 5.33333 0 6.03056 0 6.88889V9.11111C0 9.96945 0.697222 10.6667 1.55556 10.6667H3.74722L7.51111 14.0139C7.66389 14.1472 7.85833 14.2222 8.06111 14.2222C8.51944 14.2222 8.88889 13.8528 8.88889 13.3944V2.60556C8.88889 2.14722 8.51944 1.77778 8.06111 1.77778ZM11.8056 5.52778C11.5444 5.26667 11.1222 5.26667 10.8639 5.52778C10.6056 5.78889 10.6028 6.21111 10.8639 6.46945L12.3917 7.99722L10.8639 9.525C10.6028 9.78611 10.6028 10.2083 10.8639 10.4667C11.125 10.725 11.5472 10.7278 11.8056 10.4667L13.3333 8.93889L14.8611 10.4667C15.1222 10.7278 15.5444 10.7278 15.8028 10.4667C16.0611 10.2056 16.0639 9.78333 15.8028 9.525L14.275 7.99722L15.8028 6.46945C16.0639 6.20833 16.0639 5.78611 15.8028 5.52778C15.5417 5.26945 15.1194 5.26667 14.8611 5.52778L13.3333 7.05556L11.8056 5.52778Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/fa/wand-magic-sparkles-regular.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.51944 2.32811L5.47222 2.71978C5.38889 2.75034 5.33333 2.83089 5.33333 2.91978C5.33333 3.00867 5.38889 3.08922 5.47222 3.11978L6.51944 3.51145L6.91111 4.55867C6.94167 4.642 7.02222 4.69756 7.11111 4.69756C7.2 4.69756 7.28056 4.642 7.31111 4.55867L7.70278 3.51145L8.75 3.11978C8.83333 3.08922 8.88889 3.00867 8.88889 2.91978C8.88889 2.83089 8.83333 2.75034 8.75 2.71978L7.70278 2.32811L7.31111 1.28089C7.28056 1.19756 7.2 1.142 7.11111 1.142C7.02222 1.142 6.94167 1.19756 6.91111 1.28089L6.51944 2.32811ZM12.8167 2.47534L13.7778 3.43645L10.7278 6.48367L9.76667 5.52256L12.8167 2.47534ZM2.22222 13.0698L8.825 6.467L9.78611 7.42811L3.18333 14.0309L2.22222 13.0698ZM11.8722 1.53367L1.28056 12.1253C0.761111 12.6448 0.761111 13.4892 1.28056 14.0114L2.24167 14.9726C2.76111 15.492 3.60556 15.492 4.12778 14.9726L14.7194 4.37811C15.2389 3.85867 15.2389 3.01422 14.7194 2.492L13.7583 1.53367C13.2389 1.01422 12.3944 1.01422 11.8722 1.53367ZM0.208333 4.39756C0.0833333 4.44478 0 4.56422 0 4.69756C0 4.83089 0.0833333 4.95034 0.208333 4.99756L1.77778 5.58645L2.36667 7.15589C2.41389 7.28089 2.53333 7.36422 2.66667 7.36422C2.8 7.36422 2.91944 7.28089 2.96667 7.15589L3.55556 5.58645L5.125 4.99756C5.25 4.95034 5.33333 4.83089 5.33333 4.69756C5.33333 4.56422 5.25 4.44478 5.125 4.39756L3.55556 3.80867L2.96667 2.23922C2.91944 2.11422 2.8 2.03089 2.66667 2.03089C2.53333 2.03089 2.41389 2.11422 2.36667 2.23922L1.77778 3.80867L0.208333 4.39756ZM9.98611 11.5087C9.86111 11.5559 9.77778 11.6753 9.77778 11.8087C9.77778 11.942 9.86111 12.0614 9.98611 12.1087L11.5556 12.6976L12.1444 14.267C12.1917 14.392 12.3111 14.4753 12.4444 14.4753C12.5778 14.4753 12.6972 14.392 12.7444 14.267L13.3333 12.6976L14.9028 12.1087C15.0278 12.0614 15.1111 11.942 15.1111 11.8087C15.1111 11.6753 15.0278 11.5559 14.9028 11.5087L13.3333 10.9198L12.7444 9.35033C12.6972 9.22533 12.5778 9.142 12.4444 9.142C12.3111 9.142 12.1917 9.22533 12.1444 9.35033L11.5556 10.9198L9.98611 11.5087Z"/></svg>

package/dist/collection/components/stable/gux-icon/icons/fa/windows.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M0 2.20357L6.55714 1.3V7.63571H0V2.20357ZM0 13.7964L6.55714 14.7V8.44286H0V13.7964ZM7.27857 14.7964L16 16V8.44286H7.27857V14.7964ZM7.27857 1.20357V7.63571H16V0L7.27857 1.20357Z"/></svg>

package/dist/collection/components/stable/gux-list/gux-list-divider/gux-list-divider.css

@@ -10,4 +10,4 @@
   cursor: pointer;
   cursor: default;
   background-color: #c8cfda;
-}
+}

package/dist/collection/components/stable/gux-list/gux-list-divider/gux-list-divider.js

@@ -7,7 +7,7 @@ export class GuxListDivider {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-list-divider.less"]
+      "$": ["gux-list-divider.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-list/gux-list-item/gux-list-item.css

@@ -2,43 +2,55 @@
   width: 100%;
   outline: none;
 }
+
 :host([disabled]) {
   pointer-events: none;
 }
-:host([disabled='false']) {
+
+:host([disabled=false]) {
   pointer-events: auto;
 }
+
 ::slotted(gux-icon) {
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
+  width: var(--gse-ui-menu-option-startIcon-height);
+  height: var(--gse-ui-menu-option-startIcon-height);
+  margin-right: var(--gse-ui-menu-option-gap);
   vertical-align: middle;
 }
+
 button {
   all: unset;
+  font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);
+  font-weight: var(--gse-ui-menu-option-label-default-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-default-text-lineHeight);
+  font-size: var(--gse-ui-menu-option-label-default-text-fontSize);
+  background-color: var(--gse-ui-menu-option-default-backgroundColor);
   box-sizing: border-box;
   width: 100%;
-  min-height: 32px;
-  padding: 8px 16px;
-  color: #2e394c;
+  min-height: var(--gse-ui-menu-option-height);
+  padding: var(--gse-ui-menu-option-padding);
+  color: var(--gse-ui-menu-option-label-foregroundColor);
   word-wrap: break-word;
   cursor: pointer;
   border: none;
   outline: none;
+  outline-offset: calc(var(--gse-ui-menu-option-focus-border-width) * -1);
 }
 button:focus-visible:not(:disabled) {
-  color: #fdfdfd;
-  background: #2a60c8;
+  outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);
+  border-radius: var(--gse-semantic-focusRing-cornerRadius);
 }
 button:hover:not(:disabled) {
-  color: #fdfdfd;
-  background: #2754ac;
+  background: var(--gse-ui-menu-option-hover-backgroundColor);
 }
 button:active:not(:disabled) {
-  color: #fdfdfd;
-  background: #23478f;
+  background: var(--gse-ui-menu-option-selected-backgroundColor);
+  font-family: var(--gse-ui-menu-option-label-active-text-fontFamily);
+  font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-active-text-lineHeight);
+  font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
 }
 button:disabled {
-  color: rgba(46, 57, 76, 0.5);
+  opacity: var(--gse-ui-menu-option-disabled-opacity);
   cursor: default;
-}
+}

package/dist/collection/components/stable/gux-list/gux-list-item/gux-list-item.js

@@ -30,7 +30,7 @@ export class GuxListItem {
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-list-item.less"]
+      "$": ["gux-list-item.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-list/gux-list.css

@@ -5,4 +5,4 @@
   align-content: stretch;
   align-items: flex-start;
   justify-content: flex-start;
-}
+}

package/dist/collection/components/stable/gux-list/gux-list.js

@@ -56,7 +56,7 @@ export class GuxList {
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-list.less"]
+      "$": ["gux-list.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-listbox/gux-listbox.css

@@ -2,20 +2,21 @@
   box-sizing: border-box;
   display: block;
   max-height: 20rem;
-  padding: 8px 0;
+  padding: var(--gse-ui-menu-padding);
   margin: 0;
   overflow-y: auto;
-  color: #2e394c;
-  background: #fdfdfd;
-  border: 1px solid #b4bccb;
-  border-radius: 4px;
+  background: var(--gse-ui-menu-backgroundColor);
+  border: var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);
+  border-radius: var(--gse-ui-menu-borderRadius);
+  box-shadow: var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);
   outline: none;
 }
+
 :host(:focus) {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline: var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
+
 .gux-message-container {
   display: flex;
   flex-direction: column;
@@ -23,10 +24,14 @@
   align-content: stretch;
   align-items: center;
   justify-content: center;
+  text-align: center;
 }
 .gux-message-container .gux-no-matches {
   box-sizing: border-box;
-  height: 32px;
-  padding: 8px 16px;
-  color: #2e394c;
-}
+  height: var(--gse-ui-menu-option-height);
+  font-family: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontFamily);
+  font-weight: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontWeight);
+  line-height: var(--gse-ui-dropdown-menu-emptyState-subheader-text-lineHeight);
+  font-size: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontSize);
+  color: var(--gse-ui-dropdown-menu-emptyState-subheader-foregroundColor);
+}

package/dist/collection/components/stable/gux-listbox/gux-listbox.js

@@ -2,8 +2,8 @@ import { h, Host } from '@stencil/core';
 import { actOnActiveOption, clearActiveOptions, goToOption, hasPreviousOption, hasNextOption, onClickedOption, setFirstOptionActive, setInitialActiveOption, setLastOptionActive, setNextOptionActive, setPreviousOptionActive, matchOption } from './gux-listbox.service';
 import { optionTagSelector } from './options/option-types';
 import { buildI18nForComponent } from '../../../i18n';
-import { whenEventIsFrom } from '../../../utils/dom/when-event-is-from';
-import simulateNativeEvent from '../../../utils/dom/simulate-native-event';
+import { whenEventIsFrom } from '@utils/dom/when-event-is-from';
+import simulateNativeEvent from '@utils/dom/simulate-native-event';
 import { trackComponent } from '@utils/tracking/usage';
 import translationResources from './i18n/en.json';
 /**
@@ -15,9 +15,10 @@ import translationResources from './i18n/en.json';
 export class GuxListbox {
   constructor() {
     this.value = undefined;
+    this.loading = false;
     this.filter = '';
     this.filterType = 'none';
-    this.loading = false;
+    this.emptyMessage = undefined;
     this.selectedValues = [];
     this.listboxOptions = [];
     this.allListboxOptionsFiltered = undefined;
@@ -143,7 +144,7 @@ export class GuxListbox {
   }
   renderAllListboxOptionsFiltered() {
     return [
-      h("div", { class: "gux-message-container" }, h("div", { class: "gux-no-matches" }, this.i18n('noMatches'))),
+      h("div", { class: "gux-message-container" }, h("div", { class: "gux-no-matches" }, this.emptyMessage || this.i18n('noMatches'))),
       this.renderHiddenSlot()
     ];
   }
@@ -160,7 +161,7 @@ export class GuxListbox {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-listbox.less"]
+      "$": ["gux-listbox.scss"]
     };
   }
   static get styleUrls() {
@@ -187,6 +188,24 @@ export class GuxListbox {
         "attribute": "value",
         "reflect": false
       },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "loading",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "filter": {
         "type": "string",
         "mutable": false,
@@ -228,12 +247,12 @@ export class GuxListbox {
         "reflect": false,
         "defaultValue": "'none'"
       },
-      "loading": {
-        "type": "boolean",
+      "emptyMessage": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
@@ -242,9 +261,8 @@ export class GuxListbox {
           "tags": [],
           "text": ""
         },
-        "attribute": "loading",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "empty-message",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/stable/gux-listbox/options/gux-option/gux-option.css

@@ -1,30 +1,51 @@
-gux-option {
+:host {
   box-sizing: border-box;
   display: flex;
-  height: 32px;
-  padding: 6px 8px;
-  color: #2e394c;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: center;
+  justify-content: center;
+  height: var(--gse-ui-menu-option-height);
+  padding: var(--gse-ui-menu-option-padding);
+  color: var(--gse-ui-menu-option-label-foregroundColor);
   word-wrap: break-word;
   cursor: pointer;
+  font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);
+  font-weight: var(--gse-ui-menu-option-label-default-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-default-text-lineHeight);
+  font-size: var(--gse-ui-menu-option-label-default-text-fontSize);
+  gap: var(--gse-ui-menu-option-gap);
 }
-gux-option.gux-disabled {
+:host .gux-slot-container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:host(.gux-disabled) {
   pointer-events: none;
   cursor: default;
-  opacity: 0.5;
-}
-gux-option.gux-selected {
-  background: #deeaff;
+  opacity: var(--gse-ui-menu-option-disabled-opacity);
 }
-gux-option.gux-active,
-gux-option.gux-hovered:not(:disabled) {
-  color: #fdfdfd;
-  background: #2a60c8;
+
+:host(.gux-selected) {
+  font-family: var(--gse-ui-menu-option-label-active-text-fontFamily);
+  font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-active-text-lineHeight);
+  font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
+  background: var(--gse-ui-menu-option-selected-backgroundColor);
 }
-gux-option.gux-filtered {
-  display: none;
+
+:host(.gux-active) {
+  outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);
+  border-radius: var(--gse-semantic-focusRing-cornerRadius);
 }
-gux-option .gux-slot-container {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+
+:host(.gux-hovered:not(:disabled)) {
+  background: var(--gse-ui-menu-option-hover-backgroundColor);
 }
+
+:host(.gux-filtered) {
+  display: none;
+}

package/dist/collection/components/stable/gux-listbox/options/gux-option/gux-option.js

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { randomHTMLId } from '../../../../../utils/dom/random-html-id';
+import { randomHTMLId } from '@utils/dom/random-html-id';
 /**
  * @slot - text
  */
@@ -46,9 +46,10 @@ export class GuxOption {
       }, "aria-selected": this.getAriaSelected(), "aria-disabled": this.disabled.toString() }, h("gux-truncate", { ref: el => (this.truncateElement = el) }, h("slot", null))));
   }
   static get is() { return "gux-option"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-option.less"]
+      "$": ["gux-option.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-listbox/options/gux-option-icon/gux-option-icon.css

@@ -1,38 +1,57 @@
-gux-option-icon {
+:host {
   box-sizing: border-box;
   display: flex;
-  height: 32px;
-  padding: 6px 8px;
-  color: #2e394c;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: center;
+  justify-content: center;
+  height: var(--gse-ui-menu-option-height);
+  padding: var(--gse-ui-menu-option-padding);
+  color: var(--gse-ui-menu-option-label-foregroundColor);
   word-wrap: break-word;
   cursor: pointer;
-  align-items: flex-start;
+  font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);
+  font-weight: var(--gse-ui-menu-option-label-default-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-default-text-lineHeight);
+  font-size: var(--gse-ui-menu-option-label-default-text-fontSize);
+  gap: var(--gse-ui-menu-option-gap);
 }
-gux-option-icon.gux-disabled {
+:host .gux-slot-container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:host(.gux-disabled) {
   pointer-events: none;
   cursor: default;
-  opacity: 0.5;
+  opacity: var(--gse-ui-menu-option-disabled-opacity);
 }
-gux-option-icon.gux-selected {
-  background: #deeaff;
+
+:host(.gux-selected) {
+  font-family: var(--gse-ui-menu-option-label-active-text-fontFamily);
+  font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-active-text-lineHeight);
+  font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
+  background: var(--gse-ui-menu-option-selected-backgroundColor);
 }
-gux-option-icon.gux-active,
-gux-option-icon.gux-hovered:not(:disabled) {
-  color: #fdfdfd;
-  background: #2a60c8;
+
+:host(.gux-active) {
+  outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);
+  border-radius: var(--gse-semantic-focusRing-cornerRadius);
 }
-gux-option-icon.gux-filtered {
-  display: none;
+
+:host(.gux-hovered:not(:disabled)) {
+  background: var(--gse-ui-menu-option-hover-backgroundColor);
 }
-gux-option-icon .gux-slot-container {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+
+:host(.gux-filtered) {
+  display: none;
 }
-gux-option-icon gux-icon {
+
+:host gux-icon {
   flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  margin-block-start: calc((20px - 16px) / 2);
-  margin-inline-end: 8px;
-}
+  width: var(--gse-ui-menu-option-startIcon-width);
+  height: var(--gse-ui-menu-option-startIcon-height);
+}

package/dist/collection/components/stable/gux-listbox/options/gux-option-icon/gux-option-icon.js

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { randomHTMLId } from '../../../../../utils/dom/random-html-id';
+import { randomHTMLId } from '@utils/dom/random-html-id';
 /**
  * @slot - text
  */
@@ -55,9 +55,10 @@ export class GuxOptionIcon {
       }, "aria-selected": this.getAriaSelected(), "aria-disabled": this.disabled.toString() }, h("gux-icon", { decorative: this.iconSrText == null, "screenreader-text": this.iconSrText, "icon-name": this.iconName, style: iconStyle }), h("gux-truncate", { ref: el => (this.truncateElement = el) }, h("slot", null))));
   }
   static get is() { return "gux-option-icon"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-option-icon.less"]
+      "$": ["gux-option-icon.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-listbox-multi/gux-create-option/gux-create-option.css

@@ -1,41 +1,48 @@
-gux-create-option {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 700;
+:host {
+  min-height: var(--gse-ui-menu-option-height);
+  padding: var(--gse-ui-menu-option-padding);
+  font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);
+  font-weight: var(--gse-ui-menu-option-label-default-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-default-text-lineHeight);
+  font-size: var(--gse-ui-menu-option-label-default-text-fontSize);
+  color: var(--gse-ui-menu-option-label-foregroundColor);
   box-sizing: border-box;
   display: flex;
-  min-height: 32px;
-  padding: 6px 12px;
-  color: #2e394c;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: center;
   word-wrap: break-word;
   cursor: pointer;
 }
-gux-create-option.gux-disabled {
+:host:host(.gux-disabled) {
   pointer-events: none;
   cursor: default;
-  opacity: 0.5;
+  opacity: var(--gse-ui-menu-option-disabled-opacity);
 }
-gux-create-option.gux-active,
-gux-create-option.gux-hovered:not([disabled]) {
-  color: #fdfdfd;
-  background: #2a60c8;
+:host:host(.gux-active) {
+  outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);
+  border-radius: var(--gse-semantic-focusRing-cornerRadius);
 }
-gux-create-option.gux-filtered {
+:host:host(.gux-hovered:not([disabled])) {
+  background: var(--gse-ui-menu-option-hover-backgroundColor);
+}
+:host:host(.gux-filtered) {
   display: none;
 }
-gux-create-option gux-icon {
-  width: 16px;
-  height: 100%;
-  padding-right: 10px;
+:host gux-icon {
+  width: var(--gse-ui-menu-option-startIcon-width);
+  height: var(--gse-ui-menu-option-startIcon-height);
+  padding-right: var(--gse-ui-menu-option-gap);
 }
-gux-create-option .gux-option {
+:host .gux-option {
   display: inline-flex;
 }
-gux-create-option .gux-screenreader {
+:host .gux-screenreader {
   position: absolute;
   top: auto;
   left: -10000px;
   width: 1px;
   height: 1px;
   overflow: hidden;
-}
+}

package/dist/collection/components/stable/gux-listbox-multi/gux-create-option/gux-create-option.js

@@ -40,9 +40,10 @@ export class GuxCreateOption {
     })), this.renderCustomOptionInstructions())));
   }
   static get is() { return "gux-create-option"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-create-option.less"]
+      "$": ["gux-create-option.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-listbox-multi/gux-listbox-multi.css

@@ -2,20 +2,21 @@
   box-sizing: border-box;
   display: block;
   max-height: 20rem;
-  padding: 8px 0;
-  margin: 0;
+  padding: var(--gse-ui-menu-padding);
   overflow-y: auto;
-  color: #2e394c;
-  background: #fdfdfd;
-  border: 1px solid #b4bccb;
-  border-radius: 4px;
+  background: var(--gse-ui-menu-backgroundColor);
+  border: var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);
+  border-radius: var(--gse-ui-menu-borderRadius);
   outline: none;
+  box-shadow: var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);
+  scrollbar-color: var(--gse-ui-menu-scrollbar-foregroundColor);
 }
+
 :host(:focus-visible) {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline: var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
+
 .gux-message-container {
   display: flex;
   flex-direction: column;
@@ -26,7 +27,10 @@
 }
 .gux-message-container .gux-no-matches {
   box-sizing: border-box;
-  height: 32px;
-  padding: 8px 16px;
-  color: #2e394c;
-}
+  height: var(--gse-ui-menu-option-height);
+  font-family: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontFamily);
+  font-weight: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontWeight);
+  line-height: var(--gse-ui-dropdown-menu-emptyState-subheader-text-lineHeight);
+  font-size: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontSize);
+  color: var(--gse-ui-dropdown-menu-emptyState-subheader-foregroundColor);
+}