scu-web-components 1.3.11 → 1.3.13

package/dist/tokens/source/scssVariables/components-scw-input-state-success-size-large-type-rounded-input-.json

@@ -55,8 +55,8 @@
     "outputSegmentRef": "state-success-size-large-type-rounded-input-vars.$width"
   },
   "height": {
-    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-height: 65px;",
-    "outputSegment": "$height: 65px;",
+    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-height: 60px;",
+    "outputSegment": "$height: 60px;",
     "outputSegmentRef": "state-success-size-large-type-rounded-input-vars.$height"
   },
   "constraint-horizontal": {
@@ -115,8 +115,8 @@
     "outputSegmentRef": "state-success-size-large-type-rounded-input-vars.$top"
   },
   "top-percent": {
-    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-top-percent: 51.27%;",
-    "outputSegment": "$top-percent: 51.27%;",
+    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-top-percent: 51.33%;",
+    "outputSegment": "$top-percent: 51.33%;",
     "outputSegmentRef": "state-success-size-large-type-rounded-input-vars.$top-percent"
   },
   "bottom": {

package/dist/tokens/source/scssVariables/components-scw-input-state-success-size-large-type-rounded-input-icon-left-.json

@@ -70,8 +70,8 @@
     "outputSegmentRef": "state-success-size-large-type-rounded-input-icon-left-vars.$layout-grow"
   },
   "top": {
-    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-icon-left-top: 0px;",
-    "outputSegment": "$top: 0px;",
+    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-icon-left-top: calc( var( --scw-spacing-1 ) * -0.25 );",
+    "outputSegment": "$top: calc( var( --scw-spacing-1 ) * -0.25 );",
     "outputSegmentRef": "state-success-size-large-type-rounded-input-icon-left-vars.$top"
   },
   "top-percent": {
@@ -80,8 +80,8 @@
     "outputSegmentRef": "state-success-size-large-type-rounded-input-icon-left-vars.$top-percent"
   },
   "bottom": {
-    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-icon-left-bottom: 0px;",
-    "outputSegment": "$bottom: 0px;",
+    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-icon-left-bottom: calc( var( --scw-spacing-1 ) * -0.25 );",
+    "outputSegment": "$bottom: calc( var( --scw-spacing-1 ) * -0.25 );",
     "outputSegmentRef": "state-success-size-large-type-rounded-input-icon-left-vars.$bottom"
   },
   "left": {

package/dist/tokens/source/scssVariables/components-scw-input-state-success-size-large-type-rounded-input-icon-right-.json

@@ -70,8 +70,8 @@
     "outputSegmentRef": "state-success-size-large-type-rounded-input-icon-right-vars.$layout-grow"
   },
   "top": {
-    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-icon-right-top: 0px;",
-    "outputSegment": "$top: 0px;",
+    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-icon-right-top: calc( var( --scw-spacing-1 ) * -0.25 );",
+    "outputSegment": "$top: calc( var( --scw-spacing-1 ) * -0.25 );",
     "outputSegmentRef": "state-success-size-large-type-rounded-input-icon-right-vars.$top"
   },
   "top-percent": {
@@ -80,8 +80,8 @@
     "outputSegmentRef": "state-success-size-large-type-rounded-input-icon-right-vars.$top-percent"
   },
   "bottom": {
-    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-icon-right-bottom: 0px;",
-    "outputSegment": "$bottom: 0px;",
+    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-icon-right-bottom: calc( var( --scw-spacing-1 ) * -0.25 );",
+    "outputSegment": "$bottom: calc( var( --scw-spacing-1 ) * -0.25 );",
     "outputSegmentRef": "state-success-size-large-type-rounded-input-icon-right-vars.$bottom"
   },
   "left": {

package/dist/tokens/source/scssVariables/components-scw-input-state-success-size-large-type-rounded-input-placeholder-.json

@@ -15,8 +15,8 @@
     "outputSegmentRef": "state-success-size-large-type-rounded-input-placeholder-vars.$width"
   },
   "height": {
-    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-placeholder-height: 31px;",
-    "outputSegment": "$height: 31px;",
+    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-placeholder-height: 27px;",
+    "outputSegment": "$height: 27px;",
     "outputSegmentRef": "state-success-size-large-type-rounded-input-placeholder-vars.$height"
   },
   "constraint-horizontal": {
@@ -70,8 +70,8 @@
     "outputSegmentRef": "state-success-size-large-type-rounded-input-placeholder-vars.$layout-grow"
   },
   "top": {
-    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-placeholder-top: calc( var( --scw-spacing-1 ) * 1.7 );",
-    "outputSegment": "$top: calc( var( --scw-spacing-1 ) * 1.7 );",
+    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-placeholder-top: calc( var( --scw-spacing-1 ) * 1.65 );",
+    "outputSegment": "$top: calc( var( --scw-spacing-1 ) * 1.65 );",
     "outputSegmentRef": "state-success-size-large-type-rounded-input-placeholder-vars.$top"
   },
   "top-percent": {
@@ -80,8 +80,8 @@
     "outputSegmentRef": "state-success-size-large-type-rounded-input-placeholder-vars.$top-percent"
   },
   "bottom": {
-    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-placeholder-bottom: calc( var( --scw-spacing-1 ) * 1.7 );",
-    "outputSegment": "$bottom: calc( var( --scw-spacing-1 ) * 1.7 );",
+    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-placeholder-bottom: calc( var( --scw-spacing-1 ) * 1.65 );",
+    "outputSegment": "$bottom: calc( var( --scw-spacing-1 ) * 1.65 );",
     "outputSegmentRef": "state-success-size-large-type-rounded-input-placeholder-vars.$bottom"
   },
   "left": {

package/dist/tokens/source/scssVariables/components-scw-input-state-success-size-large-type-rounded-input-placeholder-placeholder-.json

@@ -10,8 +10,8 @@
     "outputSegmentRef": "state-success-size-large-type-rounded-input-placeholder-placeholder-vars.$characters"
   },
   "font-size": {
-    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-placeholder-placeholder-font-size: 1.25rem;",
-    "outputSegment": "$font-size: 1.25rem;",
+    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-placeholder-placeholder-font-size: 1.125rem;",
+    "outputSegment": "$font-size: 1.125rem;",
     "outputSegmentRef": "state-success-size-large-type-rounded-input-placeholder-placeholder-vars.$font-size"
   },
   "text-align-horizontal": {
@@ -45,8 +45,8 @@
     "outputSegmentRef": "state-success-size-large-type-rounded-input-placeholder-placeholder-vars.$font-weight"
   },
   "line-height": {
-    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-placeholder-placeholder-line-height: 1.938rem;",
-    "outputSegment": "$line-height: 1.938rem;",
+    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-placeholder-placeholder-line-height: 1.688rem;",
+    "outputSegment": "$line-height: 1.688rem;",
     "outputSegmentRef": "state-success-size-large-type-rounded-input-placeholder-placeholder-vars.$line-height"
   },
   "letter-spacing": {
@@ -55,8 +55,8 @@
     "outputSegmentRef": "state-success-size-large-type-rounded-input-placeholder-placeholder-vars.$letter-spacing"
   },
   "font": {
-    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-placeholder-placeholder-font: var( --scw-type-text-06-font );",
-    "outputSegment": "$font: var( --scw-type-text-06-font );",
+    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-placeholder-placeholder-font: var( --scw-type-text-font );",
+    "outputSegment": "$font: var( --scw-type-text-font );",
     "outputSegmentRef": "state-success-size-large-type-rounded-input-placeholder-placeholder-vars.$font"
   },
   "width": {
@@ -65,8 +65,8 @@
     "outputSegmentRef": "state-success-size-large-type-rounded-input-placeholder-placeholder-vars.$width"
   },
   "height": {
-    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-placeholder-placeholder-height: 31px;",
-    "outputSegment": "$height: 31px;",
+    "output": "$comp-scw-input-state-success-size-large-type-rounded-input-placeholder-placeholder-height: 27px;",
+    "outputSegment": "$height: 27px;",
     "outputSegmentRef": "state-success-size-large-type-rounded-input-placeholder-placeholder-vars.$height"
   },
   "constraint-horizontal": {

package/dist/tokens/source/scssVariables/components-scw-input-state-success-size-large-type-rounded-label-.json

@@ -75,13 +75,13 @@
     "outputSegmentRef": "state-success-size-large-type-rounded-label-vars.$top"
   },
   "top-percent": {
-    "output": "$comp-scw-input-state-success-size-large-type-rounded-label-top-percent: 9.75%;",
-    "outputSegment": "$top-percent: 9.75%;",
+    "output": "$comp-scw-input-state-success-size-large-type-rounded-label-top-percent: 10.18%;",
+    "outputSegment": "$top-percent: 10.18%;",
     "outputSegmentRef": "state-success-size-large-type-rounded-label-vars.$top-percent"
   },
   "bottom": {
-    "output": "$comp-scw-input-state-success-size-large-type-rounded-label-bottom: calc( var( --scw-spacing-1 ) * 9.5 );",
-    "outputSegment": "$bottom: calc( var( --scw-spacing-1 ) * 9.5 );",
+    "output": "$comp-scw-input-state-success-size-large-type-rounded-label-bottom: var( --scw-spacing-9 );",
+    "outputSegment": "$bottom: var( --scw-spacing-9 );",
     "outputSegmentRef": "state-success-size-large-type-rounded-label-vars.$bottom"
   },
   "left": {

package/dist/tokens/source/scssVariables/components-scw-input-state-success-size-small-type-rounded-input-.json

@@ -15,8 +15,8 @@
     "outputSegmentRef": "state-success-size-small-type-rounded-input-vars.$blend-mode"
   },
   "stroke-color": {
-    "output": "$comp-scw-input-state-success-size-small-type-rounded-input-stroke-color: var( --scw-color-grey );",
-    "outputSegment": "$stroke-color: var( --scw-color-grey );",
+    "output": "$comp-scw-input-state-success-size-small-type-rounded-input-stroke-color: var( --scw-color-grey-02 );",
+    "outputSegment": "$stroke-color: var( --scw-color-grey-02 );",
     "outputSegmentRef": "state-success-size-small-type-rounded-input-vars.$stroke-color"
   },
   "stroke-weight": {

package/dist/tokens/source/scssVariables/components-scw-input-state-success-size-small-type-rounded-input-icon-right-icon-icon-vector-color-02-.json

@@ -5,8 +5,8 @@
     "namespace": "state-success-size-small-type-rounded-input-icon-right-icon-icon-vector-color-02-vars"
   },
   "background-color": {
-    "output": "$comp-scw-input-state-success-size-small-type-rounded-input-icon-right-icon-icon-vector-color-02-background-color: var( --scw-color-grey-04 );",
-    "outputSegment": "$background-color: var( --scw-color-grey-04 );",
+    "output": "$comp-scw-input-state-success-size-small-type-rounded-input-icon-right-icon-icon-vector-color-02-background-color: var( --scw-color-primary-01 );",
+    "outputSegment": "$background-color: var( --scw-color-primary-01 );",
     "outputSegmentRef": "state-success-size-small-type-rounded-input-icon-right-icon-icon-vector-color-02-vars.$background-color"
   },
   "blend-mode": {

package/dist/tokens/source/scssVariables/components-scw-input-state-success-size-small-type-rounded-input-placeholder-placeholder-.json

@@ -30,8 +30,8 @@
     "outputSegmentRef": "state-success-size-small-type-rounded-input-placeholder-placeholder-vars.$text-transform"
   },
   "color": {
-    "output": "",
-    "outputSegment": "",
+    "output": "$comp-scw-input-state-success-size-small-type-rounded-input-placeholder-placeholder-color: var( --scw-color-grey-04 );",
+    "outputSegment": "$color: var( --scw-color-grey-04 );",
     "outputSegmentRef": "state-success-size-small-type-rounded-input-placeholder-placeholder-vars.$color"
   },
   "font-family": {

package/dist/tokens/source/scssVariables/components-scw-input-state-success-type-rounded-input-.json

@@ -15,8 +15,8 @@
     "outputSegmentRef": "state-success-type-rounded-input-vars.$blend-mode"
   },
   "stroke-color": {
-    "output": "$comp-scw-input-state-success-type-rounded-input-stroke-color: var( --scw-color-grey );",
-    "outputSegment": "$stroke-color: var( --scw-color-grey );",
+    "output": "$comp-scw-input-state-success-type-rounded-input-stroke-color: var( --scw-color-grey-02 );",
+    "outputSegment": "$stroke-color: var( --scw-color-grey-02 );",
     "outputSegmentRef": "state-success-type-rounded-input-vars.$stroke-color"
   },
   "stroke-weight": {

package/dist/tokens/source/scssVariables/components-scw-input-state-success-type-rounded-input-icon-right-icon-icon-vector-color-02-.json

@@ -5,8 +5,8 @@
     "namespace": "state-success-type-rounded-input-icon-right-icon-icon-vector-color-02-vars"
   },
   "background-color": {
-    "output": "$comp-scw-input-state-success-type-rounded-input-icon-right-icon-icon-vector-color-02-background-color: var( --scw-color-grey-04 );",
-    "outputSegment": "$background-color: var( --scw-color-grey-04 );",
+    "output": "$comp-scw-input-state-success-type-rounded-input-icon-right-icon-icon-vector-color-02-background-color: var( --scw-color-primary-01 );",
+    "outputSegment": "$background-color: var( --scw-color-primary-01 );",
     "outputSegmentRef": "state-success-type-rounded-input-icon-right-icon-icon-vector-color-02-vars.$background-color"
   },
   "blend-mode": {

package/dist/tokens/source/scssVariables/components-scw-input-state-success-type-rounded-input-placeholder-placeholder-.json

@@ -30,8 +30,8 @@
     "outputSegmentRef": "state-success-type-rounded-input-placeholder-placeholder-vars.$text-transform"
   },
   "color": {
-    "output": "",
-    "outputSegment": "",
+    "output": "$comp-scw-input-state-success-type-rounded-input-placeholder-placeholder-color: var( --scw-color-grey-04 );",
+    "outputSegment": "$color: var( --scw-color-grey-04 );",
     "outputSegmentRef": "state-success-type-rounded-input-placeholder-placeholder-vars.$color"
   },
   "font-family": {

package/dist/tokens/source/scssVariables/components-scw-input-type-rounded-input-placeholder-placeholder-.json

@@ -30,8 +30,8 @@
     "outputSegmentRef": "type-rounded-input-placeholder-placeholder-vars.$text-transform"
   },
   "color": {
-    "output": "",
-    "outputSegment": "",
+    "output": "$comp-scw-input-type-rounded-input-placeholder-placeholder-color: var( --scw-color-grey-04 );",
+    "outputSegment": "$color: var( --scw-color-grey-04 );",
     "outputSegmentRef": "type-rounded-input-placeholder-placeholder-vars.$color"
   },
   "font-family": {

package/dist/tokens/source/scssVariables/components-scw-tag-.json

@@ -50,8 +50,8 @@
     "outputSegmentRef": "index-vars.$width"
   },
   "height": {
-    "output": "$comp-scw-tag-height: 300px;",
-    "outputSegment": "$height: 300px;",
+    "output": "$comp-scw-tag-height: 385px;",
+    "outputSegment": "$height: 385px;",
     "outputSegmentRef": "index-vars.$height"
   },
   "constraint-horizontal": {

package/dist/tokens/source/scssVariables/components-scw-tag-default-.json

@@ -100,13 +100,13 @@
     "outputSegmentRef": "default-vars.$top"
   },
   "top-percent": {
-    "output": "$comp-scw-tag-default-top-percent: 12.33%;",
-    "outputSegment": "$top-percent: 12.33%;",
+    "output": "$comp-scw-tag-default-top-percent: 9.61%;",
+    "outputSegment": "$top-percent: 9.61%;",
     "outputSegmentRef": "default-vars.$top-percent"
   },
   "bottom": {
-    "output": "$comp-scw-tag-default-bottom: calc( var( --scw-spacing-1 ) * 24.8 );",
-    "outputSegment": "$bottom: calc( var( --scw-spacing-1 ) * 24.8 );",
+    "output": "$comp-scw-tag-default-bottom: calc( var( --scw-spacing-1 ) * 33.3 );",
+    "outputSegment": "$bottom: calc( var( --scw-spacing-1 ) * 33.3 );",
     "outputSegmentRef": "default-vars.$bottom"
   },
   "left": {

package/dist/tokens/source/scssVariables/components-scw-tag-size-small-.json

@@ -95,18 +95,18 @@
     "outputSegmentRef": "size-small-vars.$layout-grow"
   },
   "top": {
-    "output": "$comp-scw-tag-size-small-top: calc( var( --scw-spacing-1 ) * 16.3 );",
-    "outputSegment": "$top: calc( var( --scw-spacing-1 ) * 16.3 );",
+    "output": "$comp-scw-tag-size-small-top: calc( var( --scw-spacing-1 ) * 19.25 );",
+    "outputSegment": "$top: calc( var( --scw-spacing-1 ) * 19.25 );",
     "outputSegmentRef": "size-small-vars.$top"
   },
   "top-percent": {
-    "output": "$comp-scw-tag-size-small-top-percent: 58.83%;",
-    "outputSegment": "$top-percent: 58.83%;",
+    "output": "$comp-scw-tag-size-small-top-percent: 53.51%;",
+    "outputSegment": "$top-percent: 53.51%;",
     "outputSegmentRef": "size-small-vars.$top-percent"
   },
   "bottom": {
-    "output": "$comp-scw-tag-size-small-bottom: var( --scw-spacing-11 );",
-    "outputSegment": "$bottom: var( --scw-spacing-11 );",
+    "output": "$comp-scw-tag-size-small-bottom: calc( var( --scw-spacing-1 ) * 16.55 );",
+    "outputSegment": "$bottom: calc( var( --scw-spacing-1 ) * 16.55 );",
     "outputSegmentRef": "size-small-vars.$bottom"
   },
   "left": {

package/dist/tokens/source/scssVariables/components-scw-tag-state-hover-.json

@@ -100,13 +100,13 @@
     "outputSegmentRef": "state-hover-vars.$top"
   },
   "top-percent": {
-    "output": "$comp-scw-tag-state-hover-top-percent: 25.67%;",
-    "outputSegment": "$top-percent: 25.67%;",
+    "output": "$comp-scw-tag-state-hover-top-percent: 20%;",
+    "outputSegment": "$top-percent: 20%;",
     "outputSegmentRef": "state-hover-vars.$top-percent"
   },
   "bottom": {
-    "output": "$comp-scw-tag-state-hover-bottom: calc( var( --scw-spacing-1 ) * 20.8 );",
-    "outputSegment": "$bottom: calc( var( --scw-spacing-1 ) * 20.8 );",
+    "output": "$comp-scw-tag-state-hover-bottom: calc( var( --scw-spacing-1 ) * 29.3 );",
+    "outputSegment": "$bottom: calc( var( --scw-spacing-1 ) * 29.3 );",
     "outputSegmentRef": "state-hover-vars.$bottom"
   },
   "left": {

package/dist/tokens/source/scssVariables/components-scw-tag-state-hover-size-small-.json

@@ -95,18 +95,18 @@
     "outputSegmentRef": "state-hover-size-small-vars.$layout-grow"
   },
   "top": {
-    "output": "$comp-scw-tag-state-hover-size-small-top: calc( var( --scw-spacing-1 ) * 20 );",
-    "outputSegment": "$top: calc( var( --scw-spacing-1 ) * 20 );",
+    "output": "$comp-scw-tag-state-hover-size-small-top: calc( var( --scw-spacing-1 ) * 22.95 );",
+    "outputSegment": "$top: calc( var( --scw-spacing-1 ) * 22.95 );",
     "outputSegmentRef": "state-hover-size-small-vars.$top"
   },
   "top-percent": {
-    "output": "$comp-scw-tag-state-hover-size-small-top-percent: 71.17%;",
-    "outputSegment": "$top-percent: 71.17%;",
+    "output": "$comp-scw-tag-state-hover-size-small-top-percent: 63.12%;",
+    "outputSegment": "$top-percent: 63.12%;",
     "outputSegmentRef": "state-hover-size-small-vars.$top-percent"
   },
   "bottom": {
-    "output": "$comp-scw-tag-state-hover-size-small-bottom: calc( var( --scw-spacing-1 ) * 7.3 );",
-    "outputSegment": "$bottom: calc( var( --scw-spacing-1 ) * 7.3 );",
+    "output": "$comp-scw-tag-state-hover-size-small-bottom: calc( var( --scw-spacing-1 ) * 12.85 );",
+    "outputSegment": "$bottom: calc( var( --scw-spacing-1 ) * 12.85 );",
     "outputSegmentRef": "state-hover-size-small-vars.$bottom"
   },
   "left": {

package/dist/tokens/source/scssVariables/components-scw-tag-state-selected-.json

@@ -5,8 +5,8 @@
     "namespace": "state-selected-vars"
   },
   "background-color": {
-    "output": "$comp-scw-tag-state-selected-background-color: var( --scw-color-grey-02 );",
-    "outputSegment": "$background-color: var( --scw-color-grey-02 );",
+    "output": "$comp-scw-tag-state-selected-background-color: var( --scw-color-grey-03 );",
+    "outputSegment": "$background-color: var( --scw-color-grey-03 );",
     "outputSegmentRef": "state-selected-vars.$background-color"
   },
   "blend-mode": {
@@ -100,13 +100,13 @@
     "outputSegmentRef": "state-selected-vars.$top"
   },
   "top-percent": {
-    "output": "$comp-scw-tag-state-selected-top-percent: 39%;",
-    "outputSegment": "$top-percent: 39%;",
+    "output": "$comp-scw-tag-state-selected-top-percent: 30.39%;",
+    "outputSegment": "$top-percent: 30.39%;",
     "outputSegmentRef": "state-selected-vars.$top-percent"
   },
   "bottom": {
-    "output": "$comp-scw-tag-state-selected-bottom: calc( var( --scw-spacing-1 ) * 16.8 );",
-    "outputSegment": "$bottom: calc( var( --scw-spacing-1 ) * 16.8 );",
+    "output": "$comp-scw-tag-state-selected-bottom: calc( var( --scw-spacing-1 ) * 25.3 );",
+    "outputSegment": "$bottom: calc( var( --scw-spacing-1 ) * 25.3 );",
     "outputSegmentRef": "state-selected-vars.$bottom"
   },
   "left": {

package/dist/tokens/source/scssVariables/components-scw-tag-state-selected-hover-.json

@@ -0,0 +1,147 @@
+{
+  "module-info": {
+    "output": "",
+    "path": "comp-scw-tag/state-selected-hover-vars",
+    "namespace": "state-selected-hover-vars"
+  },
+  "background-color": {
+    "output": "$comp-scw-tag-state-selected-hover-background-color: var( --scw-color-grey-02 );",
+    "outputSegment": "$background-color: var( --scw-color-grey-02 );",
+    "outputSegmentRef": "state-selected-hover-vars.$background-color"
+  },
+  "blend-mode": {
+    "output": "$comp-scw-tag-state-selected-hover-blend-mode: NORMAL;",
+    "outputSegment": "$blend-mode: NORMAL;",
+    "outputSegmentRef": "state-selected-hover-vars.$blend-mode"
+  },
+  "corner-radius-top-left": {
+    "output": "$comp-scw-tag-state-selected-hover-corner-radius-top-left: 30px;",
+    "outputSegment": "$corner-radius-top-left: 30px;",
+    "outputSegmentRef": "state-selected-hover-vars.$corner-radius-top-left"
+  },
+  "corner-radius-top-right": {
+    "output": "$comp-scw-tag-state-selected-hover-corner-radius-top-right: 30px;",
+    "outputSegment": "$corner-radius-top-right: 30px;",
+    "outputSegmentRef": "state-selected-hover-vars.$corner-radius-top-right"
+  },
+  "corner-radius-bottom-right": {
+    "output": "$comp-scw-tag-state-selected-hover-corner-radius-bottom-right: 30px;",
+    "outputSegment": "$corner-radius-bottom-right: 30px;",
+    "outputSegmentRef": "state-selected-hover-vars.$corner-radius-bottom-right"
+  },
+  "corner-radius-bottom-left": {
+    "output": "$comp-scw-tag-state-selected-hover-corner-radius-bottom-left: 30px;",
+    "outputSegment": "$corner-radius-bottom-left: 30px;",
+    "outputSegmentRef": "state-selected-hover-vars.$corner-radius-bottom-left"
+  },
+  "width": {
+    "output": "$comp-scw-tag-state-selected-hover-width: 129px;",
+    "outputSegment": "$width: 129px;",
+    "outputSegmentRef": "state-selected-hover-vars.$width"
+  },
+  "height": {
+    "output": "$comp-scw-tag-state-selected-hover-height: 30px;",
+    "outputSegment": "$height: 30px;",
+    "outputSegmentRef": "state-selected-hover-vars.$height"
+  },
+  "constraint-horizontal": {
+    "output": "$comp-scw-tag-state-selected-hover-constraint-horizontal: MIN;",
+    "outputSegment": "$constraint-horizontal: MIN;",
+    "outputSegmentRef": "state-selected-hover-vars.$constraint-horizontal"
+  },
+  "constraint-vertical": {
+    "output": "$comp-scw-tag-state-selected-hover-constraint-vertical: MIN;",
+    "outputSegment": "$constraint-vertical: MIN;",
+    "outputSegmentRef": "state-selected-hover-vars.$constraint-vertical"
+  },
+  "constrain-proportions": {
+    "output": "$comp-scw-tag-state-selected-hover-constrain-proportions: false;",
+    "outputSegment": "$constrain-proportions: false;",
+    "outputSegmentRef": "state-selected-hover-vars.$constrain-proportions"
+  },
+  "layout-context": {
+    "output": "$comp-scw-tag-state-selected-hover-layout-context: ABSOLUTE;",
+    "outputSegment": "$layout-context: ABSOLUTE;",
+    "outputSegmentRef": "state-selected-hover-vars.$layout-context"
+  },
+  "layout-mode": {
+    "output": "$comp-scw-tag-state-selected-hover-layout-mode: HORIZONTAL;",
+    "outputSegment": "$layout-mode: HORIZONTAL;",
+    "outputSegmentRef": "state-selected-hover-vars.$layout-mode"
+  },
+  "primary-axis-align-items": {
+    "output": "$comp-scw-tag-state-selected-hover-primary-axis-align-items: CENTER;",
+    "outputSegment": "$primary-axis-align-items: CENTER;",
+    "outputSegmentRef": "state-selected-hover-vars.$primary-axis-align-items"
+  },
+  "counter-axis-align-items": {
+    "output": "$comp-scw-tag-state-selected-hover-counter-axis-align-items: CENTER;",
+    "outputSegment": "$counter-axis-align-items: CENTER;",
+    "outputSegmentRef": "state-selected-hover-vars.$counter-axis-align-items"
+  },
+  "item-spacing": {
+    "output": "$comp-scw-tag-state-selected-hover-item-spacing: calc( var( --scw-spacing-1 ) * 0.5 );",
+    "outputSegment": "$item-spacing: calc( var( --scw-spacing-1 ) * 0.5 );",
+    "outputSegmentRef": "state-selected-hover-vars.$item-spacing"
+  },
+  "layout-align": {
+    "output": "$comp-scw-tag-state-selected-hover-layout-align: MIN;",
+    "outputSegment": "$layout-align: MIN;",
+    "outputSegmentRef": "state-selected-hover-vars.$layout-align"
+  },
+  "layout-grow": {
+    "output": "$comp-scw-tag-state-selected-hover-layout-grow: 0;",
+    "outputSegment": "$layout-grow: 0;",
+    "outputSegmentRef": "state-selected-hover-vars.$layout-grow"
+  },
+  "top": {
+    "output": "$comp-scw-tag-state-selected-hover-top: calc( var( --scw-spacing-1 ) * 14.2 );",
+    "outputSegment": "$top: calc( var( --scw-spacing-1 ) * 14.2 );",
+    "outputSegmentRef": "state-selected-hover-vars.$top"
+  },
+  "top-percent": {
+    "output": "$comp-scw-tag-state-selected-hover-top-percent: 40.78%;",
+    "outputSegment": "$top-percent: 40.78%;",
+    "outputSegmentRef": "state-selected-hover-vars.$top-percent"
+  },
+  "bottom": {
+    "output": "$comp-scw-tag-state-selected-hover-bottom: calc( var( --scw-spacing-1 ) * 21.3 );",
+    "outputSegment": "$bottom: calc( var( --scw-spacing-1 ) * 21.3 );",
+    "outputSegmentRef": "state-selected-hover-vars.$bottom"
+  },
+  "left": {
+    "output": "$comp-scw-tag-state-selected-hover-left: var( --scw-spacing-2 );",
+    "outputSegment": "$left: var( --scw-spacing-2 );",
+    "outputSegmentRef": "state-selected-hover-vars.$left"
+  },
+  "left-percent": {
+    "output": "$comp-scw-tag-state-selected-hover-left-percent: 19.38%;",
+    "outputSegment": "$left-percent: 19.38%;",
+    "outputSegmentRef": "state-selected-hover-vars.$left-percent"
+  },
+  "right": {
+    "output": "$comp-scw-tag-state-selected-hover-right: calc( var( --scw-spacing-1 ) * 28.7 );",
+    "outputSegment": "$right: calc( var( --scw-spacing-1 ) * 28.7 );",
+    "outputSegmentRef": "state-selected-hover-vars.$right"
+  },
+  "padding-left": {
+    "output": "$comp-scw-tag-state-selected-hover-padding-left: var( --scw-spacing-1 );",
+    "outputSegment": "$padding-left: var( --scw-spacing-1 );",
+    "outputSegmentRef": "state-selected-hover-vars.$padding-left"
+  },
+  "padding-right": {
+    "output": "$comp-scw-tag-state-selected-hover-padding-right: var( --scw-spacing-1 );",
+    "outputSegment": "$padding-right: var( --scw-spacing-1 );",
+    "outputSegmentRef": "state-selected-hover-vars.$padding-right"
+  },
+  "padding-top": {
+    "output": "$comp-scw-tag-state-selected-hover-padding-top: calc( var( --scw-spacing-1 ) * 0.5 );",
+    "outputSegment": "$padding-top: calc( var( --scw-spacing-1 ) * 0.5 );",
+    "outputSegmentRef": "state-selected-hover-vars.$padding-top"
+  },
+  "padding-bottom": {
+    "output": "$comp-scw-tag-state-selected-hover-padding-bottom: calc( var( --scw-spacing-1 ) * 0.5 );",
+    "outputSegment": "$padding-bottom: calc( var( --scw-spacing-1 ) * 0.5 );",
+    "outputSegmentRef": "state-selected-hover-vars.$padding-bottom"
+  }
+}